alignItems: baseline not working on Android

Question

I'm trying to have a phrase, which has different font-sizes all aligned on bottom and so, I have done the following:

<View style={styles.header}>
  <TextCustomized style={styles.balance} text="você tem" />
  <TextCustomized style={styles.number} text=" R$" />
  <TextCustomized style={styles.integer} text="100" />
  <TextCustomized style={styles.number} text=",00" />
  <TextCustomized style={styles.balance} text=" de saldo" />
</View>

const styles = StyleSheet.create({
  header: {
   flexDirection: 'row',
   alignItems: 'baseline',
   justifyContent: 'center',
   paddingTop: 10,
   borderBottomWidth: 1,
   borderBottomColor: '#e1e1e1',
   paddingBottom: 10,
 },
 balance: {
   fontSize: 14
 },
 number: {
  fontSize: 18,
  color: '#0778e4',
  fontWeight: 'bold',
 },
 integer: {
   fontSize: 30,
   color: '#0778e4',
   fontWeight: "800",
   lineHeight: 30,
 },
})

It works perfectly on iOS, but on Android it doesn`t work as it should, as you can see on this PS.

How can I achieve it?

Answer 1

As a workaround, you can wrap the text you want aligned baseline into a Text element. The alignItems: baseline in the parent will be unnecessary at that point. Something like this should work:

<View style={styles.header}>
  <Text>
    <TextCustomized style={styles.balance} text="você tem" />
    <TextCustomized style={styles.number} text=" R$" />
    <TextCustomized style={styles.integer} text="100" />
    <TextCustomized style={styles.number} text=",00" />
    <TextCustomized style={styles.balance} text=" de saldo" />
  </Text>
</View>

const styles = StyleSheet.create({
  header: {
   flexDirection: 'row',
   justifyContent: 'center',
   paddingTop: 10,
   borderBottomWidth: 1,
   borderBottomColor: '#e1e1e1',
   paddingBottom: 10,
 },
 balance: {
   fontSize: 14
 },
 number: {
  fontSize: 18,
  color: '#0778e4',
  fontWeight: 'bold',
 },
 integer: {
   fontSize: 30,
   color: '#0778e4',
   fontWeight: "800",
   lineHeight: 30,
 }
});