In this lesson you will learn how create a re-usable component that gives the user the ability to dismiss the keyboard whenever they tap outside of a TextInput. To accomplish this we'll take a look at the `TouchableWithoutFeedback` component and the `Keyboard` API.

https://app.egghead.io/api/v1/lessons/react-native-dismiss-the-keyboard-in-react-native/subtitles

Dismiss the Keyboard in React Native

Instructor: [00:00] Here, we have an application with two text inputs. The first one is just using the standard keyboard. The second one is using a numeric keyboard.

[00:08] When we're using a numeric keyboard, there's no way for us to actually close this keyboard like there is on the standard keyboard using the return key.

[00:15] Now, to give the user the ability to close the keyboard, regardless of what keyboard type they're using, we're going to first import two packages. The first, being touchable without feedback. The second, being keyboard. Both of those are from the react-native module.

[00:29] We're then going to create a new component called dismiss keyboard, and this component is going to take one prop and that prop's going to be children. We'll then use our touchable without feedback and just pass the children as a child to it.

[00:44] Then, as a prop two touchable without feedback, we're going to add a non-press. When that is pressed, we'll call the keyboard.dismiss function. Now, to use the dismiss keyboard component, we'll just go ahead and actually wrap our application in it.

[00:58] Regardless of which keyboard the user is using, they can click anywhere on the screen other than a text input, and actually go ahead and close that keyboard.

Dismiss the Keyboard in React Native

Share this video with your friends