인프런 커뮤니티 질문&답변

안녕하세요 아래 코드의 bottomSheet 내부에 채팅 창을 넣고자 합니다..
그리고 카톡에서 키보드가 올라오면 보던 내용이 키보드를 피해 올라가는 것을 구현하고자 하고 있습니다.

아래 코드에서 BottomSheet 내부를 KeyboardAvodingView로 감싸주었을 떄는 내부 scroll이 동작을 안 하였습니다..
FlatList만 KeyboardAvoidingView를 사용하였을 때는 ..
FlatList의 내용이 가린채로 키보드가 올라왔습니다..
KeyboardAwareScrollview또한 내부 스크롤이 동작안하고 있었습니다..
혹시 아래처럼 bottomSheet를 사용해 내부 요소들을 보여줄 때 보던 내용이 키보드가 올라와도 보여질 수 있도록 자동으로 밀려올라가는(스크롤되는,,) 방법이 없을까요?

감사합니다..

import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button, KeyboardAvoidingView } from "react-native";
import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";
import { FlatList, ScrollView, TextInput } from "react-native-gesture-handler";
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";



const BottomExample = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);

  // variables
  const data = useMemo(
    () =>
      Array(50)
        .fill(0)
        .map((_, index) => `index-${index}`),
    []
  );
  const snapPoints = useMemo(() => ["25%", "50%", "100%"], []);

  // callbacks
  const handleSheetChange = useCallback((index: any) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleSnapPress = useCallback((index: any) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  const renderItem = useCallback(
    ( {item} : { item : string } ) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );
  return (
    <View style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        snapPoints={snapPoints}
        onChange={handleSheetChange}
      >

        <FlatList
          data={data}
          keyExtractor={(i) => i}
          renderItem={renderItem}
          contentContainerStyle={styles.contentContainer}
        />

        < style ={{ backgroundColor : "blue"}}>all good all fine</TextInput>
    
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 200,
  },
  contentContainer: {
    backgroundColor: "white",
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: "#eee",
  },
});

export default BottomExample;