flex alignItems "baseline" not aligning consistently like on web

[osdiab]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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: https://github.com/facebook/react-native/issues/15858#issuecomment-333942532

[Taylor123]

@elucaswork Do you know if there's a way to use the functionality of justifyContent: 'space-between' with the wrapping Text?

I currently have the following use case where one text node is aligned on the left side of the screen, while the other is on the right. But without wrapping the nodes in Text, the baseline alignment does not work on android.

<View style={{ alignItems: 'baseline', flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text style={style.date}>2018/9/29</Text>
  <Text style={style.time}>14:41</Text>
</View>

However, due to the properties of nested Text, I can't seem to find the right props/styles to get one Text node aligned to the left and the other to the right when they're wrapped in a Text node

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.