react-native-view-shot
react-native-view-shot copied to clipboard
Elevation prop style is not rendered on View component
bug report
Version & Platform
npm ls react-native react-native-view-shot
├── [email protected]
└── [email protected]
Platform: Android
Expected behavior
Render elevation prop style on View component
Actual behavior
Elevation prop style is not rendered on View component
Steps to reproduce the behavior
1 - add elevation to a View component 2 - capture a view shot
Hello! I also have the same problem. Did anyone solve it?
Any solution for this issue?
Nvm, Using https://github.com/ConduitMobileRND/react-native-simple-shadow-view as a workaround.
This must be a limitation with current Android implementation of the snapshot logic, and i'm not sure if it's solvable. We're just using view.draw()
have you tried to put a wrapping view with some padding around the component with elevation, and force a collapsable={false}
?
Not sure if this is what you mean.
<ViewShot
ref="viewShot"
options={{format: 'jpg', quality: 0.9, result: 'data-uri'}}
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
}}>
<View collapsable={false} style={{padding: 20}}>
<View
collapsable={false}
style={{
backgroundColor: 'pink',
height: 100,
width: 100,
elevation: 10,
}}
/>
</View>
</ViewShot>
But the snapshot generated by this code is also lack of shadow.
ok thanks for double-checking that. I'll have to investigate into our Android snapshot logic.
I've added an example to reproduce the issue
![Capture d’écran 2020-01-19 à 16 42 25](https://user-images.githubusercontent.com/211411/72683787-b01a0c00-3ada-11ea-9e89-fa4a3dc95027.png)
I've been trying to understand what we did wrong and I don't see much what we can do but finding a way to tell android to draw the elevation. Because on our side we are simply using view.draw(canvas);
.
I've found something interesting tho and I wonder if it would help the issue: https://developer.android.com/reference/kotlin/android/graphics/Canvas.html?hl=en
The problem is this enableZ() is only available from Android 10 😑 i'm not even sure how to make conditional code in Android based on a higher version of the api
Thanks for the hardwork on this. I'm also having similar situation and tried the collapsible. I am testing on Android 6 though. If it works for Android 10+ that would be cool as most people do use those later versions.