Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Dismiss the Keyboard in React Native

    react-nativeReact Native

    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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.

    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.

    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.

    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.