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, clicking 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.
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 it working well, after the fix with one tap, when the keyboard is up.
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 ScrollView 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, the 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 and code 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>
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.
That’s all for today folks. Hope you found these tips useful. For more tutorials on React Native follow me on twitter @AdhithiRavi and also visit my blog space here at www.adhithiravichandran.com