SvgAnimatedLinearGradient rotating children

[Paulo Cardoso]

Hi there

I was testing your component to implement a skeleton in my React Native app. I wanted a simple 3x3 grid loading, something like this:

Here is the relevant part of my code:

      <SvgAnimatedLinearGradient
        height={500}
        width={500}
        primaryColor="#f6f8f9"
        secondaryColor="#dddee1"
      >
        <Rect x="0" y="0" rx="5" ry="5" width="75" height="75" />
        <Rect x="95" y="0" rx="5" ry="5" width="75" height="75" />
        <Rect x="190" y="0" rx="5" ry="5" width="75" height="75" />
        <Rect x="0" y="95" rx="5" ry="5" width="75" height="75" />
        <Rect x="95" y="95" rx="5" ry="5" width="75" height="75" />
        <Rect x="190" y="95" rx="5" ry="5" width="75" height="75" />
        <Rect x="0" y="190" rx="5" ry="5" width="75" height="75" />
        <Rect x="95" y="190" rx="5" ry="5" width="75" height="75" />
        <Rect x="190" y="190" rx="5" ry="5" width="75" height="75" />
      </SvgAnimatedLinearGradient >

The result I got was odd, my svg came out rotated:

After some digging, I found out this piece of code, in react-native-svg-animated-linear-gradient/src/index.js , line 122:

<ClipPath id="clip">
  <G rotation="50"
  origin="100, 50">
    {this.props.children}
  </G>
</ClipPath>

I tested removing this rotation prop, and my SVG came out on the right direction, only with a horizontal offset. Look at the result with this <G/> component without any prop:

Is this supposed to be like this? Why would the children be rotated/moved horizontally? With the code as is, none of the examples provided at the Readme.md work, they all come out with positioning issues. Could you expose this rotation/origin prop so we can edit it in the main component? Or remove it, I'm not sure if it should be there in the first place.
Thanks

[Nhan Nguyen]

Thanks for your report.
The issue was resolved by @musamaahmad with this commit:
3a2ebc5#diff-1fdf421c05c1140f6d71444ea2b27638

I released new version 0.3, please let me know if still have any errors in your project.

[Paulo Cardoso]

Thanks a lot for your quick response!
I did ran yarn upgrade react-native-svg-animated-linear-gradient --latest, and my package.json shows ^0.3.0 but that <G/> component is still with the rotation and origin props. Can you check what happened?

[Nhan Nguyen]

@phpc91 Sorry so much!
I published 0.3.2, please check it.

[Paulo Cardoso]

@virusvn it's all right now. Thanks!