React native SVG filled in black

I am trying to use my .svg file in my React Native app using react-native-svg but the result is a SVG filled with black.

Instead of this:

I got this:

my code for this SVG is the following. I suppose that the xLinkHref tag has no effect on the SVG and that's why only the first path with the prexfix__a ref is working, because it's the one with the gradient description.

I tried to use the react-native-svg-transformeras well but the result is the same. I know that the xlink:hrefis deprecated but I don't know if it's still working.

 <Svg width={306.5} height={83.553} viewBox="0 0 306.5 83.553">
  <Defs>
    <LinearGradient
      id="prefix__a"
      x1={-4.103}
      y1={0.382}
      x2={34.818}
      y2={1.331}
      gradientUnits="objectBoundingBox"
    >
      <Stop offset={0} stopColor="#9a50ea" />
      <Stop offset={1} stopColor="#673ab7" />
    </LinearGradient>
    <LinearGradient
      id="prefix__b"
      x1={-4.114}
      y1={0.464}
      x2={70.809}
      y2={0.985}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__c"
      x1={-0.503}
      y1={0.487}
      x2={6.59}
      y2={0.579}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__d"
      x1={-3.586}
      y1={0.466}
      x2={11.489}
      y2={0.59}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__e"
      x1={-2.869}
      y1={0.455}
      x2={6.24}
      y2={0.577}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__f"
      x1={-4.821}
      y1={0.451}
      x2={6.009}
      y2={0.548}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__g"
      x1={-15.525}
      y1={0.452}
      x2={12.192}
      y2={0.535}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__h"
      x1={-6.142}
      y1={0.418}
      x2={3.813}
      y2={0.539}
      xlinkHref="#prefix__a"
    />
    <LinearGradient
      id="prefix__i"
      x1={-6.55}
      y1={0.404}
      x2={2.371}
      y2={0.526}
      xlinkHref="#prefix__a"
    />
  </Defs>
  <G data-name="Calque 2">
    <G data-name="Calque 1">
      <Path
        data-name="Trac\xE9 92"
        d="M36.755 149.276v.366a1.517 1.517 0 00.424 1.046l3.448 3.558a1.507 1.507 0 002.166 0l3.469-3.558a1.523 1.523 0 00.429-1.046v-.392a19.816 19.816 0 01-9.942.031z"
        transform="translate(-17.52 -71.153)"
        fill="url(#prefix__a)"
      />
      <Path
        data-name="Trac\xE9 93"
        d="M5.164 100.21h-.2A4.966 4.966 0 000 105.176a4.966 4.966 0 004.966 4.971h.2a19.852 19.852 0 010-9.937z"
        transform="translate(0 -47.773)"
        fill="url(#prefix__b)"
      />
      <Path
        data-name="Trac\xE9 94"
        d="M45.527 39.329C34.073 39.486 25 49.156 25 60.678v10.544H12.746a19.156 19.156 0 000 9.994H25v13.8a18.837 18.837 0 009.942-.031V60.531a11.093 11.093 0 0110.1-11.182 10.931 10.931 0 0111.631 11.706 11.077 11.077 0 01-11.114 10.167h-6.6a2.862 2.862 0 00-2.852 2.873v4.249a2.862 2.862 0 002.857 2.873h6.5a20.944 20.944 0 10.063-41.886z"
        transform="translate(-5.76 -18.748)"
        fill="url(#prefix__c)"
      />
      <Path
        data-name="Trac\xE9 95"
        d="M160.945 46.611a3.265 3.265 0 01-3.365 2.873h-.994a12.17 12.17 0 00-9.942 5.887v22.358a3.276 3.276 0 01-3.276 3.281h-4.353a3.276 3.276 0 01-3.276-3.281V43.5a3.276 3.276 0 013.276-3.265h3.951a3.281 3.281 0 013.281 3.281v.837c2.438-3.024 6.891-4.96 11.852-4.96h.078a3.27 3.27 0 013.208 3.663z"
        transform="translate(-64.714 -18.778)"
        fill="url(#prefix__d)"
      />
      <Path
        data-name="Trac\xE9 96"
        d="M231.927 80.973h-3.951a3.281 3.281 0 01-3.281-3.281 17.021 17.021 0 01-11.349 4.123 20.5 20.5 0 01-15.384-6.9 21.9 21.9 0 01-5.233-14.29c0-12.035 8.9-21.27 20.009-21.27a18.638 18.638 0 0111.935 4.123 3.281 3.281 0 013.3-3.265h3.951a3.281 3.281 0 013.281 3.281v34.21a3.281 3.281 0 01-3.278 3.269zm-7.66-26.482a12.558 12.558 0 00-10.088-5.044c-6.389 0-10.507 5.3-10.507 11.182 0 6.389 4.626 11.1 10.758 11.1a11.941 11.941 0 009.837-5.044z"
        transform="translate(-91.884 -18.762)"
        fill="url(#prefix__e)"
      />
      <Path
        data-name="Trac\xE9 97"
        d="M323.9 68.2a3.286 3.286 0 01-2.883 3.846 32.964 32.964 0 01-3.344.2c-6.562 0-11.349-2.187-14.128-5.887-2.093-2.773-3.024-6.389-3.024-12.187v-14.3h-8.069a3.281 3.281 0 01-3.282-3.272v-2.69a3.281 3.281 0 013.281-3.265h8.069v-8.084a3.281 3.281 0 013.28-3.281h4.369a3.281 3.281 0 013.281 3.281v8.084h10.172a3.276 3.276 0 013.276 3.281v2.69a3.276 3.276 0 01-3.276 3.276H311.45v15.539c0 2.517.419 4.034 1.345 5.128 1.094 1.261 2.857 2.015 5.546 2.015a14.892 14.892 0 001.57-.058 3.27 3.27 0 013.459 2.684z"
        transform="translate(-137.861 -9.19)"
        fill="url(#prefix__f)"
      />
      <Path
        data-name="Trac\xE9 98"
        d="M381.488 0a7 7 0 11-5.038 1.991A6.98 6.98 0 01381.488 0zm2.187 62.209h-4.385a3.276 3.276 0 01-3.276-3.281V24.717a3.276 3.276 0 013.276-3.265h4.374a3.276 3.276 0 013.276 3.281v34.21a3.276 3.276 0 01-3.276 3.265z"
        transform="translate(-178.466 .003)"
        fill="url(#prefix__g)"
      />
      <Path
        data-name="Trac\xE9 99"
        d="M453.649 70.581a3.265 3.265 0 01.408 4.887c-4.369 4.416-9.67 6.378-16.1 6.378-12.61 0-21.856-9.419-21.856-21.186 0-11.852 9.5-21.27 21.94-21.27a22.06 22.06 0 0114.651 5.473 3.286 3.286 0 010 4.913l-2.873 2.491a3.229 3.229 0 01-4.233.078 11.423 11.423 0 00-7.561-2.883 10.926 10.926 0 00-10.988 11.182c0 6.389 4.626 11.1 11.266 11.1a11.663 11.663 0 007.953-3.255 3.3 3.3 0 014.249-.272z"
        transform="translate(-198.375 -18.777)"
        fill="url(#prefix__h)"
      />
      <Path
        data-name="Trac\xE9 100"
        d="M524.549 39.36c12.359 0 21.689 9.5 21.689 21.27s-9.33 21.186-21.689 21.186S502.86 72.4 502.86 60.63s9.33-21.27 21.689-21.27zm0 32.368c6.389 0 10.758-4.96 10.758-11.1s-4.369-11.182-10.758-11.182-10.763 5.044-10.763 11.177 4.374 11.105 10.763 11.105z"
        transform="translate(-239.738 -18.763)"
        fill="url(#prefix__i)"
      />
    </G>
  </G>
</Svg>

Solution

I don't think it's currently supported: https://github.com/react-native-community/react-native-svg/issues/1326.

However if you only care about the inheritance part you can solve this by creating a custom component for the LinearGradient like this:

const CustomLinearGradient = (props) => {
  return (
    <LinearGradient gradientUnits="objectBoundingBox" {...props}>
      <Stop offset={0} stopColor="#9a50ea" />
      <Stop offset={1} stopColor="#673ab7" />
    </LinearGradient>
  );
};

Then you can use this component like this:

// ...
<Defs>
  <CustomLinearGradient
    id="prefix__a"
    x1={-4.103}
    y1={0.382}
    x2={34.818}
    y2={1.331}
  />
  // other CustomLinearGradient instances... (prefix b-i)
</Defs>
// ...