How do I disable the touch of a child element in Touchable Component
You can leverage pointerEvents:
<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
<View pointerEvents="none" style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>
</View>
</TouchableOpacity>
</BlurView>
Nested Touchable seems to work in my case.
<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
<TouchableHighlight style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>
<View></View>
</TouchableHighlight>
</TouchableOpacity>
</BlurView>
When I click on child TouchableHighlight
it seems to receive the child touch event and ignore parent. This seems to work for now, not sure if it is the good option, will be open to hear for better options.
I also found this
How can I propagate touch event in nested Touchable in React Native?
https://facebook.github.io/react-native/docs/gesture-responder-system
React Native onStartShouldSetResponder and onResponderRelease?
Nested touchables were not working for me because I also had buttons in the floating view. On the background overlay view (BlurView in this case), add the following props:
onStartShouldSetResponder={(event) => {
return event.nativeEvent.touches.length == 1;
}}
onResponderRelease={(event) => {
if (event.target == event.currentTarget) {
this.props.onCancel()
}
}}
This works because event.currentTarget
is the view that has the prop onResponderRelease
and target
is the view that the touch was released upon.
React Native Gesture Responder System documentation: https://facebook.github.io/react-native/docs/gesture-responder-system