Even though this document (https://facebook.github.io/react-native/docs/gesture-responder-system.html) states, that touch events are passed down to the children and are only consumed by a parent, if the child doesn't react on the event, I face the issue, that a TouchableOpacity nested inside another TouchableOpacity doesn't react properly on touches.
My structure is like follows
<ScrollView>
<TouchableOpacity onPress={() => console.log('This is printed always')}>
<View>
<Text>I can click here</Text>
<TouchableOpacity onPress={() => console.log('This is printed never')}>
<Text>I can click here but the outer onPress is called instead of the inner one</text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</ScrollView>
The same happens for Buttons inside TouchableOpacitys: Clicking the Buttons calls the onPress method of the parent TouchableOpacity
Am I overseeing something?
Change import of Touchable opacity from
import { TouchableOpacity } from 'react-native-gesture-handler';
To the following and it will now all be fine!
import { TouchableOpacity } from 'react-native';