Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Ensure Text Fields Don't Get Covered by the On Screen Keyboard

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    If a Text Input is on the bottom half of the screen, then it will get covered by the on screen keyboard when a user selects that input. We’ll show two ways to automatically avoid this by using KeyboardAvoidingView or keyboard-aware-scroll-view

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: On the add review modal screen, we'll add a review form by importing text input. Add some internal state to hold the review information. Then add an input for the reviewer's name, a large area where they can select a star rating to give to the restaurant, a multi-line input for a text review, and a button to submit the review.

    Finish it by adding some styles for each of those form components. When we load that, it looks like everything works just fine. However, unlike the Web and unlike the simulator, a physical device will have an on-screen keyboard that we have to worry about.

    Let's reload the app and turn on the on-screen keyboard. Now, when we go to leave a review, you can type our name and select a rating, but we can't get to the next text field or submit button because they're hidden behind the on-screen keyboard.

    Let's install React Native Keyboard Aware ScrollView and import that into the add review screen. The Keyboard Aware ScrollView acts just like a ScrollView. We can wrap our entire view with it.

    When we reload and go to add a review now, we can enter our name. The first change is that if we tap outside the text input box now, the keyboard is dismissed. We can still enter our rating.

    Now, when we select a text box that would normally be hidden by the keyboard, the entire ScrollView automatically moves up and out of the way of the keyboard. You can also scroll up and down to see the entire rest of the form, including the submit button.