[React Native] 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 <code>KeyboardAvoidingView</code> 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 <code>KeyboardAwareScrollView</code>, 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.

Install:

Use: