Dismiss the Keyboard in React Native

Spencer Carli
InstructorSpencer Carli
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

egghead
egghead
~ 4 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today