React Native Touchable Icon

Question

I want to implement an Menu Icon from MaterialIcon in my Header and when I tap this Icon I want to open a menu. The problem is, if I add margin or something else to this Icon to position the icon, the Touchable onPress is not working properly. First I had absolute Positioning with zIndex and the onPress was not triggered every time. Let's say of tapping 100 times the onPress was trigged for 3 times. I have figured out the same behaviour with relative positioning and margin. I also tried to implement Touchables from react-native-gestures or from react-native. In the moment I remove margin the Touchable works correctly. The onPress get's triggered every time I press this icon. Very curious. What's wrong? Do someone know this issue?

This is my Code:

<StatusBar barStyle="light-content" />
<ScreenCmpt style={styles.container}>
   <View style={styles.headerContainer}>
     <TouchableOpacity onPress={() => console.log("test")}>
       <View style={styles.menuContainer}>
          <MaterialIcons style={styles.menu} name="menu" size={30} />
       </View>
     </TouchableOpacity>
    ....

headerContainer: {
    flexDirection: "row",
    alignSelf: "center",
  },
  header: {
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
    fontFamily: "CinzelDecorative_400Regular",
    marginBottom: 20,
  },
  menuContainer: {
    marginLeft: height * -0.13,
  },
  menu: {
    color: colors.primary,
    alignSelf: "center",
    // marginLeft: height * -0.13,
  },

Answer 1

Amir has some good debugging information there, and it is worth knowing and using in the future. That being said, just because you can see where your touchable locations are doesn't mean you'll understand what is wrong.

I personally do not 'know' what is wrong, but my guess is by adding a margin, you are moving your icon out of the touchable container. I would recommend adding your positioning styles to the TouchableOpacity instead of your icon. This should move the whole button over, instead of just its contents since it is possible to move the contents outside of a parent container.