javascriptcssreact-nativegreat-circle

Circle shape with center text not working React Native iOS

I am trying to drawing circle shape view for textview inside that some text.

It is working with Android, But, iOS not working properly. Text is coming top of the view.

      <Text style={styles.na}> NA </Text>

styles


 na: {
    width: 60,
    height: 60,
    borderRadius: 60 / 2,
    backgroundColor: 'orange',
    alignItems: 'center',
    textAlign: 'center',
    fontWeight: 'bold',
    color: 'white',
    fontSize: 15,
    textAlignVertical: 'center',
    marginRight: 10,
    overflow: 'hidden',
  },

Any suggestions?

enter image description here

Solution

  • try this code, works for me

          <View style={{
        width: 60,
        height: 60,
        justifyContent: "center",
        borderRadius: 60 / 2,
        backgroundColor: 'orange',
      }}>
        <Text style={{
          alignSelf: 'center',
          fontWeight: 'bold',
          color: 'white',
          fontSize: 15,
        }}>NA</Text>
      </View>