How to simulate "align-items: baseline" in React Native?

Question

Since there is no "align-items: baseline" in RN's implementation of Flexbox, how can I align the baselines of two text element horizontally?

The JSX:

<View style={styles.numberAndPercent}>
  <Text style={styles.number}>6.80</Text>
  <Text style={styles.percent}>%</Text>
</View>

Answer 1

React Native now supports alignItems: 'baseline', so the following should work:

numberAndPercent: {
  flexDirection: 'row',
  alignItems: 'baseline',
}

Flexbox docs here; full list of supported values here.