Transparent backgrounds

[Terry Sahaidak]

Is your feature request related to a problem? Please describe.

In react native on Android when you use elevation and want to have a transparent-ish view, you will have visible shadow background:

https://snack.expo.dev/@terrysahaidak/humiliated-strawberries

This library implements really cool shadows but also suffers from this same problem - the shadow is visible underneath.

This is a known problem of React Native, though:
facebook/react-native#25093

Describe the solution you'd like

At this point, I don't know if this is actually possible.
According to the issue, it wasn't a problem until Android 9.

P.S.
Thanks for this awesome library, it's a gem!

[Wadah Esam]

if this is solved, it would be probably the #1 library to go for shadows. will try to solve it

[Simon Trény]

Hi @terrysahaidak,

I think you can achieve what you want with renderToHardwareTextureAndroid. Unfortunately, it clips the view to its exact bounds, so the shadow won't render properly if applied directly on ShadowedView. You can fix that by adding some padding around the shadowed view by doing something like this:

<View style={{ opacity: 0.5, padding: 20, margin: -20 }} renderToHardwareTextureAndroid>
  <ShadowedView
    style={{
      width: 150,
      height: 200,
      borderRadius: 20,
      backgroundColor: '#dbfff2',
      ...shadowStyle({
        opacity: 0.4,
        radius: 12,
        offset: [5, 3],
      }),
    }}
  />
</View>

The 20px padding needs to be adjusted based on the radius/offset of the shadow. Let me know if it doesn't work as you would expect.

[David Câmara]

Hi @terrysahaidak,

I think you can achieve what you want with renderToHardwareTextureAndroid. Unfortunately, it clips the view to its exact bounds, so the shadow won't render properly if applied directly on ShadowedView. You can fix that by adding some padding around the shadowed view by doing something like this:

<View style={{ opacity: 0.5, padding: 20, margin: -20 }} renderToHardwareTextureAndroid>
  <ShadowedView
    style={{
      width: 150,
      height: 200,
      borderRadius: 20,
      backgroundColor: '#dbfff2',
      ...shadowStyle({
        opacity: 0.4,
        radius: 12,
        offset: [5, 3],
      }),
    }}
  />
</View>

The 20px padding needs to be adjusted based on the radius/offset of the shadow. Let me know if it doesn't work as you would expect.

Solved my issue with renderToHardwareTextureAndroid. Thanks