[RN/Short] React Native 특정 영역 선택 시 키보드 닫기 : Keyboard.dismiss 활용

해당 글에서는 React-Native 환경에서 텍스트 입력 후 ‘확인’ 버튼을 눌러서 키보드 닫는 불편함을 피하기 위해 특정 영역을 선택하였을 때, 키보드를 닫는 방법에 대해 알아봅니다.

 

1) 특정 영역 선택시 키보드 닫기 : TouchableWithoutFeedback + Keyboard.dismiss 활용

---

 

💡특정 영역 선택시 키보드 닫기 : TouchableWithoutFeedback + Keyboard.dismiss 활용

- 사용자의 편의성을 위해 키보드로 텍스트를 입력하는 도중에 ‘확인’ 버튼을 누르는 것이 아닌 작성이 완료되면, 특정 영역을 선택하면 키보드가 닫히는 액션을 구현하기 위해서 이를 활용합니다.
- 이를 위해서 TouchableWithoutFeedback 태그내에 onPress 이벤트로 Keyboard.dismiss 액션을 주어서 영역을 선택하면 키보드가 닫히는 액션을 구성합니다.

 

1. TouchableWithoutFeedback

---

💡TouchableWithoutFeedback

- React Native에서 제공하는 컴포넌트로, 터치 이벤트를 처리할 수 있지만 시각적인 피드백을 제공하지 않습니다.
- 주로 터치 이벤트만 필요하고 시각적 변화가 필요 없는 경우에 사용됩니다.

TouchableWithoutFeedback · React Native

 

2. Keyboard

---

💡Keyboard

- React Native의 API 모듈로, 키보드와 관련된 다양한 기능을 제공합니다.

Keyboard · React Native

 

메서드	설명
Keyboard.dismiss()	현재 활성화된 키보드를 닫습니다.
Keyboard.addListener(eventName, callback)	키보드 이벤트에 대한 리스너를 추가합니다.
Keyboard.removeListener(eventName, callback)	등록된 키보드 이벤트 리스너를 제거합니다.
Keyboard.isVisible()	키보드가 현재 보이는지 여부를 확인합니다.

 

3. TouchableWithoutFeedback + Keyboard 활용 예시

---

💡 TouchableWithoutFeedback + Keyboard

- TouchableWithoutFeedback 태그에 Keyboard.dismiss를 통해서 특정 영역을 선택하였을 때 키보드가 닫히도록 구현하였습니다.
- 아래의 예시에서는 TextInput 내에서 작성하던 키보드를 TouchableWithoutFeedback 태그 영역을 선택하면 키보드가 닫히도록 구현이 되었습니다.

import React, { useEffect } from "react"
import { Keyboard, Text, TextInput, TouchableWithoutFeedback, View } from "react-native"

const TestScreen = ({ navigation, route }) => {
    useEffect(() => {

    }, []);
    
    return (
        <View>
            <View style={{ backgroundColor: "skyblue", marginTop: 20, flexDirection: "column" }}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <View style={{ height: 200 }}>
                        <Text>해당 영역 안을 터치하면 키보드가 닫힙니다.</Text>
                    </View>
                </TouchableWithoutFeedback>

            </View>
            <View style={{ flexDirection: "row" }}>
                <Text style={{ marginRight: 40 }}>텍스트 입력</Text>
                <TextInput style={{ width: 200, height: 40, borderWidth: 1 }} />
            </View>
        </View>
    )

}
export default TestScreen

 
 

4. 결과화면

---

💡결과화면

- background로 blueSky로 지정한 영역을 선택하였을때 키보드가 닫힘을 확인하였습니다.

 
 
 
오늘도 감사합니다. 😀