React Native에서 iOS 키보드 높이 대응하기

문제 상황

iOS에서 채팅 입력창을 구현하는데 키보드가 올라오면 TextInput이 가려지는 문제가 발생했다. Android는 자동으로 조정되는데 iOS는 별도 처리가 필요했다.

해결 방법

React Native의 KeyboardAvoidingView를 사용했다.

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

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
  keyboardVerticalOffset={88}
>
  <ScrollView>
    {/* 채팅 내용 */}
  </ScrollView>
  <View>
    <TextInput placeholder="메시지 입력" />
  </View>
</KeyboardAvoidingView>

주의사항

• behavior는 'padding', 'height', 'position' 세 가지가 있다. 레이아웃에 따라 다르게 동작하므로 실험이 필요했다.
• keyboardVerticalOffset은 네비게이션 헤더 높이를 고려해야 한다. 우리 경우 헤더 44px + 상태바 44px = 88px로 설정했다.
• SafeAreaView와 함께 사용할 때 중첩 순서가 중요하다. KeyboardAvoidingView를 바깥에 두는 게 안정적이었다.

추가 개선

키보드 등장 시 스크롤을 자동으로 내리려면 Keyboard API를 활용했다.

import { Keyboard } from 'react-native';

useEffect(() => {
  const keyboardDidShowListener = Keyboard.addListener(
    'keyboardDidShow',
    () => {
      scrollViewRef.current.scrollToEnd({ animated: true });
    }
  );
  return () => keyboardDidShowListener.remove();
}, []);

iOS 특유의 동작 방식 때문에 Android보다 손이 많이 갔지만, 일관된 UX를 제공할 수 있게 됐다.