Repository navigation
[Android] alignItems: 'baseline' doesn't work #21918
Description
- 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
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
But android is wrong
just like this #15858 (comment)
Activity
react-native-bot commentedon Oct 24, 2018
Can you run
react-native infoand 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 commentedon Oct 26, 2018
maybe we can use this code to solve this problem, but I think it's not a good idea
rickhanlonii commentedon Mar 19, 2019
Dupe of #20666