Closed
Description
Environment
$ react-native info
React Native Environment Info:
System:
OS: Linux 4.14 Mageia 6
CPU: x64 AMD Ryzen 7 2700X Eight-Core Processor
Memory: 533.61 MB / 15.66 GB
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 8.12.0 - ~/.npm-global/bin/node
Yarn: 1.10.1 - ~/.npm-global/bin/yarn
npm: 6.0.1 - ~/.npm-global/bin/npm
SDKs:
Android SDK:
Build Tools: 27.0.3, 28.0.2, 28.0.3
API Levels: 23, 24, 27, 28
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
Steps to Reproduce
- Start new application
- Add bottom bar with elevation
- Run on Android (5+)
- Rotate phone
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<View style={styles.tabBar}>
<Text>Test</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
tabBar: {
flex: 1,
backgroundColor: '#fff',
position: "absolute",
bottom: 0,
height: 56,
elevation: 8,
width: "100%",
alignItems: 'center',
justifyContent: 'center',
opacity: 1
},
});
Expected Behavior
Pretty shadows
Actual Behavior
Different shadows