React Native에서 키보드 처리 제대로 하기

문제 상황

로그인 폼을 개발하는데 키보드가 올라오면 입력창이 가려지는 문제가 발생했다. iOS에서는 괜찮았는데 Android에서 특히 심각했다.

KeyboardAvoidingView 적용

기본적인 해결책은 React Native에서 제공하는 KeyboardAvoidingView를 사용하는 것이다.

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

const LoginScreen = () => (
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{ flex: 1 }}
  >
    <TextInput placeholder="이메일" />
    <TextInput placeholder="비밀번호" secureTextEntry />
  </KeyboardAvoidingView>
);

Platform별 차이

iOS와 Android는 키보드 동작이 다르다.

• iOS: behavior="padding"이 자연스럽다
• Android: behavior="height" 또는 android:windowSoftInputMode="adjustResize"를 AndroidManifest.xml에 추가

ScrollView와 함께 사용

입력 필드가 많은 경우 ScrollView와 조합해야 한다.

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  style={{ flex: 1 }}
>
  <ScrollView>
    <TextInput />
    <TextInput />
    {/* more inputs */}
  </ScrollView>
</KeyboardAvoidingView>

Android는 manifest 설정만으로 해결되는 경우가 많아서 KeyboardAvoidingView를 iOS에만 적용하는 것도 방법이다.

keyboardVerticalOffset

헤더가 있는 화면에서는 offset 조정이 필요했다.

<KeyboardAvoidingView
  keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
  behavior="padding"
>

결론

Platform별로 다른 접근이 필요하다는 점이 번거롭지만, 한 번 패턴을 잡아두니 재사용이 가능했다. 공통 컴포넌트로 분리해서 사용 중이다.