CODEWITHSUNDEEP
javascriptcssreact-native
iWillGetBetter
iWillGetBetter

Reputation: 800

Different font size text on opposite ends of the same line

On react native, I am trying to get two different fonts on the same line. This part can be done relatively easy using nested <Text>.

<Text style={{fontSize: 12}}>
  twelve<Text style={{fontSize: 14}}>fourteen</Text>
<Text>

Now I wish to get the two texts on opposite ends of the screen (horizontally). The desired effect is as seen below, where the two 'hi's are on opposite ends of the screen width.

enter image description here

Is this achievable in react native? If possible I would like to avoid using manual padding adjustments.

Edit: We have to achieve two things at the same time here, 1) on the same line and 2) opposite ends.

Upvotes: 1

Views: 3486

Answers (2)

Mayank Jain
Mayank Jain

Reputation: 271

You can achieve this by flexDirection and JustifyContent.

<View style={{
                    margin: 20,
                    flexDirection: "row",
                    justifyContent: "space-between",
                    alignItems: 'baseline',
                }}>
                    <Text style={{fontSize: 22, lineHeight: 22}}>
                        Hi
                    </Text>
                    <Text style={{fontSize: 25, lineHeight: 25}}>
                        Hi
                    </Text>
</View>

Upvotes: 5

vbernal
vbernal

Reputation: 713

Try this:

<Text 
  style={{ fontSize: 15 }}>Hi 
    <Text style={{ fontWeight: 'bold', fontSize: 30 }}>Hi
    </Text>
</Text>

Upvotes: 0

Related Questions