react-native-svg-animated-linear-gradient - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

package.json

 {
   "name": "react-native-svg-animated-linear-gradient",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Animated linear gradient for React Native Svg",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -87,2 +87,3 @@ ## SVG Animated Linear Gradient [iOS + Android]
 | y2             | String | '0'       | y of point end gradient, accept Number or Percentage  |
+| offset         | Number | 1         | Gradient offset value of animation                    |
 
@@ -93,3 +94,3 @@ ## TODO
 ## My blog about React/React Native 
-- (Vietnamese only) [Fullstack Station](https://www.businesscard.vn/blog/category/lap-trinh/javascript/react/)
+- (Vietnamese only) [Fullstack Station](https://fullstackstation.com/category/lap-trinh/javascript/react/)
 
@@ -96,0 +97,0 @@ ## Thankful

src/index.js

@@ -1,4 +0,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types'
-import {View, StyleSheet, Animated} from 'react-native';
+import { View, StyleSheet, Animated } from 'react-native';
 
@@ -14,6 +14,6 @@ //import Expo, { Svg } from 'expo';
     Stop
-}  from 'react-native-svg';
+} from 'react-native-svg';
 
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const {interpolate} = require('d3-interpolate');
+const { interpolate } = require('d3-interpolate');
 
@@ -78,6 +78,6 @@ export default class SvgAnimatedLinearGradient extends Component {
             offsetValues[2] = this.offsetValueBound(newState.offsetValues[2]);
-            
+
             // Make sure at least two offsets is different
-            if (offsetValues[0] !== offsetValues[1] || offsetValues[0] !==  offsetValues[2] || offsetValues[1] !== offsetValues[2]) {
-                this._isMounted && this.setState({offsets: offsetValues});
+            if (offsetValues[0] !== offsetValues[1] || offsetValues[0] !== offsetValues[2] || offsetValues[1] !== offsetValues[2]) {
+                this._isMounted && this.setState({ offsets: offsetValues });
             }
@@ -94,7 +94,9 @@ if (t < 1) {
                 toValue: 1,
-                duration: this.state.frequence
+                duration: this.state.frequence,
+                useNativeDriver: this.props.useNativeDriver,
             }),
             Animated.timing(this._animate, {
                 toValue: 0,
-                duration: this.state.frequence
+                duration: this.state.frequence,
+                useNativeDriver: this.props.useNativeDriver,
             })
@@ -116,11 +118,11 @@ ]).start((event) => {
                             stopColor={this.props.primaryColor}
-                            stopOpacity="1"/>
+                            stopOpacity="1" />
                         <Stop
                             offset={this.state.offsets[1]}
                             stopColor={this.props.secondaryColor}
-                            stopOpacity="1"/>
+                            stopOpacity="1" />
                         <Stop
                             offset={this.state.offsets[2]}
                             stopColor={this.props.primaryColor}
-                            stopOpacity="1"/>
+                            stopOpacity="1" />
                     </LinearGradient>
@@ -140,3 +142,3 @@ <ClipPath id="clip">
                     fill="url(#grad)"
-                    clipPath="url(#clip)"/>
+                    clipPath="url(#clip)" />
             </AnimatedSvg>
@@ -156,2 +158,3 @@ );
     y2: PropTypes.string,
+    useNativeDriver: PropTypes.bool,
 }
@@ -169,2 +172,3 @@ SvgAnimatedLinearGradient.defaultProps = {
     offset: 1,
+    useNativeDriver: true,
 }

No alert changes

Improved metrics

Total package byte prevSize

3905707

increased by0.01%

Lines of code

157

increased by2.61%

Number of lines in readme file

104

increased by0.97%

No dependency changes