Environment
Run react-native info in your terminal and paste its contents here.
Environment:
OS: macOS High Sierra 10.13.5
Node: 8.11.1
Yarn: 1.7.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4720617
Packages: (wanted => installed)
react: ^16.4.0 => 16.4.0
react-native: 0.55.4 => 0.55.4
Description
Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.
I essentially need to be able to render a trapezoid shape with a shadow under it for a navigation component. I know that the typical way to create this sort of shape in react-native is by messing with the borders:
trapezoid: {
width: 200,
height: 0,
borderBottomColor: "darkblue",
borderBottomWidth: 100,
borderLeftWidth: 50,
borderRightWidth: 50,
borderRightColor: 'transparent',
borderLeftColor: 'transparent'
}
However, once you add elevation to this on Android, (elevation: 5) it shows up as a square around the shape, rather than following the edge of the shape itself. The transparent right and left border color is respected, as you can see the gray container background show through.
Interestingly, though, when adding iOS shadow properties, the shadow works as expected on iOS, just not on Android. I'm assuming this has to do with how elevation is calculated on Android views. Does anyone know how to get around this?
Reproducible Demo
If you run this very basic demo on Android, you'll see the issue. You can also see how the shadow does work as expected in iOS: https://snack.expo.io/Sy6Z61Q7Q
Environment
Run
react-native infoin your terminal and paste its contents here.Environment:
OS: macOS High Sierra 10.13.5
Node: 8.11.1
Yarn: 1.7.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4720617
Packages: (wanted => installed)
react: ^16.4.0 => 16.4.0
react-native: 0.55.4 => 0.55.4
Description
Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.
I essentially need to be able to render a trapezoid shape with a shadow under it for a navigation component. I know that the typical way to create this sort of shape in react-native is by messing with the borders:
However, once you add elevation to this on Android, (
elevation: 5) it shows up as a square around the shape, rather than following the edge of the shape itself. The transparent right and left border color is respected, as you can see the gray container background show through.Interestingly, though, when adding iOS shadow properties, the shadow works as expected on iOS, just not on Android. I'm assuming this has to do with how elevation is calculated on Android views. Does anyone know how to get around this?
Reproducible Demo
If you run this very basic demo on Android, you'll see the issue. You can also see how the shadow does work as expected in iOS: https://snack.expo.io/Sy6Z61Q7Q