Navigate back to the homepage

How to dismiss keyboard in react native

Infinitbility
React Native
August 7th, 2021 · 1 min read
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…

1import { Keyboard } from 'react-native'
2
3Keyboard.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.

1import {TouchableWithoutFeedback, View, TextInput, Keyboard} from 'react-native'
2
3<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
4 <View style={{flex: 1}}>
5 <TextInput keyboardType='numeric'/>
6 </View>
7</TouchableWithoutFeedback>

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

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

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to use background image in react native

How to use background image in react native

React Native ImageBackground Example

August 6th, 2021 · 1 min read
How to use br tag in react native

How to use br tag in react native

React Native br tag example

August 6th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]