Currently, I am developing a simple app using React Native that targets both Android and IOS platforms. Within a View element, I have a Text component that displays a star symbol based on a conditional string {item.isFavourite ? "\u2605": "\u2606"}. My goal is to center this text within the View using a consistent style that works seamlessly on both Android and IOS, but so far, I haven't been able to find a solution.
Below is the code snippet I am currently working with:
<View style={styles.menuFavouriteStar} >
<Text
style={styles.favouriteStar}
onPress={() => {
const newData = toggleFavourite(item, data);
saveFavourites(newData.favouritesData);
setData(newData);
}}
>{item.isFavourite ? "\u2605": "\u2606"}</Text>
</View>
The associated styles are as follows:
menuFavouriteStar: {
width: 40,
height: 40,
position: "absolute",
top: "82%",
right: "2%",
backgroundColor: "white",
borderRadius: 3
},
favouriteStar: {
fontSize: 25,
textAlign: "center",
textAlignVertical: "center"
}
I've experimented with various CSS properties in an attempt to achieve cross-platform consistency without success. Do you have any suggestions or should I consider creating separate styles for each operating system?