Android render not correctly

[boygiandi]

Bug

I'm trying to create view like this https://i.imgur.com/q2NMUOQ.jpg . Please check the comment section. It has gradient opacity at top. So, I'm doing it like this :

<View style={{ backgroundColor: '#abcdef' }}
<MaskedView
      maskElement={(
        <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,1)']} style={{
              flex: 1,
            }} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} locations={[0,0.5]} />
      )}
>
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
..........
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
</MaskedView>
</View>

It works fine on ios but wrong on android. Please check screenshot https://i.imgur.com/zZpPSzs.png

On android, it black at bottom. How to remove it ? Thank you

Environment info

React native info output:

 info
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 46.73 MB / 32.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.16.0 - /usr/local/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.10.2 - /usr/local/bin/npm
      Watchman: 4.9.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, 24, 26, 27, 28, 29
        Build Tools: 27.0.3, 28.0.3, 29.0.1
        System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.9 => 0.59.9
    npmGlobalPackages:
      react-native-cli: 2.0.1

Library version: "@react-native-community/masked-view": "^0.1.1"

[cherryman]

I'm having a similar issue. Looks like MaskedView shows the mask element's color when the children are transparent.

e.g. The following renders a darker red.

<MaskedView
  style={StyleSheet.absoluteFill}
  maskElement={<View style={{ backgroundColor: 'red', flex: 1 }} />}
>
  <View style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', flex: 1 />
</MaskedView>

Optimally, the result would be transparent so whatever is under the MaskedView can show through.

[kennym]

Running into the exact same problem - any updates?

[kennym]

We've found a workaround for android, by setting the opacity of the element via a timeout of 50ms.

this.state.gradientColor = '#ffffff'

            <MaskedView
              style={{
                height: 50,
                width: '100%'
              }}
              maskElement={<LinearGradient colors={[this.state.gradientColor, 'transparent']} style={{ flex: 0.9 }} />}
            >

and a setTimeout which does the following:

      setTimeout(() => {
        this.setState({ gradientColor: "#ffffff01"})
      }, 50)

amazingly enough this works, but I'd be grateful if this weren't needed.

[felippepuhle]

same

[FonDorn]

@boygiandi just wrap you elements in View with backgroundColor as same as you need. For example:

<View style={{ backgroundColor: '#abcdef' }} >
<MaskedView
      maskElement={(
        <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,1)']} style={{
              flex: 1,
            }} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} locations={[0,0.5]} />
      )}
>
<View style={{ backgroundColor: '#abcdef' }} >
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
..........
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
</View>
</MaskedView>
</View>

[crutchcorn]

@kennym's workaround fixed things for me until the recent 0.1.8 release, which fixed the problem for me. I no longer need the workaround now with the newest version

[5up-okamura]

It works fine. key is the key to refreshing.

const GradientElement = () => {
    const [key, setKey] = useState(0)

    useEffect(() => {
        if (Platform.OS === 'android') {
            setTimeout(() => setKey((prev) => prev + 1), 0)
        }
    }, [])

    return (
        <MaskedView
            key={`${key}`}
            maskElement={<InnnerElement />}
        >
            <LinearGradient
                colors={['red','blue']}
                style={{ flex: 1 }}
            />
        </MaskedView>
    )
}

[felippepuhle]

Yeah, I think we can close this issue... it's working perfectly in the latest versions

[carlos3g]

This issue seems to be resolved. I think you can close now, can't you? @FonDorn @Naturalclar