Search code examples
react-nativetouchableopacity

How do I disable the touch of a child element in Touchable Component

I have following code

<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
        <View style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>

        </View>
    </TouchableOpacity>
</BlurView>

Which result in following

enter image description here

I have TouchableOpacity covering the BlurView area because I want the full blur view screen to respond to touch event and hide it. except the view in the center. It will contain the video and must not receive the touch event of its parent component and it must have touch event of its own.

How do I do this? Or I am willing to know if there are alternatives to achieve the similar result.

Solution

  • 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?