React Native : 빈 화면 터치시 Keyboard 숨기기

 

React Native를 개발하던 중에 TextInput을 활용하여 Keyboard로 유저의 입력을 받는 부분을 구현하였습니다.

 

그런데, Keyboard를 띄우고 난 뒤에 빈 화면을 눌렀을때 Keyboard를 숨기게 하는 방법을 몰라서 조금 검색을 해보았는데요,

 

이에 대해서 오늘은 유저가 빈 화면을 터치시 Keyboard를 숨기는 방법에 대해 간단히 알아보도록 하겠습니다.

 

 

TouchableWidhtoutFeedback

 

해결법은 TouchableWithoutFeedback 이라는 React Native에서 제공하는 Component를 사용하면 쉽게 해결할 수 있습니다.

 

TouchableWithoutFeedback · React Native

 

React Native 에서는 TouchableHighlight, TouchableOpacity, TouchableWidthoutFeedback 등의 유저의 클릭과 같은 화면 접촉을 감지하고 이벤트를 등록할 수 있는 컴포넌트를 제공하는데요, 그중 TouchableWidthoutFeedback 은 유저의 클릭은 감지하지만 화면에 아무런 반응이 없는 것처럼 보이게 할 때 주로 사용하는 컴포넌트입니다.

 

즉 우리가 해야할 일은,  빈 화면을 클릭했을 때 단지 Keyboard만 사라지게 하면 되기 때문에 TouchableWidthoutFeedBack을 사용하면 됩니다. 

 

 

해결방법

 

1) 먼저 화면 최상단에 TouchableWidthoutFeedBack을 통해 모든 컴포넌트를 위치시킵니다.

 

2) TouchableWidthoutFeedBack의 onPress 이벤트가 발생했을 때, Keyboard.dismiss() 함수를 호출합니다. (빈 화면 터치시)

 

예제 코드를 살펴보면 아래와 같습니다.

 

import { Keyboard, SafeAreaView, TouchableWithoutFeedback } from 'react-native';

const keyboardTestScreen = () => {
    ...
    ...
    return (
        <SafeAreaView style={styles.container}>
          <TouchableWithoutFeedback onPress={Keyboard.dismiss}> // 빈화면 터치시 키보드 숨기기
            <View style={styles.contentContainer}>
              <TextInput ... />
              ...
              ...
            </View>
          </TouchableWithoutFeedback>
        </SafeAreaView>
    )
});

 

 

 

테스트 화면 

 

아래 영상은 제가 만들고 있는 프로젝트 중 앞서 설명드린 키보드 숨기는 부분을 적용한 내용을 담은 영상입니다.

 

 

 

 

마무리

 

오늘은 간단하게 React Native 빈 화면 클릭 시 키보드를 가리는 방법에 대해 알아보았습니다.

 

앞서 설명드린 Touchable 말고도 React Native 0.63 버전 이후 도입된 Pressable이라는 컴포넌트를 좀 더 권장한다고 하니, 한번 나중에 공부해 보시길 추천드립니다.

 

최근 React Native 공부를 다시 시작하고 있어서 앞으로도 관련된 포스팅을 정리해 나가 보도록 하겠습니다.

 

감사합니다.

 

 

참고

 

https://velog.io/@beanlove97/Pressable-vs.-Touchable-in-React-Native