React Native에서 TextInput 포커스 시 자동 스크롤 구현하기

React Native에서 모바일을 앱을 개발하다 보면, 화면 하단에 있는 TextInput을 선택하면 키보드가 올라오면서 입력 필드가 가려지는 현상이 종종 발생한다. 키보드가 올라올 때 인풋이 가려지면 사용성이 좋지 않으니, 인풋을 선택해서 포커스 됐을 때 자동으로 화면 스크롤이 이동해서 인풋 필드가 키보드에 가려지지 않도록 해야 했다.

1. 필요한 Hook, 컴포넌트 import

import { useRef } from 'react';
import { 
ScrollView 
} from 'react-native';

2. Ref 선언

컴포넌트 내부에서 ScrollView와 TextInput 영역을 참조할 수 있는 ref를 선언한다.

const scrollViewRef = useRef<ScrollView>(null);
const reviewInputRef = useRef<View>(null);

• scrollViewRef : ScrollView를 직접 제어하여 스크롤 위치를 조작
• reviewInputRef : TextInput의 위치를 측정하기 위한 참조

3. 포커스 핸들러 함수 작성

TextInput에 포커스가 갈 때 실행될 함수를 작성해준다.

const handleReviewInputFocus = () => {
    setTimeout(() => {
      reviewInputRef.current?.measure((x, y, width, height, pageX, pageY) => {
        scrollViewRef.current?.scrollTo({
          y: y,
          animated: true,
        });
      });
    }, 100);
  };

• setTimeout : 자연스러운 화면 이동을 위해, 애니메이션이 시작되는 시간에 약간 딜레이를 준다.
• measure : 특정 컴포넌트(뷰)가 화면의 어느 위치에 있는지, 그리고 크기가 얼마인지를 정확히 측정할 때 사용한다. y는 부모 요소를 기준으로 부모 요소 내에서의 위쪽 위치를 반환한다.
• scrollTo : 계산된 위치로 스크롤

4. ScrollView 설정

<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를 연결해준다.

5. TextInput에 적용

<ScrollView ref={scrollViewRef}>
	{/* 컨텐츠 */}
	<View ref={reviewInputRef}>
		{/* 컨텐츠 */}
	  <TextInput
	    style={styles.reviewInput}
	    value={tempReview}
	    onChangeText={setTempReview}
	    multiline
	    placeholder="리뷰를 작성해주세요"
	    onFocus={handleReviewInputFocus}
	  />
	</View>
</ScrollView>

• TextInput 자체가 아닌, TextInput을 감싸고 있는 부모이면서 + ScrollView의 바로 다음 자식인 View에 ref를 추가했는데, 이유는 measure의 y값은 부모를 기준으로 한 상대위치라서 ScrollView를 기준으로 한 상대위치로 만들어주기 위해서이다.

• 현재 내가 개발하고 있는 화면은, TextInput 하단으로 컨텐츠가 많지 않기 때문에 ref를 input 바로 상위의 부모(’나의 리뷰’ 제목 위치)에 주게되면 그만큼 화면을 스크롤 시킬 수가 없어서 스크롤이 정상적으로 동작하더라도, 인풋 하단으로 더 내릴만한 화면 높이가 없기 때문에 화면이 최하단까지 이동하더라도 input은 키보드에 가려지게 되어있다. 그래서 일부러 ‘나의 별점’ 위치에 ref를 추가하여 input이 키보드에 가려지지 않도록 해줬다.
• 그리고 만약 input 하단으로 컨텐츠가 넉넉하게 있어서 input이 키보드에 가려질 위험이 없더라도, input 자체에 ref를 주게 되면 화면 상단에 input이 너무 딱 붙어버리게 되고, 그러면 임의로 값을 좀 더 추가해줘야 하는데 그렇게 하는 것 보다는 input보다 좀 더 위에 위치한 요소에 ref를 줘서 좀 더 자연스럽게 보일 수 있도록 했다.
• 마지막으로 TextInput에 onFocus 를 추가하여 포커스 시 스크롤이 동작하도록 해준다.

이렇게 해서 입력 필드가 키보드에 가려지지 않도록 작업해줬다.

참조의 기준이 될 위치는 각자의 환경이나 원하는 바에 맞게 적절하게 지정해주면 될 것 같다.