React-native: alignItems: 'baseline' doesn't work

[autoric]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[shergin]

I recently fixed this on iOS.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[gelitenight]

this bug still exists...
"react": "16.3.1",
"react-native": "0.55.2"

[mangei]

I confirm, this bug is still alive.

Screenshot:

[shergin]

https://github.com/facebook/react-native/blob/03663491c6e68409f73d5c9bbc1a2e3c02ee0966/RNTester/js/TextExample.ios.js#L226-L276

[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

[SaeedZhiany]

I'm on RN 0.59.10 and it's not working on android yet. I get the same result that @MrSeaWave getting.

[blueberry6401]

In many cases we cannot apple the workaround by wrapping all Texts inside Text, for example in making a table.