Ensure Text Fields Don't Get Covered by the On Screen Keyboard
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
Instructor: [00:00] 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.
[00:35] 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.
[00:53] 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.
[01:13] 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.
[01:36] 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.
[01:51] 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.