flex alignItems "baseline" not aligning consistently like on web

[osdiab]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
      Memory: 27.61 MB / 16.00 GB
      Shell: 5.5.1 - /usr/local/bin/zsh
    Binaries:
      Node: 9.3.0 - ~/.nvm/versions/node/v9.3.0/bin/node
      Yarn: 1.9.4 - ~/.yarn/bin/yarn
      npm: 6.2.0 - ~/.nvm/versions/node/v9.3.0/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.3, 26.0.2, 27.0.3, 28.0.0
        API Levels: 22, 23, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4670197
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: ^16.3.14 => 16.4.6
      @types/react-native: ^0.55.12 => 0.55.26
      react: 16.4.1 => 16.4.1
      react-native: ^0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-git-upgrade: 0.2.7

Description

On the web, align-items: baseline is relative to first line: https://codepen.io/osdiab/pen/KBYyzz

On react-native, it seems to be happening relative to the last line, apparently, which is not very useful to me. See the demo.

Reproducible Demo

https://snack.expo.io/By8Qr7xIX

Screenshots

react-native

web

[react-native-bot]

Can you reproduce the issue on the latest release, v0.56?

[osdiab]

yes.

[B3rry]

+1

@osdiab: How is your component structured? I believe baseline alignment has only worked with siblings, and does not interact with line-height in the same way as the CSS spec specifies.

[osdiab]

You can see in the code samples I posted above for details on the structure; it's not a complex layout, but I'll think more about how can possibly make this even simpler (kinda hard to imagine though)

[osdiab]

Anybody have a chance to look at this?

[SugaraguS]

@react-native-bot I meet the same problem:

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

const BaseLineTest = () => {
  return (
    <View style={style.dateTime}>
      <Text style={style.date}>2018/9/29</Text>
      <Text style={style.time}>14:41</Text>
    </View>
  );
};

export default BaseLineTest;
const style = StyleSheet.create({
  dateTime: {
    flexDirection: 'row',
    backgroundColor: '#fbb',
    alignItems: 'baseline',
    height: 60
  },
  date: {
    backgroundColor: '#bbf',
    color: '#FFF',
    marginRight: 10
  },
  time: {
    backgroundColor: '#bff',
    color: '#FFF',
    fontSize: 30
  }
});

Environment：

React Native Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 1.79 GB / 7.89 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
react-native-cli: 2.0.1
react-native: 0.57.1

[estevaolucas]

If you wrap the Text elements with another Text, it should work (it's not obvious tho).

<Text>
  <Text style={style.date}>2018/9/29</Text>
  <Text style={style.time}>14:41</Text>
</Text>

workaround found here: #15858 (comment)