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

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

• javascript
• react-native
• touchableopacity

2 Answers 2

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

pointerEvents={"none"}

Make the second TouchableOpacity disabled like this

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