Canva path is transparent when react-native-svg elements are next to it.

[kokosky93]

Description

Hi,

I created a Canva with a path. I render canva element within a loop (if it would make any difference).
I render next to it a react-native-svg element.
When I do this the canva path is transparent and I can't see it.

Would you know what am I doing wrong?

Version

0.1.227

Steps to reproduce

1. Create an array of elements
2. Iterate through the elements by data.map(item => (
3. Inside the loop create a component with Canva and react-native-svg element.

Snack, code example, screenshot, or link to a repository

<View height="60px">
   <Canvas style={{ flex: 1, height: 60, backgroundColor: 'transparent' }}>
      <Path
         path={`M 42 0
         L 42 90
         L ${screenWidth - 20} 90
         L ${screenWidth - 20} 0
         Z
         M 42 0
         A 15 20, 0, 0, 1, 42 60
         Z`}
      color={"blue"}
      style="fill"
     />
   </Canvas>

   <View style={{ width: 60, height: 60, backgroundColor: 'transparent', zIndex: 1000 }}>
      <ProgressCircle />
   </View>
</View>


// ---------------------------------------------------
// <ProgressCircle> component (react-native-svg)

<View style={{ width: "100%", aspectRatio, backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center' }}>
  <Svg height="100%" width="100%" viewBox={`0 0 ${originalWidth} ${originalHeight}`} style={{ position: 'absolute' }}>
      <Circle
          fill="rgba(0,0,0,0)"
          cx={181}
          cy={181}
          r={RADIUS}
          stroke="#404258"
          strokeWidth={40}
      />
      <AnimatedCircle
          fill="rgba(0,0,0,0)"
          cx={181}
          cy={181}
          r={RADIUS}
          stroke="#82CD47"
          strokeWidth={25}
          strokeDasharray={CIRCLE_LENGTH}
          animatedProps={animatedCircleProps}
          strokeLinecap="round"
      />
    </Svg>
</View>

Sorry, it looks like this is not related to react native skia. I recreated skia shape with react native svg library and have the same issue. I must be doing something wrong.

<Svg style={{ flex: 1, height: 60, backgroundColor: 'transparent' }}>
    <Path
        d={`M 42 0
            L 42 90
            L ${screenWidth - 20} 90
            L ${screenWidth - 20} 0
            Z
            M 42 0
            A 15 20, 0, 0, 1, 42 60
            Z`}
        fill={isPressed ? pressedItemColor : itemColor}
    />
</Svg>