[React Native] 키보드가 TextInput을 가린다면?

 

키보드가 TextInput을 가린다면?

 

 

 

로그인 페이지에서는 이메일, 비밀번호만 작성하면 돼서 키보드에 TextInput이 가릴일이 없었는데

회원가입 페이지에서는 TextInput이 많다보니 키보드에 가려지는 현상이 발생했다.

 

 

검색을 해보니 React Native에서 keyboardAvoidingView 컴포넌트를 사용해 해당 문제를 해결해준다고 해서 적용을 해보았다.

 

import { Keyboard } from 'react-native';

 <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
 	<KeyboardAvoidingView {...props} behavior={'position'} style={props.style}>
      	{children}
    </KeyboardAvoidingView>
</TouchableWithoutFeedback>

 

키보드가 TextInput을 가리는 이슈를 해결을 했지만 오히려 문제가 두개가 더 생겼다. ㅋㅋㅋㅋ

 

1. TextInput 외 영역 선택시 키보드가 내려 가야 하는데 내려가지 않음

2. 키보드가 화면에 올라갔을때 화면 스크롤이 동작하지 않음

 

 

 

react-native-keyboard-aware-scroll-view

https://github.com/APSL/react-native-keyboard-aware-scroll-view

GitHub - APSL/react-native-keyboard-aware-scroll-view: A ScrollView component that handles keyboard appearance and automatically

찾아보니 위와 같은 라이브러리가 있다는것을 알게되었고 사용자도 적당한 것 같다.

 

import { ReactNode } from 'react';
import {
  TouchableWithoutFeedback,
  Keyboard,
  StyleProp,
  ViewStyle,
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

interface Props {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
}

export default function DismissKeyboardView({ children, ...props }: Props) {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <KeyboardAwareScrollView
        {...props}
        style={props.style}
      >
        {children}
      </KeyboardAwareScrollView>
    </TouchableWithoutFeedback>
  );
}

 

위와같이 컴포넌트를 구현해서 적용했더니 모든 문제가 다 해결되고 정상작동하나? 했더니

 

IOS만 동작하고 Android에서는 동작을 안하는 모습이 보여서 stackoverflow에 검색해보니
https://stackoverflow.com/questions/45466026/keyboard-aware-scroll-view-android-issue

 

다른 외국인 분들도 정확한 원인은 모르지만 해결한 코드를 공유했다.

 

⭐️ 최종 코드

import { ReactNode } from 'react';
import {
  TouchableWithoutFeedback,
  Keyboard,
  StyleProp,
  ViewStyle,
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

interface Props {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
}

export default function DismissKeyboardView({ children, ...props }: Props) {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <KeyboardAwareScrollView
        enableOnAndroid={true}
        extraHeight={80}
        extraScrollHeight={100}
        {...props}
        style={props.style}
      >
        {children}
      </KeyboardAwareScrollView>
    </TouchableWithoutFeedback>
  );
}

 

나도 똑같이 적용해보니 Android에서 작동안하는 문제도 해결됐다!!!