Shadow Component Not Working as Expected with Nested TouchableOpacity

[YOEL311]

Hi,

Firstly, thank you for your hard work and professional effort in creating this repository.

I've encountered an issue where the shadow component does not behave as expected when a TouchableOpacity component is nested inside it. Specifically, the background color of the shadow becomes visible and appears prominently.

screencap-2024-05-13T120745.717Z.mp4

import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {SkiaShadow} from 'react-native-skia-shadow';

const App = () => {
  return (
    <View style={styles.container}>
      <SkiaShadow blur={5} dx={0} dy={0} color="blue" borderRadius={9999}>
        <TouchableOpacity>
          <View style={styles.circle} />
        </TouchableOpacity>
      </SkiaShadow>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circle: {
    width: 150,
    height: 150,
    borderRadius: 9999,
    backgroundColor: 'red',
  },
});
export default App;

repo to reproduce it
https://github.com/YOEL311/testRNSHhadow

[YOEL311]

i can do somting like this

export type SkiaShadowProps = {
  blur: number;
  dx: number;
  dy: number;
  color?: Color;
  backgroundColor?: Color;
  borderRadius?: number;
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;
  children: React.ReactNode;
};

    <View onLayout={handleLayout}>
      <Canvas style={{ ...canvasStyle }}>
        <Path path={path} color={color}>
          <Shadow
            dx={dx}
            dy={dy}
            blur={blur}
            color={color}
            shadowOnly
          />
        </Path>
        {!isUndefined(backgroundColor) && (
          <Path path={path} color={backgroundColor} />
        )}
      </Canvas>
      {children}
    </View>

[chsdwn]

Thank you I'll try this idea and if it fixes the issue I'll release a new version later.

[YOEL311]

That should solve it

The truth is, I didn't know if this code would be maintained, so I made a local patch in my app,
now I see that it is a maintained library,
thank you 😀