How to animate react-native inputs to avoid covering them with the keyboard

My lumpy thumbs aside, it can be frustrating typing on mobile devices. Especially when the text input is low enough that the native keyboard covers what you’re typing. One way to get around this is by animating the input upwards above the keyboard so the text input remains visible.

Here’s what it looks like

If you want to try this out yourself, I recommend that you use expo-cli to scaffold a new react-native app.

If you don’t already have it use npm install -g expo-cli
then run expo init example-project-name and select the blank template option

Here’s the code:

If you’d like to play with the example yourself I deployed a web version of the using netlify. it’s designed for mobile, so please view it using the mobile device mode on your browser (otherwise it looks like 💩) since I had to fake a native keyboard on web. Here’s how to use device mode on chrome.

You can also check out the github repository and run it locally using your favourite simulator.

Hope this helps!