Nested TouchableOpacity Parent onPress not working

Question

i had this issue where i'm trying to make sure the parent's onPress is triggered, but it wont

im trying to create a custom touchableOpacity component that able can be reusable, that wrap other Component so it can decide if the children can be shown or not and decide/alter what happen when the children component is pressed.

const CustomTouchable = (children, onPress) => {
   function handleOnPress = () => {
      if(validation){
         onPress();
      }
   }

   return <TouchableOpacity onPress={handleOnPress}>{children}</TouchableOpacity>
}


const MainComponent = () => {
   function onPress = () => {console.log('test')}

    <CustomTouchable onPress={onPress}>
       <TouchableOpacity style={styles.button}>
          <Text>Press Here</Text>
       </TouchableOpacity>
    </CustomTouchable>
}

but the parent onPress is not triggered, how can i trigger it?

Answer 1

This is because the touch event is received by the children and not the parent. Assign following prop to your Child Component

pointerEvents={"none"}