Skip to content

Android - Elevation style not working on elements rendered inside MaskedView #15

Description

@greenyossi

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.2

Library version: 0.1.1

Steps To Reproduce

  1. Use MaskedView with LinearGradient element as mask and render inside a view with elevation.

Describe what you expected to happen:

  1. 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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    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