CODEWITHSUNDEEP
react-native
samcorcos
samcorcos

Reputation: 2478

Allow tap/press on item while focused on TextInput in React Native

I have a TextInput that functions as a search/filter on some results. The results are displayed in a ScrollView.

The issue I have is that while the state is focus on the TextInput, the user must make two taps in order select the item (which is a TouchableOpacity) in the ScrollView.

The first tap dismisses the keyboard and blur, and the second tap selects the item. This is not the ideal user experience for my particular situation... and I'm not sure if there's a way around it.

Is there a way to make an item selectable while a TextInput is in a focus state to avoid a two-tap process for selecting an item?

Upvotes: 5

Views: 1629

Answers (1)

Artal
Artal

Reputation: 9143

You can control the behavior of the ScrollView regarding taps and keyboard dismissal via the keyboardShouldPersistTaps prop of the ScrollView.

The most suitable option for the behavior that you are describing is either always or handled. Both of these options will allow the ScrollView's children to receive the touches without dismissing the keyboard automatically, the difference is that the handled option will let the ScrollView receive the touch in case it wasn't caught by any other touchable component and dismiss the keyboard in that case.

Upvotes: 8

Related Questions