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