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

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.

Solution

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