@Calendee

Dismissing Keyboards in React Native Views

When a using a View in React Native, you don't have any control over the keyboard. So, if the view has an input field and the user taps away from the input field, the keyboard will remain visible. The user has no way to get rid of the keyboard.

Sample Code:

Trying to dismiss the keyboard:

Dismissing the keyboard with a ScrollView

Some people suggest replacing the View with a ScrollView as it has keyboard dismissing ability built-in. By default, tapping outside of an input on a ScrollView will automatically dismiss the keyboard. Adding keyboardDismissMode="on-drag" will also allow the keyboard to dismiss if the view is dragged. Nice!

Sample Code

Dismissing the keyboard with a ScrollView:

Teaching your View to dismiss the keyboard

However, in many cases, you don't want to or can't use a ScrollView. In these instances, you can achieve the safe effect while still using a View. You just have to tell the view to deal with taps that aren't handled by any children. The onStartShouldSetResponder and onResponderRelease View properties are needed to teach your View to handle taps that aren't handled by child components.

Sample Code

NOTE : Notice the style={ { height: '100%' } } on the new view with responders? This is necessary so that the view takes up the whole screen. Otherwise, it will only be as tall as the form and not detect any taps outside the form.

Dismissing the keyboard with a tap aware View: