Soy nuevo en React y estoy tratando de hacer un cuadro de menú con tres íconos diferentes. Quiero que los íconos se puedan tocar, para poder realizar alguna acción según el ícono que se presionó. El problema que tengo es que cada vez que realizo un toque dentro del menú, se ejecuta la acción del último ícono, aunque su área es solo el tercio inferior del menú.

EDITAR: Mi amigo ejecutó el proyecto en un simulador de Android y funcionó, pero cuando lo ejecuto en el simulador de IOS, no funciona.

 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 } });