Reputation: 23
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
}
});
Upvotes: 0
Views: 48
Reputation: 23
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%"
}
});
Upvotes: 0