alignItems: 'baseline' doesn't work

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

1. react-native -v: 0.48.1
2. node -v: v7.9.0
3. npm -v: 5.4.1
4. yarn --version: N/A

Then, specify:

• Target Platform: iOS, Android

• Development Operating System: macOS Sierra 10.12.5

• Build tools: react-native run-ios react-native run-android

Steps to Reproduce

1. Create a wrapper view with the styles: {flexDirection: 'row', alignItems:'baseline'}
2. Within the wrapper view, create multiple text nodes with different fontSizes

Expected Behavior

The text nodes would be aligned along the baseline.

Actual Behavior

The text nodes are not aligned along the baseline. The alignment is indistinguishable from alignItems: 'flex-end'

Reproducible Demo

https://snack.expo.io/HkoJ_QkcZ

(T16975579)

[joechrysler]

There is a workaround to this. If you wrap sibling <Text> nodes in a <Text> everything lines up nicely regardless of the parent <View>’s alignItems setting. https://snack.expo.io/BkR46Ub2b

[MrSeaWave]

@shergin on Android this bug still exists…, u can see it https://github.com/facebook/react-native/issues/21918#issue-373366382

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

Environment

node v8.12.0
npm 6.4.1
react-native-cli: 2.0.1
react-native: 0.57.3

my package.json is

{
  "name": "TemReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.1",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },
  "jest": {
    "preset": "react-native"
  }
}

the Code is

import React, { PureComponent } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class TestTextBaseline extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textContainer}>
          <Text style={{ fontSize: 65, backgroundColor: '#ff9c6e' }}>1</Text>
          <Text style={{ fontSize: 55, backgroundColor: '#ff9c6e' }}>1</Text>
          <Text style={{ fontSize: 45, backgroundColor: '#ff9c6e' }}>1</Text>
          <Text style={{ fontSize: 35, backgroundColor: '#ff9c6e' }}>1</Text>
          <Text style={{ fontSize: 25, backgroundColor: '#ff9c6e' }}>1</Text>
        </View>
      </View>
    );
  }
}

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textContainer: {
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'baseline'
  }
});

ios is correct

But android is wrong