React Native에서 Android 키보드 이슈 해결

문제 상황

회원가입 폼을 구현하던 중 Android에서 키보드가 입력 필드를 가리는 문제가 발생했다. iOS는 정상 동작했지만 Android만 하단 입력 필드가 키보드에 완전히 가려졌다.

시도한 방법들

1. KeyboardAvoidingView 적용

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

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

일부 개선되었지만 완벽하지 않았다.

2. AndroidManifest.xml 설정

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">
</activity>

adjustResize로 변경하니 레이아웃이 키보드에 맞춰 조정되었다. 기본값인 adjustPan은 화면을 밀어올리기만 해서 문제가 있었다.

3. react-native-keyboard-aware-scroll-view

더 복잡한 폼에서는 서드파티 라이브러리를 사용했다.

npm install react-native-keyboard-aware-scroll-view

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

<KeyboardAwareScrollView
  enableOnAndroid={true}
  extraScrollHeight={20}
>
  {/* 폼 컴포넌트들 */}
</KeyboardAwareScrollView>

결론

단순한 폼은 adjustResize 설정으로 충분했다. 복잡한 레이아웃에서는 KeyboardAwareScrollView가 효과적이었다. Android와 iOS의 키보드 동작 차이를 항상 염두에 두고 테스트해야 한다.