Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
MrSeaWave opened this issue Oct 24, 2018 · 3 comments
Closed
3 tasks done

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

MrSeaWave opened this issue Oct 24, 2018 · 3 comments
Labels
Bug Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@MrSeaWave
Copy link

MrSeaWave commented Oct 24, 2018

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)

@react-native-bot react-native-bot added the Platform: Android Android applications. label Oct 24, 2018
@react-native-bot
Copy link
Collaborator

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

@MrSeaWave
Copy link
Author

maybe we can use this code to solve this problem, but I think it's not a good idea

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

export default class FixTextBaseline extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textContainer}>
          <Text>
            <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>
          </Text>
        </View>
      </View>
    )
  }
}

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textContainer: {
    justifyContent: 'center',
    flexDirection: 'row'
    // alignItems: 'baseline'
  }
})

fix

@rickhanlonii
Copy link
Member

Dupe of #20666

@facebook facebook locked as resolved and limited conversation to collaborators Mar 19, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants