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!

Software Engineer. I create educational content focused on technology for mobile and web applications.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to build an audio player from scratch?

How to Build Tic Tac Toe with React Hooks

screenshot of the tic tac toe game

Day 68 | 100 Days Full-Stack Challenge

9 Tips to Keep in Mind to Become Better JavaScript Developer

Remote File Operations using JSch

JavaScript Buzzwords Part 2: Isomorphic JavaScript and Server Side Rendering

Building a Sentiment Analysis App with React, Flask, and Tesseract

Javascript​: My break-up and patch up of the decade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brooklin Myers

Brooklin Myers

Software Engineer. I create educational content focused on technology for mobile and web applications.

More from Medium

Shared state hook or composition

Overmind, the state management library you don’t know (yet) (but should)

Payload CMS Version 0.15.0 brings publishing, versions, performance, more

An Alternative to Next.JS? — Everything You Need to Know About RemixJS