'baseline align in React native

enter image description here

 <View style={ViewStyle}>
   <Text
     includeFontPadding={false}
     textAlignVertical='bottom'
     style={Text1Style}
   >
     hello
   </Text>
   <Text
     includeFontPadding={false}
     textAlignVertical='bottom'
     style={Text2Style}
   >
     world
   </Text>
 </View>

 const ViewStyle = {
   flexDirection: 'row',
   alignItems: 'baseline',
 }

 const Text1Style = {
   fontSize: 20,
 }

 const Text2Style = {
   fontSize: 10,
 }

How can I make them align at the baseline?

cssreact-native


Solution 1:[1]

Workaround

The workaround for this seems to be wrapping the <Text> elements in another <Text>, so you would use this structure:

 <Text>
   <Text>hello</Text>
   <Text>world</Text>
 </Text>

instead of:

 <View>
   <Text>hello</Text>
   <Text>world</Text>
 </View>

Keeping alignItems='baseline' on the outer element.

This however has the unfortunate side effect, that the nested Texts cannot be positioned using Flexbox anymore.

Background: Issues filed against React Native:

This seems to be a bug that affects android only. There are at least 4 issues filed against react-native for this. All of them seem to have been closed by bots or by humans without giving a specific reason or a solution that is not a workaround:

Solution 2:[2]

I've used your code , and it aligned in baseline way. There must be a view or something wrapped which is causing the problem. PFB . the link Expo snack

Solution 3:[3]

I think the problem originates from somewhere else. As i checked out your snippet for me it aligned at the baseline. Maybe the flexbox causes your problem.

Solution 4:[4]

<View style={{flexDirection: 'row'}}>
    <Text
      paddingBottom={15}
      title=‘Hello’ />

     <Text title=‘World’ />
</View>

alignItems with baseline and different sized text didn't work for me as a work around the above piece of code was helpful.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Gaurav Roy
Solution 3
Solution 4 Prasad G Kulkarni

Related Questions