I am currently developing a component that displays various icons for the user to choose colors. The component consists of a <View> containing a flatlist with the following code:
class Color extends Component {
icons_config = {name: "square-full", size: 80, color: "black"}
show_hide_ = false;
options_array = [
{option_icon: <FontAwesome5 name = {this.icons_config.name} size = {this.icons_config.size} color = "red"/>, key: "red"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "blue"/>, key: "blue"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "green"/>, key: "green"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "yellow"/>, key: "yellow"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "purple"/>, key: "purple"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "black"/>, key: "rgba(0,0,0,0.7)"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "gray"/>, key: "gray"},
{option_icon: <FontAwesome5 name = {this.icons_config.name} size={this.icons_config.size} color = "orange"/>, key: "orange"},
{option_icon: <AntDesign name="closesquareo" size={80} color="black" />, key: ""} //x icon for delete color
]
window_width = Dimensions.get("window").width
window_height = Dimensions.get("window").height
render() {
return (
<>
<View style = {this.styles.container}>
{this.options_array.map((option) => {
return (
<View key = {option.key} style = {this.styles.options}>
<TouchableOpacity style = {this.styles.touchable} onPress = {() => this.choose_color(option.key)}>
<Text>{option.option_icon}</Text>
</TouchableOpacity>
</View>
)
})}
</View>
</>
)
}
Here is how the stylesheet code looks like:
styles = StyleSheet.create({
container: {
position: "absolute",
justifyContent: "space-around",
width: Math.round(this.window_width) * 0.8,
height: Math.round(this.window_width) * 0.8,
flexWrap: "wrap",
flexDirection: "row",
alignSelf: "center",
backgroundColor: "red",
marginTop: 200
},
options: {
paddingTop: Math.round(this.window_width) * 0.025,
justifyContent: "center"
}
});
However, I encountered an issue with using
Dimensions.get("window").widthwidth and height properties to create a responsive square for all devices. It works fine on my one plus 7 pro and Huawei p9 plus, but not on my Xiaomi mi 9T. Here are some screenshots for comparison:
Xiaomi Mi 9T:
https://i.sstatic.net/2mtoj.png
One Plus 7 Pro:
https://i.sstatic.net/baaeh.png
Huawei P9 Plus:
https://i.sstatic.net/zCiCd.png
I suspect it might be related to the size of the icons, as there seems to be no problem on one plus and huawei devices. How can I resolve this issue?