🏡 Home

React Native ScrollView Keyboard

In react native we can adjust how ScrollView behave when it wraps children that can trigger device keyboard to be shown (e.g. TextInput). The default behaviour of ScrollView is it will dismiss the keyboard when tapping outside of the focused TextInput. We can add keyboardShouldPersistTaps prop to adjust this behaviour.

The prop accept one of these values:

  • never, the default behaviour. The ScrollView will dismiss the keyboard and the children will not receive the tap.
  • always, the ScrollView will dismiss the device keyboard and its children can catch taps.
  • handled, the keyboard will not be dismissed by ScrollView, the children will catch the taps.

Reference: ScrollView keyboardShouldPersistTaps https://reactnative.dev/docs/scrollview#keyboarddismissmode