Handling the keyboard in React Native

Mobile apps differ in many ways from traditional desktop apps. One of the most notable differences is the use of virtual input elements such as the keyboard or the Assistive Touch features in iOS. Every time the user has to introduce some text, both Android and iOS opens a virtual keyboard that overlaps the content of the screen.

Here at APSL we have developed a React Native component that handles the resize of the parent ScrollView whenever the keyboard appears, and we've called it react-native-keyboard-aware-scroll-view. However, sometimes it's not enough to resize the container view to make room for the keyboard. Here you have two tips that have really helped us to manage the keyboard in React Native apps.

ScrollResponderMixin's keyboard events

Every ScrollView component can handle two very useful events to detect if the keyboard has been opened or closed:

• onKeyboardWillShow
• onKeyboardWillHide

The first one will send the keyboard event with all the information of the keyboard size, animation time, and more. See the source code here.

Programatically interact with the keyboard focused by TextInput

Sometimes you want to programatically close the keyboard while some TextInput retains its focus. TextInput has a State prop that contains three methods defined by TextInputState:

• currentlyFocusedField: Returns the ID of the currently focused text field
• focusTextInput: Focuses the specified text field
• blurTextInput: Unfocuses the specified text field

So, to dismiss an opened keyboard we would do this:

TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField())

Luckily, Facebook has wrapped this into a function called dismissKeyboard, so in the end we can do the following:

import dismissKeyboard from 'dismissKeyboard'
...
dismissKeyboard()

And a keyboard opened from a TextInput focus will be closed.