React Native: Keyboard dismiss when changing focus in ScrollView

Question

In my React Native 0.22 iOS app, I have a ScrollView with multiple TextInput element in it.

I noticed that when I change focus from one TextInput to another by tapping on the next TextInput, the keyboard will dismiss and the next TextInput won't get focused immediately. It only get focus on the second time I tap on it (and then keyboard comes back again, really bad experience).

This behavior only happen on TextInput in ScrollView, but not View. I am wondering if there's any way to work around it?

Thank you!

Ceremonial

Add keyboardShouldPersistTaps={true} to ScrollView. – Universalist

this should be the correct answer: https://mcmap.net/q/848291/-react-native-keyboard-dismiss-when-changing-focus-in-scrollview – Salesclerk

Answer 1

Just provide keyboardShouldPersistTaps="always" prop to your scrollview.

From the docs -

• '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.
• 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
• 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). false, deprecated, use 'never' instead true, deprecated, use 'always' instead

Docs: https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps

Brierroot

Answer 2

keyboardShouldPersistTaps={true} deprecated

false, deprecated, use 'never' instead

true, deprecated, use 'always' instead

Anthotaxy

Answer 3

Just add the following to your scrollview:

keyboardShouldPersistTaps='handled'

This makes the scrollview to hide the keyboard if no editable control is focused.

Blastoff

Answer 4

RN 40+

ScrollView

keyboardShouldPersistTaps :

Determines when the keyboard should stay visible after a tap.

keyboardDismissMode

Determines whether the keyboard gets dismissed in response to a drag

<ScrollView keyboardShouldPersistTaps={true} keyboardDismissMode="on-drag">
    <TextInput>
</ScrollView>

https://github.com/facebook/react-native/issues/8234

Anemo