DismissKeyboardView 로 사용성 좋은 키보드 입력 구성하기

문제

리액트 네이티브에서 자체적으로 제공하는 TextInput 을 사용하다보면 키보드 사용성 때문에 몇가지 불편한 점이 있다.

• 다음 입력 영역을 터치하고 싶은데, 스크롤이 생기지 않아 내려가지 않는다.
• 내가 선택한 TextInput 에 맞게 스크롤이 내려가지 않는다.
• 키보드를 없애고 싶어 빈공간을 클릭해도 키보드가 사라지지 않는다.

위와 같은 사용성을 개선하기 위해 DismissKeyboardView 라는 커스텀 컴포넌트를 사용할 수 있다.

해결 방법

• 외부 영역을 TouchableWithoutFeedback 으로 구성해주고, 클릭 시 react-native 의 Keyboard API 를 통해 키보드를 내려준다.
  • 단, 이게 실제 버튼은 아니므로, 접근성을 위해 스크린 리더기가 헷갈리지 않도록 acessible 속성은 false 로 바꾸어준다.

해결

의존성 설치하기

# 의존성 설치 필요
npm i react-native-keyboard-aware-scroll-view

의존성 설치 후에는 npm run android 를 한번 더 실행해주자.

코드 작성하기

import React from "react";
import {
  TouchableWithoutFeedback,
  Keyboard,
  StyleProp,
  ViewStyle,
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

// React.FC 는 리액트의 함수형 컴포넌트 타입이다.
const DismissKeyboardView: React.FC<{
  style?: StyleProp<ViewStyle>, // 리액트 네이티브 스타일이 온다는 뜻이다. ViewStyle 은 말그대로 View 컴포넌트의 스타일을 말한다.
  children: React.ReactNode,
}> = ({ children, ...props }) => (
  <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <KeyboardAwareScrollView {...props} style={props.style}>
      {children}
    </KeyboardAwareScrollView>
  </TouchableWithoutFeedback>
);

export default DismissKeyboardView;

커스텀 컴포넌트인 DismissKeyboardView 로 화면을 감싸면,

• 내가 선택한 TextInput 에 스크롤이 맞춰진다.
• 배경을 클릭했을 때 화면이 내려간다.
• 키보드가 올라온 상태로 스크롤하여 다른 입력창에 포커스를 줄 수 있다.

타입 작성하기

declare module "react-native-keyboard-aware-scrollview" {
  import * as React from "react";
  import { Constructor, ViewProps } from "react-native";
  class KeyboardAwareScrollViewComponent extends React.Component<ViewProps> {}
  const KeyboardAwareScrollViewBase: KeyboardAwareScrollViewComponent &
    Constructor<any>;
  class KeyboardAwareScrollView extends KeyboardAwareScrollViewComponent {}
  export { KeyboardAwareScrollView };
}

루트폴더 /types/ 아래에 react-native-keyboard-aware-scrollview.d.ts 라는 이름으로 위치시켜주자.

커스텀 API 를 사용하지 않고, 공식 API 를 이용해 해결하는 방법

KeyboardAvoidingView 에 behavior 를 position 으로 주면, 해당 입력 창에 맞춰 스크롤이 이동되어 포커싱되는 기능이 있다. 이를 이용해도 어느정도 문제가 해결된다.

behavior 중 padding, height 와 같은 옵션이 더 있는데, 이는 IOS 에서는 잘 먹히지만, 안드로이드에서는 잘 먹히지 않는다. Platform API 를 통해 안드로이드인지 IOS 인지 판단하여 분기처리를 진행할 수도 있다.

레퍼런스

https://www.inflearn.com/course/%EB%B0%B0%EB%8B%AC%EC%95%B1-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C