React Native에서 iOS 키보드 여백 문제 해결하기

문제 상황

채팅 화면을 구현하던 중 iOS에서 키보드가 올라올 때 TextInput과 키보드 사이에 예상치 못한 여백이 생겼다. Android에서는 정상 동작했지만 iOS에서만 발생하는 문제였다.

원인 분석

KeyboardAvoidingView의 behavior prop을 padding으로 설정했는데, iOS 13 이상에서 SafeAreaView와 함께 사용할 때 bottom safe area가 중복 계산되는 것이 원인이었다.

// 문제가 있던 코드
<SafeAreaView style={styles.container}>
  <KeyboardAvoidingView behavior="padding">
    <TextInput />
  </KeyboardAvoidingView>
</SafeAreaView>

해결 방법

keyboardVerticalOffset prop을 활용해 offset을 조정했다. useSafeAreaInsets 훅으로 실제 safe area 값을 가져와 직접 계산하는 방식으로 변경했다.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const ChatScreen = () => {
  const insets = useSafeAreaInsets();
  
  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? insets.bottom : 0}
      style={styles.container}
    >
      <TextInput />
    </KeyboardAvoidingView>
  );
};

결과

iOS 모든 버전에서 키보드와 입력창 사이 여백이 정상적으로 처리되었다. Safe area를 고려한 계산이 필요한 경우 react-native-safe-area-context 라이브러리 사용을 권장한다.