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>

Activity

  1. greenyossi commented on Jul 22, 2019

    @greenyossi
    Author

    I did some research and found that replacing LAYER_TYPE_SOFTWARE with LAYER_TYPE_HARDWARE in RNCMaskedView.java line 22 fixes the issue..

    Is it a good solution in your opinion?

  2. FonDorn commented on Nov 4, 2019

    @FonDorn
    Collaborator

    Tested on react-native 0.61.3 and react-native-masked-view 0.1.2 and it work as expected

  3. Kinark commented on Jul 28, 2020

    @Kinark

    I'm experiencing the same issue here :(

  4. ukasyahrz commented on Aug 10, 2020

    @ukasyahrz

    Any update? Me too experiencing the same issue 😪

  5. RobinBobin commented on Jan 15, 2022

    @RobinBobin

    For me changing LAYER_TYPE_SOFTWARE to LAYER_TYPE_HARDWARE showed the elevation shadow, but upside down.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions