Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android - Elevation style not working on elements rendered inside MaskedView

See original GitHub issue

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

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>

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:5

Top GitHub Comments

1reaction

Kinarkcommented, Jul 28, 2020

I’m experiencing the same issue here 😦

0reactions

RobinBobincommented, Jan 15, 2022

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

Top Results From Across the Web

Android "elevation" not showing a shadow - Stack Overflow

I've been playing around with shadows on Lollipop for a bit and this is what I've found: It appears that a parent ViewGroup...

How to Create a Custom Tab Bar in React Native - Crowdbotics

In this post, we're going to create a custom tab bar using the React ... @react-native-community/masked-view react-native-vector-icons ...

Stack Masked View to Make Curved Card React Native-React ...

import * as React from 'react'; import { View } from 'react-native'; export default function App() { return ( <View style={{ alignSelf:'center', ...

MaskedView - Expo Documentation

Android support for this library is experimental and you may encounter inconsistencies in behavior across platforms. Please report issues you encounter to react ......

Create Shadows and Clip Views - Android Developers

Material design introduces elevation for UI elements. Elevation helps users understand the relative importance of each element and focus ...