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

Question

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

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.

https://stackoverflow.com/questions/39720039/can-i-disable-a-view-component-in-react-native — Rocky, Dec 18 '19 at 03:24
`pointerEvents='box-none'' - The View is never the target of touch events but it's subviews can be, for further details https://facebook.github.io/react-native/docs/view — Rocky, Dec 18 '19 at 03:30
Tried and still does not work, I am thinking If I can detect which view was touched wether parent or child then I can have a solution. — Ibrahim Azhar Armar, Dec 18 '19 at 03:34

score 8 · Answer 1 · answered Dec 18 '19 at 03:26

8

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>

answered Dec 18 '19 at 03:26

Umair Sarfraz

5,284
4
22
38

2

Sadly not working. It still execute the parent on touch – Ibrahim Azhar Armar Dec 18 '19 at 03:28
1

It will execute the parent on touch. Your question says you want to exclude the `View` from receiving the touch event `I want the full blur view screen to respond to touch event and hide it. except the view in the center.` – Umair Sarfraz Dec 18 '19 at 03:29
pointerEvents is not disabling the touch when I click on center view. – Ibrahim Azhar Armar Dec 18 '19 at 03:32
1

Worked fine for me. Simple and answered the original question. – Augusto Samamé Barrientos Apr 06 '20 at 00:21

Ibrahim Azhar Armar · Accepted Answer · 2019-12-18T04:32:24.937

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?

score 3 · Answer 3 · answered Feb 16 '20 at 23:30

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

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

3 Answers3