Responding to the Keyboard With React Native

Creating dynamic layouts that adapt to the on-screen keyboard.

One of the best things in React Native is the ability to write the native interface with Javascript that feels way better than any hybrid solution out there. With your UI represented as a set of UIViews, UITextInputs are not only a great way to make your app interactive but also to make your users feel at home.

In almost all typical applications, we have forms. We use them to interact with our users by getting the data they have provided. With forms, comes our good friend — the state-of-art iOS keyboard. In this short article, we are going to show you how we’ve managed to make your interface play well with different keyboard states by utilising react-native-keyboardevents, making it super easy to replicate that functionality between different pages.

Who wants letters in their email address anyway?

Step 1

The events

Before we start thinking about adjusting our UI to our keyboard, we first need to somehow get its state. We ideally want to know whether the keyboard is open or not, and what frame size the keyboard is occupying on the screen. In order to achieve that, we are going to add one small dependency to our project — the react-native-keyboardevents package.

Once you have successfully integrated the above package into your project, take a look at the below code sample from its repository:

[gist]ab4981fc7c10ba2b31de[/gist]

Yeah, I know higher order components for the win, but let’s stick with a pattern everyone knows. I assume everyone familiar with the new ES6 approach will be able to rewrite that in a couple of seconds!

This snippet will update our state whenever the keyboard event occurs, giving us all the information we need about the keyboard height and its state.

Step 2

The component

We’ve already nailed our keyboard events, so now let’s start on simple implementation by taking a look at the simple form we might have in our app.

[gist]96ad065f99c6929fdc38[/gist]

The above Page (the application is an Este.js implementation, which I strongly recommend you have a look at) simply displays the LoginForm component that contains some inputs. Whenever they are active, the padding will change and will move the LoginForm to the top of the screen making the last input still visible (previously it had been overlapped by our keyboard).

Step 3

The animations

As you may have noticed, the above implementation will cause our UI to jump from the previous to the new state in quite an ugly way. We all love animations and it’s something iOS is awesome at. So let’s take the simplest solution possible and utilise the LayoutAnimation engine.

Try adding the following:

[gist]7a860fe69f842572effb[/gist]

You now get beautiful animations of your choice whenever the keyboard state changes.

Here’s the final effect:

That’s a simple way to add some pizzazz to your apps and give your lower inputs the loving they deserve!