Android - Elevation style not working on elements rendered inside MaskedView #15
Description
Bug
I'm trying to render a scroll view inside a MaskedView with LinearGradient as a maskElement.. On Android all elements with elevation style lose their shadow..
Environment info
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Memory: 426.71 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.0
System Images: android-27 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
@react-native-community/cli: ^2.6.2 => 2.6.2
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3
npmGlobalPackages:
react-native-create-library: 3.1.2Library version: 0.1.1
Steps To Reproduce
- Use MaskedView with LinearGradient element as mask and render inside a view with elevation.
Describe what you expected to happen:
- The view inside MaskedView will have a shadow due to the elevation style.
Reproducible sample code
<MaskedView
maskElement={(
<LinearGradient
style={{ height: 200, width: 200 }}
colors={['transparent', 'white']}
locations={[0.01, 0.06]}
/>
)}
>
<View style={{ width: 100, height: 100, elevation: 5, backgroundColor: 'red' }} />
</MaskedView>