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
ScrollView component can handle two very useful events to detect if the keyboard has been opened or closed:
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
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
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:
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.