react-native-svg not converting correctly - react-native

Question

I cannot convert this svg for use in react native via react-native-svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 342.7 256.21"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="7.39" y1="65.57" x2="78.68" y2="65.57" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#244b9d"/><stop offset="0.99" stop-color="#e27b2d"/></linearGradient><linearGradient id="linear-gradient-2" x1="0" y1="163.98" x2="148.18" y2="163.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="68.45" y1="120.84" x2="342.7" y2="120.84" xlink:href="#linear-gradient"/></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M7.39,104l.24-7.2C7.68,95.34,9,60.88,23.45,47,37.52,33.5,49.94,28.73,74.57,27.36l4.11-.23-.44,4.1c0,.46-1.29,11.51-7.59,19.84s-41.57,37-57.45,48.67Zm63.1-69.35c-20,1.57-30.25,5.93-42.2,17.39C19.58,60.4,16.37,79,15.23,89.47,34.31,74.93,60.42,53,65.07,46.85A34.39,34.39,0,0,0,70.49,34.65Z"/><path class="cls-2" d="M83.81,256.21a74,74,0,0,1-11.94-.95A85.58,85.58,0,0,1,7.93,206.49c-10.57-23.69-10.57-48.27,0-73.06,11.49-27,57.07-56.33,59-57.57l6.45-4.12-1.11,7.58c-3.64,24.85-12.69,92-10.91,104.24C63.4,197.74,68.12,205,82.4,216c11.24,8.65,45.05,12.32,57.13,13l8.65.49-6.57,5.65C132.39,243.1,109.85,256.21,83.81,256.21ZM64.2,86.15c-13,9.1-41.66,30.77-49.85,50-9.9,23.25-9.9,45.32,0,67.46A78.47,78.47,0,0,0,73,248.35c23.13,3.75,44.65-5.67,56.6-13.15-14.22-1.43-40.39-5.14-51.46-13.65-15.63-12-21.4-21-23.72-37C52.5,171.43,61,108.57,64.2,86.15Z"/><path class="cls-3" d="M202.06,241.69c-20.22,0-41.94-7.08-58.33-20.13-8.35.14-51.79-.28-68.77-22.69l-6.51-8.58,10.3,3.11c.65.19,14.21,4,24.07-6.5,7.92-8.44,9.62-28.47,11.12-46.14.53-6.22,1-12.1,1.77-17.62,1.69-12.67,9.12-27.23,19.88-38.95a84,84,0,0,1,47.55-26.36L187.9,57l-.69,4.79c-.09.59-8.62,59.63-11.93,89.82-1.51,13.78,4.51,20.71,9.83,24.1,8.17,5.21,19,4.91,24.44,1.64,11.43-6.93,13.06-13.67,14.39-24,1.39-10.8,12.29-91.66,14.95-108.34,3-18.63,21.2-37.82,40.66-42.78,26.83-6.84,48.72,2,58.54,23.59L342.7,36l-9.59-5.69c-2.95-1.75-11.83-5.9-17.3-4.15-7,2.22-12.47,9-13.7,14.26-1.4,5.92-13.36,90.21-17.48,125.74-3.69,31.89-20.32,53.88-52.35,69.2C223.35,239.64,212.92,241.69,202.06,241.69Zm-55.93-27.21,1,.85c23.23,19.1,58.53,25,82.11,13.73,30.05-14.38,45-34,48.42-63.7,3.93-33.91,16-119.53,17.61-126.54S304,22.59,313.69,19.5c4-1.29,8.6-.74,12.59.37C312.86,3.4,291,6.58,281.28,9.05c-18.44,4.7-33.24,23-35.48,37.1-2.65,16.63-13.52,97.35-14.92,108.13-1.45,11.26-3.67,20.54-17.7,29.05-8.52,5.16-22.2,4.42-31.83-1.72-9.89-6.31-14.51-17.23-13-30.77,2.76-25.16,9.12-70.21,11.25-85.12-34.61,8.37-54.37,39.16-56.92,58.35-.72,5.35-1.21,11.15-1.73,17.28-1.68,19.73-3.41,40.13-13,50.34a29.86,29.86,0,0,1-20.65,9.47c19.83,14.59,57.1,13.38,57.53,13.37Z"/></g></g></svg>
My output is
import React, { memo } from 'react'
import Svg, { Defs, LinearGradient, Stop, G, Path } from 'react-native-svg' //12.1.1
const Icon = memo(
({ color, size = 120, style, ...rest }: IconProps) => {
return (
<Svg viewBox="0 0 120 120" width={size} height={size} {...rest}>
<Defs>
<LinearGradient
id="linear-gradient"
x1={7.39}
y1={65.57}
x2={78.68}
y2={65.57}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0} stopColor="#244b9d" />
<Stop offset={0.99} stopColor="#e27b2d" />
</LinearGradient>
<LinearGradient
id="linear-gradient-2"
x1={0}
y1={163.98}
x2={148.18}
y2={163.98}
/>
<LinearGradient
id="linear-gradient-3"
x1={68.45}
y1={120.84}
x2={342.7}
y2={120.84}
/>
</Defs>
<G id="Layer_2" data-name="Layer 2">
<G id="Layer_2-2" data-name="Layer 2">
<Path
d="M7.39 104l.24-7.2C7.68 95.34 9 60.88 23.45 47c14.07-13.5 26.49-18.27 51.12-19.64l4.11-.23-.44 4.1c0 .46-1.29 11.51-7.59 19.84s-41.57 37-57.45 48.67zm63.1-69.35c-20 1.57-30.25 5.93-42.2 17.39C19.58 60.4 16.37 79 15.23 89.47 34.31 74.93 60.42 53 65.07 46.85a34.39 34.39 0 005.42-12.2z"
fill="url(#linear-gradient)"
/>
<Path
d="M83.81 256.21a74 74 0 01-11.94-.95 85.58 85.58 0 01-63.94-48.77c-10.57-23.69-10.57-48.27 0-73.06 11.49-27 57.07-56.33 59-57.57l6.45-4.12-1.11 7.58c-3.64 24.85-12.69 92-10.91 104.24C63.4 197.74 68.12 205 82.4 216c11.24 8.65 45.05 12.32 57.13 13l8.65.49-6.57 5.65c-9.22 7.96-31.76 21.07-57.8 21.07zM64.2 86.15c-13 9.1-41.66 30.77-49.85 50-9.9 23.25-9.9 45.32 0 67.46A78.47 78.47 0 0073 248.35c23.13 3.75 44.65-5.67 56.6-13.15-14.22-1.43-40.39-5.14-51.46-13.65-15.63-12-21.4-21-23.72-37-1.92-13.12 6.58-75.98 9.78-98.4z"
fill="url(#linear-gradient-2)"
/>
<Path
d="M202.06 241.69c-20.22 0-41.94-7.08-58.33-20.13-8.35.14-51.79-.28-68.77-22.69l-6.51-8.58 10.3 3.11c.65.19 14.21 4 24.07-6.5 7.92-8.44 9.62-28.47 11.12-46.14.53-6.22 1-12.1 1.77-17.62 1.69-12.67 9.12-27.23 19.88-38.95a84 84 0 0147.55-26.36l4.76-.83-.69 4.79c-.09.59-8.62 59.63-11.93 89.82-1.51 13.78 4.51 20.71 9.83 24.1 8.17 5.21 19 4.91 24.44 1.64 11.43-6.93 13.06-13.67 14.39-24 1.39-10.8 12.29-91.66 14.95-108.34 3-18.63 21.2-37.82 40.66-42.78 26.83-6.84 48.72 2 58.54 23.59L342.7 36l-9.59-5.69c-2.95-1.75-11.83-5.9-17.3-4.15-7 2.22-12.47 9-13.7 14.26-1.4 5.92-13.36 90.21-17.48 125.74-3.69 31.89-20.32 53.88-52.35 69.2-8.93 4.28-19.36 6.33-30.22 6.33zm-55.93-27.21l1 .85c23.23 19.1 58.53 25 82.11 13.73 30.05-14.38 45-34 48.42-63.7 3.93-33.91 16-119.53 17.61-126.54S304 22.59 313.69 19.5c4-1.29 8.6-.74 12.59.37C312.86 3.4 291 6.58 281.28 9.05c-18.44 4.7-33.24 23-35.48 37.1-2.65 16.63-13.52 97.35-14.92 108.13-1.45 11.26-3.67 20.54-17.7 29.05-8.52 5.16-22.2 4.42-31.83-1.72-9.89-6.31-14.51-17.23-13-30.77 2.76-25.16 9.12-70.21 11.25-85.12-34.61 8.37-54.37 39.16-56.92 58.35-.72 5.35-1.21 11.15-1.73 17.28-1.68 19.73-3.41 40.13-13 50.34a29.86 29.86 0 01-20.65 9.47c19.83 14.59 57.1 13.38 57.53 13.37z"
fill="url(#linear-gradient-3)"
/>
</G>
</G>
</Svg>
)
}
)
No matter what I do it only seems to render the first Path and the rest is missing. it doesn't appear to be cut off by the viewBox either. Not sure what to do to get this svg to render correctly.
How it renders on web
Adding stops get me further but still not working correctly
Update: Adding stop, moving width and height to wrapping View and adjusting the viewport gets the svg to render. however the gradient is messed up on the second and third path
const Icon = memo(
({ color, size = 60, style, ...rest }: IconProps) => {
return (
<View style={{ width: size, height: size }}>
<Svg viewBox="0 0 360 360" {...rest}>
<Defs>
<LinearGradient
id="linear-gradient"
x1={7.39}
y1={65.57}
x2={78.68}
y2={65.57}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0} stopColor="#244b9d" />
<Stop offset={0.99} stopColor="#e27b2d" />
</LinearGradient>
<LinearGradient
id="linear-gradient-2"
x1={0}
y1={163.98}
x2={148.18}
y2={163.98}
>
<Stop offset={0} stopColor="#244b9d" />
<Stop offset={0.99} stopColor="#e27b2d" />
</LinearGradient>
<LinearGradient
id="linear-gradient-3"
x1={68.45}
y1={120.84}
x2={342.7}
y2={120.84}
>
<Stop offset={0} stopColor="#244b9d" />
<Stop offset={0.99} stopColor="#e27b2d" />
</LinearGradient>
</Defs>
<G id="Layer_2" data-name="Layer 2">
<G id="Layer_2-2" data-name="Layer 2">
<Path
d="M7.39 104l.24-7.2C7.68 95.34 9 60.88 23.45 47c14.07-13.5 26.49-18.27 51.12-19.64l4.11-.23-.44 4.1c0 .46-1.29 11.51-7.59 19.84s-41.57 37-57.45 48.67zm63.1-69.35c-20 1.57-30.25 5.93-42.2 17.39C19.58 60.4 16.37 79 15.23 89.47 34.31 74.93 60.42 53 65.07 46.85a34.39 34.39 0 005.42-12.2z"
fill="url(#linear-gradient)"
/>
<Path
d="M83.81 256.21a74 74 0 01-11.94-.95 85.58 85.58 0 01-63.94-48.77c-10.57-23.69-10.57-48.27 0-73.06 11.49-27 57.07-56.33 59-57.57l6.45-4.12-1.11 7.58c-3.64 24.85-12.69 92-10.91 104.24C63.4 197.74 68.12 205 82.4 216c11.24 8.65 45.05 12.32 57.13 13l8.65.49-6.57 5.65c-9.22 7.96-31.76 21.07-57.8 21.07zM64.2 86.15c-13 9.1-41.66 30.77-49.85 50-9.9 23.25-9.9 45.32 0 67.46A78.47 78.47 0 0073 248.35c23.13 3.75 44.65-5.67 56.6-13.15-14.22-1.43-40.39-5.14-51.46-13.65-15.63-12-21.4-21-23.72-37-1.92-13.12 6.58-75.98 9.78-98.4z"
fill="url(#linear-gradient-2)"
/>
<Path
d="M202.06 241.69c-20.22 0-41.94-7.08-58.33-20.13-8.35.14-51.79-.28-68.77-22.69l-6.51-8.58 10.3 3.11c.65.19 14.21 4 24.07-6.5 7.92-8.44 9.62-28.47 11.12-46.14.53-6.22 1-12.1 1.77-17.62 1.69-12.67 9.12-27.23 19.88-38.95a84 84 0 0147.55-26.36l4.76-.83-.69 4.79c-.09.59-8.62 59.63-11.93 89.82-1.51 13.78 4.51 20.71 9.83 24.1 8.17 5.21 19 4.91 24.44 1.64 11.43-6.93 13.06-13.67 14.39-24 1.39-10.8 12.29-91.66 14.95-108.34 3-18.63 21.2-37.82 40.66-42.78 26.83-6.84 48.72 2 58.54 23.59L342.7 36l-9.59-5.69c-2.95-1.75-11.83-5.9-17.3-4.15-7 2.22-12.47 9-13.7 14.26-1.4 5.92-13.36 90.21-17.48 125.74-3.69 31.89-20.32 53.88-52.35 69.2-8.93 4.28-19.36 6.33-30.22 6.33zm-55.93-27.21l1 .85c23.23 19.1 58.53 25 82.11 13.73 30.05-14.38 45-34 48.42-63.7 3.93-33.91 16-119.53 17.61-126.54S304 22.59 313.69 19.5c4-1.29 8.6-.74 12.59.37C312.86 3.4 291 6.58 281.28 9.05c-18.44 4.7-33.24 23-35.48 37.1-2.65 16.63-13.52 97.35-14.92 108.13-1.45 11.26-3.67 20.54-17.7 29.05-8.52 5.16-22.2 4.42-31.83-1.72-9.89-6.31-14.51-17.23-13-30.77 2.76-25.16 9.12-70.21 11.25-85.12-34.61 8.37-54.37 39.16-56.92 58.35-.72 5.35-1.21 11.15-1.73 17.28-1.68 19.73-3.41 40.13-13 50.34a29.86 29.86 0 01-20.65 9.47c19.83 14.59 57.1 13.38 57.53 13.37z"
fill="url(#linear-gradient-3)"
/>
</G>
</G>
</Svg>
</View>
)
}
)
Result