React Native에서 iOS 키보드 회피 처리하기

문제 상황

채팅 화면 개발 중 iOS에서 키보드가 올라올 때 입력창이 가려지는 이슈가 발생했다. Android는 android:windowSoftInputMode="adjustResize"로 자동 처리되지만, iOS는 별도 처리가 필요했다.

KeyboardAvoidingView 적용

import { KeyboardAvoidingView, Platform } from 'react-native';

function ChatScreen() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ flex: 1 }}
      keyboardVerticalOffset={90} // 헤더 높이
    >
      <ScrollView>
        {/* 메시지 리스트 */}
      </ScrollView>
      <TextInput placeholder="메시지 입력" />
    </KeyboardAvoidingView>
  );
}

겪은 문제들

1. SafeAreaView와의 충돌: SafeAreaView 내부에 KeyboardAvoidingView를 넣으니 offset 계산이 꼬였다. 순서를 바꿔 해결했다.

2. keyboardVerticalOffset 조정: 네비게이션 헤더 높이를 고려해야 했다. useHeaderHeight() 훅을 사용하면 동적으로 가져올 수 있다.

3. behavior 선택: padding은 컨텐츠를 밀어올리고, height는 View 높이를 조절한다. 레이아웃에 따라 적절히 선택해야 한다.

대안: react-native-keyboard-aware-scroll-view

복잡한 케이스에서는 써드파티 라이브러리가 더 안정적이었다.

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareScrollView
  enableOnAndroid={true}
  extraScrollHeight={20}
>
  {/* 컨텐츠 */}
</KeyboardAwareScrollView>

결론

간단한 경우 KeyboardAvoidingView로 충분하지만, 중첩된 스크롤이나 복잡한 레이아웃에서는 keyboard-aware-scroll-view가 더 안정적이었다. 프로젝트에서는 후자를 선택했다.