React Native: How to span letter in Text in a circle-CodePudding

How do you style the A in this example such that the background is circular and it acts as piece of the text when the screen is resized or it goes onto another line?

I am not sure what the options are but these are the ones I tried:

Option 1:

<Text>Round 1 of 3 <Text style={styles.red_circle}>A</Text></Text>

The issue with this one is that I can't get the background to be circular and it ends up being oval

Option 2:

<Text style={styles.text}>Round 1 of 3 <View style = {styles.red_circle}><Text>A</Text></View></Text>

With this option the red background is circular but it doesn't act as part of the same line when the width of the screen is squished and goes onto the next line

Styles

text:{
color: 'white',
fontSize: 30
}
red_circle:{

backgroundColor: 'red',
width:40,
height:40,
borderRadius: 20

}

CodePudding user response：

Your css should be like (observe the border radius):

red_circle:{
  backgroundColor: 'red',
  width:'40px',
  height:'40px',
  borderRadius: '40px',
  color: 'white',
}

Also, if you want it to wrap/go to next line on smaller screens you can use flex-wrap:wrap for this purpose.

CodePudding user response：

It's not that complex.

.c-text {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 3px 5px 3px 5px;
}

ROUND 1 OF 3 <br> FOR TEAM <span class="c-text">A</span>

A text-align: center in parent will center the whole thing.

Edit

You have work with multiple letters and padding doesn't work with all.

So alternative solution:

.parent {
    text-align: center;
}
.c-text {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: red;
    color: white;
    border-radius: 10px;
    align-content: center;
}

<div class="parent">Round of 1 of 3 <br> For team <span class="c-text"> A </span></div>

Note: if text align of parent isn't center letter goes to left.