14

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.

Bhumit Mehta
  • 16,278
  • 11
  • 50
  • 64
webwelten
  • 1,567
  • 11
  • 18

1 Answers1

34

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

Beau Smith
  • 33,433
  • 13
  • 94
  • 101
webwelten
  • 1,567
  • 11
  • 18
  • Doesn't work. Whenever a text input and a button is inside a scrollView - after entering values in text input you need to press the button twice to make it work. One for losing focus on the textInput and second one for the button to work. Any other solutions? – Abhishek Nalin Aug 12 '16 at 05:58
  • 2
    Sorry. Works with scrollView also. I was applying this property in the scrollView of the child component. When I applied to the parent component it started working. – Abhishek Nalin Aug 12 '16 at 10:41