Today’s React Native Tip: Keyboard issues in ScrollView

Today’s React Native Tip: Keyboard issues in ScrollView

Photo by google...

In this post I am going to illustrate the two most useful properties that I have used to handle the native keyboard that is displayed while using TextInput.

When you use TextInput to enter text the keyboard pops open and occupies quite a bit of space on the screen.

While using TextInput inside a scrollable page (ScrollView) there are a few issues you will run into with the keyboard being in focus. Common use-cases are forms, messaging applications, free text boxes, etc.. where you may use a TextInput component inside a ScrollView.

Problem 1: Button needs to be tapped twice

When the keyboard is up, tapping anywhere else on the page will require you to do it twice. The first time you tap anywhere outside the TextInput, it dismisses the keyboard. Once the keyboard is dismissed the second tap enables the action.

This can be seen in the example below.

Button needs to be pressed twice when keyboard is in focus

Fix: keyboardShouldPersistTaps

The keyboardShouldPersistTaps property can be set inside the ScrollView.

This fixes the double tap issue and ensures that the keyboard doesn’t come in your way of tapping elsewhere on the screen.

<ScrollView keyboardShouldPersistTaps='always'><TextInput
     style={styles.textContainer}
     placeholder={'Add Your Text Here'}
     textAlignVertical={'top'}
     multiline={true}
     onChangeText={(text) => 
     this.setState({addNoteText: text})}
     value={this.state.addNoteText} 
     autoCorrect={true} /></ScrollView>

The simulator below shows how it works after the fix:

No more double taps

In the above example, the keyboardShouldPersistTaps is set to always. It ensures that the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

The property can also be set to other values, depending on the use-case of your app:

• 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.
• 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).

Problem 2: Keyboard does not dismiss while scrolling through the page.

Another common issue I have run into is the keyboard would be up while scrolling through a page, unless we tap outside the TextInput and dismiss it.

Tapping and dismissing it is not the ideal solution for a seamless experience.

Luckily, React Native team has a fix for this.

Fix: keyboardDismissMode

The keyboardDismissMode property can be set inside the ScrollView.

Setting it to on-drag, ensures that the keyboard is dismissed when a drag begins. The simulator below shows this property being used.

<ScrollView keyboardDismissMode='on-drag'><TextInput
     style={styles.textContainer}
     placeholder={'Add Your Text Here'}
     textAlignVertical={'top'}
     multiline={true}
     onChangeText={(text) => 
     this.setState({addNoteText: text})}
     value={this.state.addNoteText} 
     autoCorrect={true} /></ScrollView>

Dismiss keyboard on drag.

For iOS devices this property can be set to interactive. It ensures the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal.

I am Sanjay Vaghasiya an Author, Speaker, and founder of this blog, Inc.