This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Dismiss the Keyboard in React Native

    Spencer CarliSpencer Carli

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss