CODEWITHSUNDEEP
react-nativereact-native-gesture-handler
wyndham007
wyndham007

Reputation: 181

React Native Touchable Icon

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,
  },

Upvotes: 1

Views: 1706

Answers (2)

Amir Doreh
Amir Doreh

Reputation: 1439

dear i will not edit your codes and i want yourself to do it , so you will also be able to debug your codes and find problems and solve them .

There is react native debug menu embedded with react native apps ! for your situation on Android ctrl(cmd) + M and on IOS ctrl(cmd) + D will open up the below popup

Debug Mode looks like this

then click on show inspector and from the menu there choose touchable then you will see this your app looking like :

touchable debug mode

now click on the part you want to check the touchable and see where is your touchable located at ! I am sure you will understand and do the rest

Upvotes: 2

Doug Watkins
Doug Watkins

Reputation: 1448

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.

Upvotes: 2

Related Questions