[react-native] input 입력해야할때 키보드가 화면을 가리는 경우

KeyboardAvoidingView 사용

대안1

import { Keyboard } from 'react-native';

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

TouchableWithoutFeedback

• TouchableWithoutFeedback 화면 클릭시 onPress={ Keyboard.dismiss } 가 호출되고 Keyboard.dismiss 로 인해 키보드가 화면 아래로 내려간다.

• 화면 우선순위로 만들어 주어야 한다.(z-index)

• accessible 은 웹 접근성에 따라 버튼이 화면에 존재하면 스크린리더기가 버튼 존재에 대한 내용을 설명 하는데 사실 TouchableWithoutFeedback 이 컴포넌트는 버튼의 기능이 아닌 TextInput 외 화면 클릭시 키보드를 화면에서 내려주는 기능으로 만들어 놓았기 때문에 장애인들에게는 버튼으로서는 불필요한 기능이며 알 필요가 없는 내용이다. 그래서 스크린리더기에게 버튼의 기능으로서 쓸모없는 것이다 라고 인식시켜주는 옵션속성이다.

KeyboardAvoidingView

• TextInput을 누르면 키보드가 올라 오는데 TextInput이 화면에서 가려지지 않도록 한다.
• behavior 속성의 'position' 기능은 주로 안드로이드에서 잘 먹히고 'padding'는 주로 ios에서 잘 먹힌다. 그래서 사용시 안드로이드에서는 'position'을 사용하고 ios에서는 'padding'를 사용 하도록 분기 처리를 해줘야 한다.

단점

안드로이드 에서는 기본 제공하지만 리액트 네이티브에서는 직접 구현 해줘야 하는 부분으로

1. TextInput 외 영역 선택시 키보드가 내려 가야 하는데 내려가지 않음
2. 키보드가 화면에 올라갔을때 화면 스크롤이 동작하지 않음

react-native-keyboard-aware-scroll-view

대안2 적극권장
KeyboardAvoidingView을 사용할때 단점들을 모두 커버해주는 라이브러리

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

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <KeyboardAwareScrollView {...props} style={props.style}>
      {children}
    </KeyboardAwareScrollView>
  </TouchableWithoutFeedback>

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

출처
https://www.inflearn.com/course/lecture?courseSlug=%EB%B0%B0%EB%8B%AC%EC%95%B1-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C&unitId=104772&tab=curriculum