[React Native TIL] 키보드가 input 창을 가리는 경우/ react-native-keyboard-aware-scroll-view라이브러리 사용해서 해결

React Native 프로젝트 당시 두개의 문제를 직면했다.
1. 위의 사진처럼 키보드가 input 창을 가린다.
2. 화면의 크기에 따라 구성한 화면이 너무 길어서 화면을 넘어가는 현상이 생긴다.

이러한 이슈를 해결하기 위해 react-native-keyboard-aware-scroll-view라이브러리에서 제공하는 keyboard-aware-scrollview를 이용해서 현재 문제를 해결하였다. https://github.com/APSL/react-native-keyboard-aware-scroll-view

설치

$ npm i react-native-keyboard-aware-scroll-view --save

코드 추가

KeyboardAwareScrollView를 react-native-keyboard-aware-scroll-view에서 import하고 전체를 < KeyboardAwareScrollView >로 감싸주면 된다.

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
(...)
 
  return (
        <KeyboardAwareScrollView>
            <Container insets={insets}>
				(...)
            </Container>
        </KeyboardAwareScrollView>
    );

그럼 아래와 같이 잘 해결되는 것을 볼 수 있다.

ios경우

아이폰의 경우, 아래의 사진처럼 하단에 배경색이 달라진 것을 볼 수 있다. 이것은 KeyboardAwareScrollView 자체가 화면 전체를 차지하지 않기에 일어나는 이슈이다.

이 이슈는 navigate 컴포넌트의 cardStyle을 적용해서 해결할 수 있다.

import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Signin, Signup } from '../screens';
import { MaterialIcons } from '@expo/vector-icons';

const Stack = createStackNavigator();

const Auth = () => {
    const theme = useContext(ThemeContext);
    return (
        <Stack.Navigator
            screenOptions={{
                cardStyle: { backgroundColor: theme.background },
            }}
        >
			(...)
        </Stack.Navigator>
    );
};

export default Auth;

input 컴포넌트와 키보드가 너무 가까이 붙는 현상

ExtraScrollHeight를 사용해서 이러한 현상을 해결할 수 있다. ios만 되는 것 같다.

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
(...)
     return (
        <KeyboardAwareScrollView extraScrollHeight={20}>
            <Container>
				(...)
            </Container>
        </KeyboardAwareScrollView>
    );