alignItems: 'baseline' doesn't work

[erin-noe-payne]

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]

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]

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]

react-native/RNTester/js/TextExample.ios.js

Lines 226 to 276 in 0366349

	class TextBaseLineLayoutExample extends React.Component<*, *> {
	render() {
	var texts = [];
	for (var i = 9; i >= 0; i--) {
	texts.push(
	<Text key={i} style={{fontSize: 8 + i * 5, backgroundColor: '#eee'}}>
	{i}
	</Text>,
	);
	}
	const marker = (
	<View style={{width: 20, height: 20, backgroundColor: 'gray'}} />
	);
	const subtitleStyle = {fontSize: 16, marginTop: 8, fontWeight: 'bold'};
	return (
	<View>
	<Text style={subtitleStyle}>{'Nested <Text/>s:'}</Text>
	<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
	{marker}
	<Text>{texts}</Text>
	{marker}
	</View>
	<Text style={subtitleStyle}>{'Array of <Text/>s in <View>:'}</Text>
	<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
	{marker}
	{texts}
	{marker}
	</View>
	<Text style={subtitleStyle}>{'<TextInput/>:'}</Text>
	<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
	{marker}
	<TextInput style={{margin: 0, padding: 0}}>{texts}</TextInput>
	{marker}
	</View>
	<Text style={subtitleStyle}>{'<TextInput multiline/>:'}</Text>
	<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
	{marker}
	<TextInput multiline={true} style={{margin: 0, padding: 0}}>
	{texts}
	</TextInput>
	{marker}
	</View>
	</View>
	);
	}
	}

[MrSeaWave]

@shergin on Android this bug still exists...,
u can see it #21918 (comment)

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.