masked-view
masked-view copied to clipboard
Mask'ed' element disappears if height is too large (Android Only)
Bug report
Summary
Probably crazy, and this is working perfectly on iOS, but when I run on android my masked element (a block of color) disappears entirely if I make the height greater than 731. That's an insanely arbitrary number but I was wondering if anyone else ran into something similar?
Environment info
System:
OS: macOS Mojave 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i7-4558U CPU @ 2.80GHz
Memory: 21.32 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: Not Found
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /Users/James/.rvm/rubies/ruby-2.6.3/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_144 - /usr/bin/javac
Python: 2.7.10 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ^16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
Library version: ^0.1.10
Reproducible sample code
<View
style={{
position:'absolute',
width:deviceWidth,
height:1000,
}}>
<MaskedView
maskElement={
<Image
source={curve}
style={{
width: deviceWidth,
height: 1000,
}}
/>
}
>
<View
style={{
backgroundColor:'red',
width: deviceWidth,
height: 731, //<< if I change this to 732, the view disappears entirely.
}}
/>
</MaskedView>
</View>
I used renderToHardwareTextureAndroid property and it works
I faced this problem. If you set a much higher height (4000 or more), then artifacts may even appear