Circle shape with center text not working React Native iOS

Question

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?

i suggest you make a view before text, and add `justifyContent: center` to a view — Eduardo Schork, Nov 08 '19 at 11:38

score 5 · Accepted Answer · answered Nov 08 '19 at 11:43

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>

score 0 · Answer 2 · answered Nov 08 '19 at 11:39

try alignSelf : center

alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.

Reference

Circle shape with center text not working React Native iOS

2 Answers2