fullstackstation / react-native-svg-animated-linear-gradient Goto Github PK

Hi ,
Guys Check This PLEASE 👎

Allow passing prop for setting this property?

react-native animation issue

console show that when i use it :

The following APIs have moved to separate packages and importing them from the "expo" package is deprecated: Svg, Svg.ClipPath, Svg.Defs, Svg.G, Svg.LinearGradient, Svg.Rect, Svg.Stop.

1. Add correct versions of these packages to your project using:

   expo install react-native-svg

   If "install" is not recognized as an expo command, update your expo-cli installation.

2. Change your imports so they use specific packages instead of the "expo" package:

• Svg.ClipPath -> import { ClipPath } from 'react-native-svg'
• Svg.Defs -> import { Defs } from 'react-native-svg'
• Svg.G -> import { G } from 'react-native-svg'
• Svg.LinearGradient -> import { LinearGradient } from 'react-native-svg'
• Svg.Rect -> import { Rect } from 'react-native-svg'
• Svg.Stop -> import { Stop } from 'react-native-svg'
• import { Svg } from 'expo' -> import * as Svg from 'react-native-svg'

Hi, I took the liberty of creating a public chat in the discord facing React-Native. With the intention of uniting the React-native community and improving communication.

I'm creating a channel for public discussions about your project. To avoid flooding "chat" on your github. If you can support the initiative, great! Just share the link below xD

I'm adding RN only projects to this public chat service. And I commit myself to manage chat rooms.
You would just need to observe the chat related to your project.

here's the link
https://discord.gg/RvFM97v

Cheers.

Hi,
I tried to use on Pure React Native with react-native-svg.
Weird issue on android, Stop offset cannot be filled by this.state.offsets[index].
It will throw error

If i fill as fixed value like offset="0" it will run properly.

The strict peer dependencies are causing issues.

Memory optimisation will be headque if anyone has found a solution then it will be fruitful.

Prerequisites:

• [email protected]
• react-native-svg-animated-linear-gradient@^0.3.0

Current behaviour:

When changing render function the following way (removing all animation logic):

render() {
      return (
        <AnimatedSvg height={this.props.height} width={this.props.width}>
          {this.props.children}
        </AnimatedSvg>
      );
}

It looks better:

Updating to [email protected] didn't help. I assume, there are some incompatibilities w/ the latest RN API.

this package looks great, it should be able to use this without Expo

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

alike react-native-content-loader which works fine,this package doesn't provide speed option to up speed for loader, any ideas how to do?

Because typescript is getting populair on building apps with react-native, it would be nice if the typings are available.

Hello :)
Thanks for amazing work! Im very happy to use this library... works perfectly on android... but... on iOS only empty place is inserted... I see nothing there....

Maybe this is related to this:
I followed this directions to install this library:

npm i react-native-svg-animated-linear-gradient --save
npm i react-native-svg
react-native link react-native-svg

but last command return:

react-native: command not found

I made small research and found that:
https://stackoverflow.com/questions/44977693/react-native-link-using-expo

The es-2015 preset is causing issues in my RN app, as it is saying that the preset is missing and can't be found relatively to the module directory.

I am trying to take the backgroundColor and fix it as one of the colors to either primaryColor or secondaryColor. But there is no option to do that in the current setup as the default colors for primaryColor is #eeeee and for secondaryColor is #dddddd.

So it would be helpful if you could add support to have backgroundColor be primaryColor unless it is specified through props instead of setting it to #eeeeee.

Isn't there a way to get a similar result using Animated.interpolate?
Is there a need to import d3-interpolate as well? Animated is already included within react-native.

The referred repo that extract this out of expo doesn't exist anymore, so it shouldn't be referenced anymore.

Here is my code:
loopAnimation in library is getting invoked. But, when I try to mount the component (I'm using in development mode), I don't see it animating

My code:
App.js

 class App extends Component {
    render() {
        return <SampleLoader/>
    }
} 

SampleLoader.js

import React, { Component } from "react";
import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient'
import Svg, { Circle, Rect } from 'react-native-svg';
import { Dimensions, View } from "react-native";

//I've locally linked react-native-svg and using that

export default class SampleLoader extends Component{
    render(){
        return (
            <SvgAnimatedLinearGradient height={200}
                                       primaryColor="#7fffd4"
                                       secondaryColor="#ff4500">
                <Rect x="7%" y="24" rx="0" ry="0" width="15%" height="48" />
                <Rect x="7%" y="96" rx="3" ry="3" width="90%" height="7" />
                <Rect x="7%" y="116" rx="3" ry="3" width="90%" height="7" />
                <Rect x="7%" y="136" rx="3" ry="3" width="90%" height="7" />
                <Rect x="7%" y="156" rx="3" ry="3" width="90%" height="7" />
            </SvgAnimatedLinearGradient>
        )
    }
}