scrollview - TouchableOpacity as Item in ListView only reacts after TextInput has lost focus

Question

I'm working on a search component right now which consists of a TextInput and a ListView. It loads its results from an external server and fills the ListView accordingly.

There's also a TouchableOpacity which closes the search component.

Unfortunately, it takes two presses to get the onPress callback of the TouchableOpacity called – one to let the TextInput lose its focus and one to trigger the callback. But if I press the TouchableOpacity to close the search component or if I press one of the tabs of the "react-native-scrollable-tab-view" component it reacts immediately and the TextInput even keeps its focus.

So, I'm wondering if someone knows if the ListView somehow consumes the touches due to its scroll functions.

Answer 1

The ScrollView (and legacy ListView) component has a prop keyboardShouldPersistTaps which takes three options:

• 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).

Example

<ScrollView keyboardShouldPersistTaps="always">
  // Your TextInput and Button here…
</ScrollView>

I set this property to true and it works as expected. =)