Linear gradiant in svgxml show a plain color

[Jaco97]

Bug

I've added an svg with linear gradient using svgxml tag but it doesn't show the gradient, only a plain color, both on ios and android, devices and simulators

Environment info

React native info output:

System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 44.77 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.3.0 - /usr/local/bin/node
    npm: 6.10.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.4 => 0.60.4 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-native-svg: 6.3.1

Library version: 2.5.5

Steps To Reproduce

Import an svg with gradial and render it:

import { SvgXml } from 'react-native-svg';
import FacebookIc from '../../assets/ic_facebook_small.svg';

...

render() {
    return (<SvgXml width="30" height="30" xml={FacebookIc} />);
}

Describe what you expected to happen:

The svg should be showed with the gradient

My svg file contains

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30">
  <defs>
    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#f8ec46"/>
      <stop offset="1" stop-color="#f2c52d"/>
    </linearGradient>
  </defs>
  <path id="ic_facebook" d="M15,30A15,15,0,0,1,9.161,1.179,15,15,0,0,1,20.839,28.821,14.907,14.907,0,0,1,15,30ZM11.484,12.5V14.76H12.95v7.558h2.9V14.76h2.2l.169-2.256H15.845V10.868a.769.769,0,0,1,.361-.706,1.532,1.532,0,0,1,.8-.177,4.716,4.716,0,0,1,1.2.188l.308-2.219a9.744,9.744,0,0,0-2.278-.271c-.132,0-.264,0-.393.009a2.821,2.821,0,0,0-2.572,1.366,2.716,2.716,0,0,0-.323,1.265V12.5Z" transform="translate(0)" fill="url(#linear-gradient)"/>
</svg>

[msand]

Seems gradientUnits="objectBoundingBox" is not working, this seems to work for now:

  <linearGradient id="linear-gradient" x1="50%" x2="50%" y2="100%">
    <stop offset="0" stop-color="#f8ec46"/>
    <stop offset="1" stop-color="#f2c52d"/>
  </linearGradient>

[msand]

Can you try with the latest commit from the master branch?

[msand]

🎉 This issue has been resolved in version 9.9.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Jaco97]

The problem seams to be solved! Thank you!