React Native - 키보드 감추기

해당 게시물은 처음 배우는 리액트 네이티브 책 내용 발췌한 글입니다.

input창에 입력 도중 다른 곳을 터치하면 키보드가 사라지는데, 이는 사용자 편의를 위한 일반적인 애플리케이션의 동작방식이다. 그리고 입력받는 컴포넌트의 위치에 따라 키보드가 내용을 가리고 있다면 스크롤을 통해 입력되는 모습을 사용할 수 있도록 하는 것이 좋습니다. 이번에는 입력 도중 다른 곳을 터치하면 키보드가 사라지는 기능과 키보드가 입력받는 컴포넌트를 가리지 않도록 해야한다.

TouchableWithoutFeedback 컴포넌트와 Keyboard API를 이용해야한다.
TouchableWithoutFeedback 컴포넌트는 클릭에 대해 상호 작용은 하지만 스타일 속성이 없고 반드시 하나의 자식 컴포넌트를 가져야 하는 특징이 있다. keyboard api는 react native에서 제공하는 키보드 관련 api로 키보드 상태에 따른 이벤트 등록에 많이 사용되며, keyboard api에서 제공하는 dismiss 함수는 활성화된 키보드르르 닫는 기능이다.

TouchableWithoutFeedback 컴포넌트와 keyboard api를 이용해서 만든 화면을 확인해 보면 입력 도중 다른영역을 터치할 경우 키보드가 사라지는 것을 볼 수 있다. 하지만 위치에 따라 키보드가 input 컴포넌트를 가리는 문제는 해결하지 못한다.

react-native-keyboard-aware-scroll-view 라이브러리를 사용하면 위의 문제를 쉽게 해결할 수 있다. 포커스가 있는 TextInput 컴포넌트의 위치로 자동 스크롤되는 기능 등 Input 컴포넌트에 필요한 기능등을 제공한다.

yarn add react-native-keyboard-aware-scroll-view

import React, {useState, useRef} from 'react';
import styled from 'styled-components';
import {Input, Image} from '../components/Index';
import { images } from "../utils/Image";
import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${({ theme }) => theme.background};
  padding: 20px;
`;

const Login = ({ navigation }) => {
        const [email, setEmail] = useState("");
        const [password, setPassword] = useState('');
        const  passwordRef = useRef(); // 이메일에서 next 버튼 클릭 시(onSubmitEditing에 걸어둔 이벤트가 실행)에 password로 포커스 이동 시키기 위해 만든 ref

    return (
        <KeyboardAwareScrollView
            contentContainerStyle={{ flex: 1}}
            extraScrollHeight={20}
        >
            <Container>
                <Image url={images.logo} imageStyle={{ borderRadius: 8}}/>
                <Input label="Email" onChangeText={text => setEmail(text)} value={email} onSubmitEditing={() => passwordRef.current.focus()}
                       placeholder="이메일" returnKeyType="next"
                />
                {/* ref를 password input으로 지정.*/}
                <Input ref={passwordRef}
                       label="Password" onChangeText={text => setPassword(text)} value={password} onSubmitEditing={() =>{} }
                       placeholder="패스워드입력" returnKeyType="done" isPassword
                />
            </Container>
        </KeyboardAwareScrollView>
    );
};

export default Login;

KeyboardAwareScrollView 컴포넌트를 로그인 화면에 적용하면, 입력 도중 다른 영역을 터치했을 때 키보드가 사라질 뿐만 아니라 포커스를 얻음 TextInput 컴포넌트의 위치에 맞춰 스크롤이 이동하는 것을 확인할 수 있다.
스크롤되는 위치를 조정하고 싶은 경우 extraScrollHeight의 값을 조절해서 원하는 위치로 스크롤되도록 설정할 수 있다.