diff --git a/README.md b/README.md index 607a039..ffed1e2 100644 --- a/README.md +++ b/README.md @@ -73,18 +73,19 @@ import Svg, {Circle, Rect, .... } from 'react-native-svg' ``` ### Props -| Prop | Type | Default | Description | -| -------------- | ------ | --------- | ----------------------------------------------------- | -| primaryColor | String | '#eeeeee' | Primary color, also background color | -| secondaryColor | String | '#dddddd' | Secondary color | -| duration | Number | 2000 | Animation duration in milliseconds | -| width | Number | 300 | Width of SVG | -| height | Number | 200 | Height of SVG | -| x1 | String | '0' | x of point star gradient, accept Number or Percentage | -| y1 | String | '0' | y of point star gradient, accept Number or Percentage | -| x2 | String | '100%' | x of point end gradient, accept Number or Percentage | -| y2 | String | '0' | y of point end gradient, accept Number or Percentage | -| offset | Number | 1 | Gradient offset value of animation | +| Prop | Type | Default | Description | +| --------------- | ------- | --------- | ----------------------------------------------------- | +| primaryColor | String | '#eeeeee' | Primary color, also background color | +| secondaryColor | String | '#dddddd' | Secondary color | +| duration | Number | 2000 | Animation duration in milliseconds | +| useNativeDriver | Boolean | true | Use native driver for animations | +| width | Number | 300 | Width of SVG | +| height | Number | 200 | Height of SVG | +| x1 | String | '0' | x of point star gradient, accept Number or Percentage | +| y1 | String | '0' | y of point star gradient, accept Number or Percentage | +| x2 | String | '100%' | x of point end gradient, accept Number or Percentage | +| y2 | String | '0' | y of point end gradient, accept Number or Percentage | +| offset | Number | 1 | Gradient offset value of animation | ## TODO - Write test diff --git a/src/index.js b/src/index.js index 8e18db4..58d06d7 100644 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,8 @@ export default class SvgAnimatedLinearGradient extends Component { offsets: [ '0.0001', '0.0002', '0.0003' // Avoid duplicate value cause error in Android ], - frequence: props.duration / 2 + frequence: props.duration / 2, + useNativeDriver: props.useNativeDriver } this._isMounted = false; this._animate = new Animated.Value(0) @@ -89,11 +90,13 @@ export default class SvgAnimatedLinearGradient extends Component { Animated.sequence([ Animated.timing(this._animate, { toValue: 1, - duration: this.state.frequence + duration: this.state.frequence, + useNativeDriver: this.state.useNativeDriver }), Animated.timing(this._animate, { toValue: 0, - duration: this.state.frequence + duration: this.state.frequence, + useNativeDriver: this.state.useNativeDriver }) ]).start((event) => { if (event.finished) { @@ -142,6 +145,7 @@ SvgAnimatedLinearGradient.propTypes = { primaryColor: PropTypes.string, secondaryColor: PropTypes.string, duration: PropTypes.number, + useNativeDriver: PropTypes.bool, width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), x1: PropTypes.string, @@ -153,6 +157,7 @@ SvgAnimatedLinearGradient.defaultProps = { primaryColor: '#eeeeee', secondaryColor: '#dddddd', duration: 2000, + useNativeDriver: true, width: 300, height: 200, x1: '0',