[React Native] KeyboardAwareScrollView

오늘 댓글기능을 만들고 있었다 입력폼을 눌렀는데 키보드가 댓글 입력폼을 가리는 문제가 발생해 댓글 입력시 포커스되게 하려고  저번에 배운 useRef를 사용해봤다.. 하지만 내가 초보이기 때문인지 잘 먹지가않아 여러가지 찾아보다가 chatgpt한테 물어보던 중에  KeyboardAwareScrollView를 알게됐다

 

KeyboardAwareScrollView : 라이브러리의 스크롤 컴포넌트로, TextInput에 포커스가 가면 자동으로 스크롤을 조정해서 입력창이 키보드에 가려지지 않게 해준다. 기본 ScrollView/FlatList는 이걸 자동으로 안 해주기 때문에, 댓글창·폼 화면에서 유용하다..

 

<ScrollView> ==> <KeyboardAwareScrollView>


const inputRef = useRef<TextInput | null>(null);
const scrollRef = useRef<ScrollView | null>(null);
const headerHeight = useHeaderHeight();



<KeyboardAwareScrollView
              innerRef={(ref) => (scrollRef.current = ref)}
              style={styles.container}
              keyboardShouldPersistTaps="handled"
              enableOnAndroid
              extraScrollHeight={64}  // 키보드 위 여유공간 확보
              extraHeight={64}        // 키보드 위 여유공간 확보
              keyboardOpeningTime={0}
            >

기존의 ScrollView 태그를 아예 KeyboardAwareScrollView로 바꿔줬더니 잘 작동한다.