React Native: How to Center a symbol-CodePudding

I'm working a simple app in React Native for both Android and IOS. I have a Text element within a View element, where the text element contains a star symbol in the form of a conditional string {item.isFavourite ? "\u2605": "\u2606"}. I want to center this text within the View with only one style between Android and IOS, but can't find a solution.

Here's the current code I've got:

<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>

with the styles 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 messed around a lot with the css properties, yet I can't find something that works for both Android and IOs. Any tips? Or should I just make 2 styles for each OS?

CodePudding user response：

I'm not an expert in React Native. I do mostly web development in React.js, but if you're able to use these CSS styles, then this should solve your issue:

menuFavouriteStar: {
  width: 40,
  height: 40,
  position: "absolute",
  top: "82%",
  right: "2%",
  backgroundColor: "white",
  borderRadius: 3,
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
}