TouchableOpacity does not understand where I am touching

Question

I am new to React and I am trying to make a menu box with three different icons. I want the icons to be touchable, so I can perform some action depending on what icon that was pressed. The problem I have is every time i perform a touch within the menu, the action from the last icon is executed, even though its area is only the lowest third of the menu.

EDIT: My friend ran the project on an android simulator and it worked, but when I run it on IOS simulator, it does not.

export default function Menu() {

  //Need to find 3 pics for each main function
  const rating = "../assets/abc.png";
  const comment = "../assets/abc.png";
  const drawing = "../assets/abc.png";

  return (
      <View style={styles.menuBox}>
        <View style={styles.menu}> 

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('First image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Second image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Last image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>

        </View>
      </View>
  );
}

const styles = StyleSheet.create({
    //Black box
    menuBox: {
        alignSelf: "flex-end",
        height: "80%",
        width: "8%",
        borderRadius: 50,
        backgroundColor: "black",
        opacity: 0.85,
        position: "absolute",
        right: "1%"
    },
    //Area inside black box
    menu: {
        flex: 1
    },
    //Area for each icon
    iconcontainer: {
        flex: 1/3,
        justifyContent: "center",
        alignItems: "center",
    },
    //Actual icon
    icon: {
      resizeMode: "contain",
      width: 90
    }
});

Answer 1

Your sample should work, check out the sample

Answer 2

Turns out I had made several errors in my styling. Here is working code:

export default function Menu() {

  //Need to find 3 pics for each main function
  const rating = "../assets/abc.png";
  const comment = "../assets/abc.png";
  const drawing = "../assets/abc.png";

  return (
      <View style={styles.menuBox}>

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('First image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>
      
          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Second image clicked')}>
              <Image source={require(comment)} style={styles.icon}/>
          </TouchableOpacity>
        
          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Last image clicked')}>
              <Image source={require(drawing)} style={styles.icon}/>
          </TouchableOpacity>

      </View>
  );
}

const styles = StyleSheet.create({
    //Black box
    menuBox: {
        height: "80%",
        width: "8%",
        borderRadius: 50,
        backgroundColor: "black",
        opacity: 0.85,
        position: "absolute",
        right: "1%"
    },
    
    //Area for each icon
    iconcontainer: {
        flex: 1,
    },
    //Actual icon
    icon: {
      flex: 1,
      resizeMode: "contain",
      width: "100%"
    }
});