react-nativeviewtouchablewithoutfeedback

How to avoid onPress function works inside the inner Views in React-Native

I want to avoid the onPress={() => onRequestClose()} function working inside the inner View in my react-native project.

While user click on the screen the (whatever the area) onPress={() => onRequestClose()} works, to avoid that I use View inside the 1st TouchableWithoutFeedback and inside the View component I added another TouchableWithoutFeedback. But this is not working.

I'm struggling to find the solution, Is there any method to resolve this matter.

My code as follows

<View style={styles.videoOverlayWrapper}>
    <TouchableWithoutFeedback onPress={() => onRequestClose()} style={{width: '100%', height: '100%'}}>
    <View><TouchableWithoutFeedback onPress={()=>{}}>{props.children}</TouchableWithoutFeedback></View>
    </TouchableWithoutFeedback>
</View>

enter image description here

Solution

  • you can pass null in any onPress, as onPress={() => null} or onPress={null}

    <View style={styles.videoOverlayWrapper}>
    <TouchableWithoutFeedback onPress={() => null} style={{width: '100%', height: '100%'}}>
</View>