react-native-view-shot

react-native-view-shot copied to clipboard

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

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.