Handling keyboard with react-native ScrollView

Keyboard handling is different ScrollView than any other view in React Native. For example, if we have one TextInput inside a View in React Native, clicking outside the TextInput will not dismiss the Keyboard. For that, we need to use the Keyboard.dismiss() method to hide the keyboard programmatically.

But, if you are using a ScrollView, it will automatically dismiss the keyboard if you tap outside a TextInput.

ScrollView component provides two different properties to handle keyboard tap :

keyboardDismissMode :

Based on this property, the keyboard is dismissed on drag. It is an enum and it takes any of the below properties :

  • ‘none’, ‘on-drag’, ‘interective’

iOS and Android :

  • ‘none’ : This is the default property. It doesn’t dismiss the keyboard on drag.
  • ‘on-drag’ : The keyboard will dismiss when the drag starts

Only for iOS :

  • ‘interactive’ : It dismisses the keyboard interactively on iOS. On Android, it works as like none.

keyboardShouldPersistTaps :

This property is to determine the keyboard should visible after a tap or not. It is an enum value and accepts the following types :

always, never, handled

  • always : It will not dismiss the keyboard automatically. Only the children of the scrollview can detect taps, not the scrollview.
  • handled: The keyboard will not dismiss automatically if the tap is handled by the children of the scrollview.
  • never: This is the default option. It will dismiss the keyboard if you tap on outside of the focused text input. Note that children will not receive the tap event for this option

Where is the color and why codevscolor ?

Long story short, I love paintings and I paint on weekends. We(me and my wife) have one Youtube channel. Below is a video that I did recently. If you love this please do subscribe to support us 😊