Unable to use LinearGradient as the stroke of a Path

[abejfehr]

I'm trying to create a circle with a beautiful gradient, for use as a colour picker.

I found this magnificent solution on StackOverflow done in pure SVG (quite cleverly) but I'm unable to get it to work using this library.

I keep getting an error which states:

Unable to parse color from string "url(#linearA)"

My code is as follows:

<Svg width="300" height="300">
    <Defs>
        <LinearGradient id="linearA" x1="0" y1="0" x2="1" y2="1">
           <Stop offset="0%" stop-color="#01E400"></Stop>
           <Stop offset="100%" stop-color="#FEFF01"></Stop>
        </LinearGradient>
        <LinearGradient id="linearB" x1="0.5" y1="0" x2="0.5" y2="1">
           <Stop offset="0%" stop-color="#FEFF01"></Stop>
           <Stop offset="100%" stop-color="#FF7E00"></Stop>
        </LinearGradient>
        <LinearGradient id="linearC" x1="1" y1="0" x2="0" y2="1">
           <Stop offset="0%" stop-color="#FF7E00"></Stop>
           <Stop offset="100%" stop-color="#FB0300"></Stop>
        </LinearGradient>
        <LinearGradient id="linearD" x1="1" y1="1" x2="0" y2="0">
           <Stop offset="0%" stop-color="#FB0300"></Stop>
           <Stop offset="100%" stop-color="#9B004A"></Stop>
        </LinearGradient>
        <LinearGradient id="linearE" x1="0.5" y1="1" x2="0.5" y2="0">
           <Stop offset="0%" stop-color="#9B004A"></Stop>
           <Stop offset="100%" stop-color="#7D0022"></Stop>
        </LinearGradient>
        <LinearGradient id="linearF" x1="0" y1="1" x2="1" y2="0">
           <Stop offset="0%" stop-color="#7D0022"></Stop>
           <Stop offset="100%" stop-color="#01E400"></Stop>
        </LinearGradient>
    </Defs>
   <Path d="M150 10 a120 120 0 0 1 103.9230 60"
        fill="none" stroke="url(#linearA)" stroke-width="5" />
   <Path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearB)" stroke-width="5" />
   <Path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearC)" stroke-width="5" />
   <Path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearD)" stroke-width="5" />
   <Path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearE)" stroke-width="5" />
   <Path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearF)" stroke-width="5" />
</Svg>

I haven't put very much effort into finding the problem, but could it be because ART is using extractColor instead of extractBrush for strokes?

[magicismight]

This feature need ART support.
Sorry, can`t help you with this right now.unless official support is landed on ART.

[magicismight]

Im working on it now. The react-native-art-svghas changed name toreact-native-svg`.
And it is no longer rely on ReactNativeART any more.

[magicismight]

It has been fixed on react-native-svg@1.1.0.