CODEWITHSUNDEEP
cssreact-native
eugene
eugene

Reputation: 41665

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?

Upvotes: 1

Views: 2030

Answers (4)

Prasad G Kulkarni
Prasad G Kulkarni

Reputation: 141

<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.

Upvotes: 0

vlz
vlz

Reputation: 1039

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:

Upvotes: 1

Gy&#246;rgy Bucsek
Gy&#246;rgy Bucsek

Reputation: 53

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.

Upvotes: 0

Gaurav Roy
Gaurav Roy

Reputation: 12210

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

Upvotes: 0

Related Questions