Xlinkhref only work on web does not work on ios and android (the color did not get inherited )

import * as React from "react"
import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    data-name="Layer 2"
    viewBox="0 0 2010 2010"
    {...props}
  >
    <Defs>
      <LinearGradient
        id="b"
        x1={-29.51}
        x2={1052.68}
        y1={1310.92}
        y2={-49.54}
        gradientUnits="userSpaceOnUse"
      >
        <Stop offset={0.7} stopColor="#ffe88a" />
        <Stop offset={1} stopColor="#ffe4c5" />
      </LinearGradient>
      <LinearGradient
        id="a"
        x1={1517.81}
        x2={137.65}
        y1={899.78}
        y2={1912.32}
        gradientUnits="userSpaceOnUse"
      >
        <Stop offset={0} stopColor="#69bbff" />
        <Stop offset={1} stopColor="#1798ff" />
      </LinearGradient>
      <LinearGradient
        href="#a"
        id="c"
        x1={1708.95}
        x2={328.79}
        y1={1160.32}
        y2={2172.86}
      />
      <LinearGradient
        href="#a"
        id="d"
        x1={1900.09}
        x2={519.93}
        y1={1420.86}
        y2={2433.4}
      />
      <LinearGradient
        id="e"
        x1={352.85}
        x2={685.61}
        y1={1180.88}
        y2={497.22}
        gradientUnits="userSpaceOnUse"
      >
        <Stop offset={0} stopColor="#1e2121" />
        <Stop offset={1} stopColor="#1e2121" stopOpacity={0} />
      </LinearGradient>
      <LinearGradient
        id="f"
        x1={188.04}
        x2={1821.96}
        y1={891.69}
        y2={891.69}
        gradientUnits="userSpaceOnUse"
      >
        <Stop offset={0} stopColor="#69bbff" />
        <Stop offset={1} stopColor="#9de0f4" />
      </LinearGradient>
    </Defs>
    <Path
      d="M334.2 915.59c-1.47 0-2.94 0-4.42-.13a75 75 0 0 1-60.51-37.31 485.26 485.26 0 0 1 824.19-511.54 75 75 0 0 1-34.36 111.15 447 447 0 0 0-253.23 263.06 75 75 0 0 1-94.51 45.72 284.09 284.09 0 0 0-219.1 16.2 285.71 285.71 0 0 0-98 82.77 75 75 0 0 1-60.06 30.08Z"
      style={{
        fill: "url(#b)",
      }}
    />
    <Path
      d="M479.92 1784.73c-54.55 0-92.42-54.33-73.55-105.51L457.71 1540a23.67 23.67 0 0 1 22.21-15.49 23.68 23.68 0 0 1 22.22 15.49l51.34 139.24c18.87 51.16-19 105.49-73.56 105.49Z"
      fill= "url(#a)"
      style={{
        fill: "url(#a)",
      }}
    />
    <Path
      d="M1026.2 1784.73c-54.55 0-92.43-54.33-73.56-105.51L1004 1540a23.68 23.68 0 0 1 22.22-15.49 23.66 23.66 0 0 1 22.21 15.49l51.34 139.24c18.86 51.16-19.02 105.49-73.57 105.49Z"
      style={{
        fill: "url(#c)",
      }}
    />
    <Path
      d="M1572.47 1784.73c-54.55 0-92.42-54.33-73.55-105.51l51.34-139.22a23.67 23.67 0 0 1 22.21-15.49 23.68 23.68 0 0 1 22.22 15.49l51.31 139.22c18.9 51.18-19 105.51-73.53 105.51Z"
      fill="url(#d)"
      style={{
        fill: "url(#d)",
      }}
    />
    <Path
      d="M954.43 228.87A715.8 715.8 0 0 0 625 501.84h-4a552 552 0 0 0-413.83 186.25 484.58 484.58 0 0 0 62.1 190.06 75 75 0 0 0 60.51 37.31c1.48.09 3 .13 4.42.13a75 75 0 0 0 60.05-30.08 285.71 285.71 0 0 1 98-82.77 284.09 284.09 0 0 1 219.1-16.2 75 75 0 0 0 94.51-45.72 447 447 0 0 1 253.24-263.06 75 75 0 0 0 34.36-111.15 486 486 0 0 0-139.03-137.74Z"
      style={{
        opacity: 0.1,
        fill: "url(#e)",
      }}
    />
    <Path
      d="M1225.84 1487.81H621a432.85 432.85 0 0 1-346.86-692.15 433.61 433.61 0 0 1 417.19-168.14 596.37 596.37 0 1 1 534.51 860.29Z"
      style={{
        fill: "url(#f)",
      }}
    />
  </Svg>
)
export default SvgComponent

snack link : https://snack.expo.dev/?platform=web

Start with the provided Expo Snack reproduction and compare the SVG rendering on web, iOS, and Android. Investigate the LinearGradient elements using href="#a" and verify how the referenced gradient colors are inherited across platforms. Done means the gradients render with the expected inherited colors on iOS and Android as well as web.