React Native Touchable is disabling ScrollView

Question

I'm new to React Native, so am probably asking something very obvious, but please help.

I have a view wrapped in a touchable, so that the whole area responds to tapping. Then have a ScrollView nested inside the view. The overall structure is something like this:

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>     <View>         <ScrollView>             <Text>Hello, here is a very long text that needs scrolling.</Text>         <ScrollView>     </View> </TouchableWithoutFeedback> 

When this compiles and runs, the tapping is detected, but the scroll view doesn't scroll at all. I made the above code short and simple, but each component has the proper styling and I can see everything rendering fine and the long text is cutoff at the bottom of the ScrollView. Please help.

Thank you!

Answer 1

This is what worked for me:

<TouchableWithoutFeedback onPress={...}>   <View>     <ScrollView>       <View onStartShouldSetResponder={() => true}>         // Scrollable content       </View>     </ScrollView>   </View> </TouchableWithoutFeedback> 

The onStartShouldSetResponder prop stops the touch event propagation towards the TouchableWithoutFeedback element.

Answer 2

I'm using this structure it's working for me:  <TouchableWithoutFeedback onPress={() => {}}>     {other content}        <View onStartShouldSetResponder={() => true}>         <ScrollView>             {scrollable content}         </ScrollView>     </View> </TouchableWithoutFeedback>