React Native
React Native에서 모바일을 앱을 개발하다 보면, 화면 하단에 있는 TextInput을 선택하면 키보드가 올라오면서 입력 필드가 가려지는 현상이 종종 발생한다. 키보드가 올라올 때 인풋이 가려지면 사용성이 좋지 않으니, 인풋을 선택해서 포커스 됐을 때 자동으로 화면 스크롤이 이동해서 인풋 필드가 키보드에 가려지지 않도록 해야 했다.
import { useRef } from 'react';
import {
ScrollView
} from 'react-native';컴포넌트 내부에서 ScrollView와 TextInput 영역을 참조할 수 있는 ref를 선언한다.
const scrollViewRef = useRef<ScrollView>(null);
const reviewInputRef = useRef<View>(null);TextInput에 포커스가 갈 때 실행될 함수를 작성해준다.
const handleReviewInputFocus = () => {
setTimeout(() => {
reviewInputRef.current?.measure((x, y, width, height, pageX, pageY) => {
scrollViewRef.current?.scrollTo({
y: y,
animated: true,
});
});
}, 100);
};<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{ flex: 1 }}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
>
<ScrollView
ref={scrollViewRef}
style={styles.container}
keyboardShouldPersistTaps="handled"
>
{/* 컨텐츠 */}
</ScrollView>
</KeyboardAvoidingView><ScrollView ref={scrollViewRef}>
{/* 컨텐츠 */}
<View ref={reviewInputRef}>
{/* 컨텐츠 */}
<TextInput
style={styles.reviewInput}
value={tempReview}
onChangeText={setTempReview}
multiline
placeholder="리뷰를 작성해주세요"
onFocus={handleReviewInputFocus}
/>
</View>
</ScrollView>
이렇게 해서 입력 필드가 키보드에 가려지지 않도록 작업해줬다.
참조의 기준이 될 위치는 각자의 환경이나 원하는 바에 맞게 적절하게 지정해주면 될 것 같다.