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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!