Skip to content

[Android] Different shadow length in landscape and portrait view (elevation) #18545

@scriptum

Description

@scriptum

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

  1. Start new application
  2. Add bottom bar with elevation
  3. Run on Android (5+)
  4. 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

photo_2018-03-24_22-33-32
photo_2018-03-24_22-33-36

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugPlatform: AndroidAndroid applications.Platform: LinuxBuilding on Linux.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions