Prevent the On-screen Keyboard from Covering up Text Inputs
When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on the bottom half of the screen, which can be frustrating for users. There are a few common ways to deal with this in React Native - and this video shows the following solutions:
First, you can use the built in KeyboardAvoidingView to move components around when the keyboard comes on screen. It has the advantage to being built in to React Native already - but it can be overly complicated to get this approach to work consistently across both iOS and Android.
There is also a third party library called KeyboardAwareScrollView, which will allow your entire view to scroll, and will keep the currently selected text inputs up and out of the way of the keyboard.
Instructor: [00:00] We have a text field on the bottom half of the screen, and when it's selected, the on-screen keyboard pops up and covers the text field. To make the text field automatically move up and out of the way of the keyboard, import KeyboardAvoidingView from React Native.
[00:15] Then wrap the entire screen with a KeyboardAvoidingView component. The KeyboardAvoidingView will automatically move components around on the screen in order to avoid the keyboard, but we have to specify how we want the components to move around before it will do anything.
[00:34] First, make sure it fills the entire screen by setting a flex one style prop. Then we'll replace the main container view with a scroll view to allow the view to scroll properly under the keyboard. This isn't always necessary. It depends on the styling and content of your component. It will help in this case.
[00:52] Then we have to specify a behavior for how the components will adjust when the keyboard appears on screen. The options are height, position, and padding. Each behavior acts differently. Test out how each option affects the components for your screen.
[01:07] We'll use the padding behavior here, which will adjust the components to avoid the keyboard on the screen. Also note that this may behave differently on iOS and Android, so it's important to test on both. Finally, we'll enable the avoiding view by setting the enabled prop to true.
[01:24] Now, when we reload the app and select a text input, the view moves up and out of the way, so the text input stays out from under the keyboard. The user can also scroll the scroll view up and down to access the other text field and the button.
[01:36] The keyboard avoiding scroll view can be a bit particular. It also has the ability to change the padding and spacing of your components. If we want to avoid that, we can use a module called keyboard-aware-scroll-view. Install the library with npm install save react-native-keyboard-aware-scroll-view.
[02:01] Then import the keyboard aware scroll view in the screen. Now, instead of the keyboard avoiding view, wrap the entire screen in the keyboard aware scroll view. We don't need the behavior or enabled prop for this component, but keep the flex style to be sure that the view takes up the entire screen.
[02:21] We also don't need the scroll view anymore, because the keyboard aware scroll view will put that in for us. When we run that, the view automatically scrolls up and out of the way without changing the margin or padding of any of the components. The user can still scroll up and down to see the other components on the screen.