Nested SVGs not rendering gradients

[cmlarsen]

I am drawing an image that pulls in icons defined as SVGs from config files. When the svgs are pulled in I am not seeing the gradients render in the nested SVGs.

I have experienced this on RN SVG ^9.13.0 to 12.1.0 in iOS

Minimal Example:

import * as React from 'react';
import {Svg, Defs, LinearGradient, Stop, G, Rect, Circle} from 'react-native-svg';

export default function App() {
  return (
    
       <Svg width={150} height={50}>
        <Defs>
          <LinearGradient id="grad1" x1={'0%'} y1={'0%'} x2={'100%'} y2={'100%'}>
            <Stop offset={0} stopColor="red" />
            <Stop offset={1} stopColor="blue" />
          </LinearGradient>
        </Defs>
        <Rect x={0} y={0} width={150} height={50} fill={'pink'} />
         {/* Renders gradient correctly*/}
        <Circle cx={25} cy={25} r={25} fill={'url(#grad1)'} stroke="black" />

        <G x={50} y={0}>
          <Svg width={50} height={50}>
            {/* Renders red BG correctly*/}
            <Circle cx={25} cy={25} r={25} fill={'red'} stroke="black" />
          </Svg>
        </G>

        <G x={100} y={0}>
          <Svg width={50} height={50}>
            <Defs>
              <LinearGradient id="grad2" x1={'0%'} y1={'0%'} x2={'100%'} y2={'100%'}>
                <Stop offset={0} stopColor="red" />
                <Stop offset={1} stopColor="blue" />
              </LinearGradient>
            </Defs>
            {/* Does not render gradient, fill is transparent on iOS*/}
            <Circle cx={25} cy={25} r={25} fill={'url(#grad2)'} strokeWidth={1} stroke="black" />
          </Svg>
        </G>
      </Svg>
    
  );
}

Output Screenshot:

Snack:

In this snack, it appears to work on Web and Android, but fails in iOS
https://snack.expo.io/eQ62NyiMSr

[cmlarsen]

As a work around I've found that I if I wrap the nested SVG in a RN View and ForgienObject it works, like so:

<Svg>
...rest of the SVG code
<ForgienObject>
   <View>
         <Svg width={50} height={50}>
            <Defs>
              <LinearGradient id="grad2" x1={'0%'} y1={'0%'} x2={'100%'} y2={'100%'}>
                <Stop offset={0} stopColor="red" />
                <Stop offset={1} stopColor="blue" />
              </LinearGradient>
            </Defs>
            <Circle cx={25} cy={25} r={25} fill={'url(#grad2)'} strokeWidth={1} stroke="black" />
          </Svg>
    </View>
</ForgienObject>
</Svg>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[Ttecs]

I found a solution that instead of using the svgs having gradient,I converted the SVG into a Lottie file. that works great and as an extra advantage, we can transform the SVG into a simple animation :)

[WoLewicki]

This should be fixed by #1939. Can you check if it is so?