How to dismiss keyboard in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This article will help you to dismiss keyboard programatically in react native, Many times we want to remove or exit keyboard on certain event like On submit, end of textinput.

React Native provide Keyboard module to manage keyboard event, where you can track when keyboard open, close or also programatically close keyboard.

For dismiss keyboard, React Native Keyboard module have dismiss() method, when you call Keyboard.dismiss() on anny event or if keyboard active then it will close keyboard.

Here, i will share example of calling Keyboard.dismiss(). it will remove focus also…

import { Keyboard } from 'react-native'

Keyboard.dismiss()

well you are want hide keyboard when user click other place of screen, in this case react native provide TouchableWithoutFeedback module where you can use for dismiss keyboard like below example.

import {TouchableWithoutFeedback, View, TextInput, Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

You can now use ScrollView with keyboardShouldPersistTaps='handled' to only dismiss the keyboard when the tap is not handled by the children

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

Thanks for Reading…