[React Native] Keyboard.dismiss 빈공간 클릭시 키보드 사라지게

React Native Keyboard.dismiss 빈공간 클릭시 키보드 사라지게

React Native에서 textInput을 사용하다 보면 keyboard가 화면에 나타나는데 이 키보드를 사리지게 하는 방법으로 Keyboard.dismiss를 사용하면 됩니다.

 

이제 이것을 어떻게 사용하냐면은 touchEvent 발생시, 즉 onPress가 생긴 경우 Keyboard.dismiss를 해주시면 됩니다.

import React from 'react';
import { View, StyleSheet, Text, Keyboard } from 'react-native';
import { height, width } from '../config/globalStyles';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import AppTextInput from '../components/TextInput/AppTextInput';

const Login = ({ navigation }) => {

    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View style={styles.container}>
                <AppTextInput
                    title='이름'
                />
            </View>
        </TouchableWithoutFeedback>
    )
}

const styles = StyleSheet.create({
    container: {
        height: height * 690,
        paddingHorizontal: width * 16,
        justifyContent: 'center',
        alignContent: 'center'
    },
})

export default Login;

이렇게 해주시면 TouchableWithoutFeedback 태그 안의 공간을 클릭시 키보드가 사라지게 됩니다.

 

코드는 Hooks functional component로 작성하였는데, 직접 만들어 사용한 component나 속성이 있어 복사하셔서 테스트 해보실 경우 에러가 발생하게 될 것입니다.