Skip to content

[Android] alignItems: 'baseline' doesn't work  #21918

Closed
@MrSeaWave

Description

@MrSeaWave

on Android this bug still exists...

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

Environment

react-native-info

 React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
      Memory: 30.11 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 26.0.3, 27.0.3, 28.0.3
        API Levels: 26, 27, 28
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
      react-native: 0.57.3 => 0.57.3 
    npmGlobalPackages:
      react-native-cli: 2.0.1

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

image

But android is wrong
image

just like this #15858 (comment)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions