export default function Input() {
const textInputRef = useRef<TextInput | null>(null)
}
<TextInput ref={textInputRef}/>
const setFocus = () => {
textInputRef.current?.focus();
}
<Text onPress={setFocus}>foucus</Text>
import {Keyboard} from 'react-native'
<Text onPress={Keyboard.dimiss}dismiss</Text>
아이폰에서는 TextInput이 키보드를 가려버리는 버그가 발생한다...
┠ 그렇기에 리엑트 네이티브는 KeyboardAvoidingView 라는 코어 컴포넌트를 제공하지만
┗ scrollView 에서는 사용할 수 없는 크나큰 장점이 존재 한다.
단점인 이유는 화면 스크롤 해서 키보드 포커스를 벗어나는게 좀 더 편하다고 생각하기 때문?
설치
yarn add react-native-keyboard-aware-scroll-view
npm i react-native-keyboard-aware-scroll-view
const scrollViewRef = useRef<KeyboardAwareScrollView | null>(null)
<KeyboardAwareScrollView ref={scrollViewRef}/>
const scrollToINpu = (reactNode: any) => {
scrolViewRef.current?.scrollToFocusedInput(reactNode)
}
import {findNodeHandle} from 'react-native'
import type {NativeSyntheticEvent, TextInputFocusEventData} from 'react-native'
const autoFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) =>
scorllToInput(findNodeHandle(e.target))
이렇게 사용하면 키보드 input 에 따른 더 이상의 가림을 고민하지 않아도 된다.