diff --git a/README.md b/README.md index 2be10f7f..94482ee3 100755 --- a/README.md +++ b/README.md @@ -114,7 +114,7 @@ const MyLoader = () => ( | **`title?: string`**
Defaults to `Loading interface...` | React DOM only | It's used to describe what element it is. 
Use `''` (empty string) to remove. | | **`baseUrl?: string`**
Defaults to an empty string | React DOM only | Required if you're using `` document ``. 
This prop is common used as: 
`` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). | | **`speed?: number`**
Defaults to `1.2` | React DOM
React Native | Animation speed in seconds. | -| **`interval?: number`**
Defaults to `0.25` | React DOM only | Interval of time between runs of the animation, 
as a fraction of the animation speed. | +| **`interval?: number`**
Defaults to `0.25` | React DOM
React Native | Interval of time between runs of the animation, 
as a fraction of the animation speed. | | **`viewBox?: string`**
Defaults to `undefined` | React DOM
React Native | Use viewBox props to set a custom viewBox value,
for more information about how to use it,
read the article [How to Scale SVG](https://css-tricks.com/scale-svg/). | | **`gradientRatio?: number`**
Defaults to `1.2` | React DOM only | Width of the animated gradient as a fraction of the view box width. | | **`rtl?: boolean`**
Defaults to `false` | React DOM
React Native | Content right-to-left. | diff --git a/src/native/Svg.tsx b/src/native/Svg.tsx index 0c07066f..b60e77ea 100644 --- a/src/native/Svg.tsx +++ b/src/native/Svg.tsx @@ -20,6 +20,7 @@ class NativeSvg extends Component { foregroundColor: '#eee', rtl: false, speed: 1.2, + interval: 0.25, style: {}, } @@ -32,13 +33,15 @@ class NativeSvg extends Component { idGradient = `${this.fixedId}-animated-diff` setAnimation = () => { - // Turn in seconds to keep compatible with web one - const durInSeconds = this.props.speed * 1000 + // props.speed is in seconds as it is compatible with web + // convert to milliseconds + const durMs = this.props.speed * 1000 + const delay = durMs * this.props.interval Animated.timing(this.animatedValue, { toValue: 2, - delay: durInSeconds, - duration: durInSeconds, + delay: delay, + duration: durMs, useNativeDriver: true, }).start(() => { this.animatedValue.setValue(-1) diff --git a/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap index 078aada2..65dd0751 100644 --- a/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap +++ b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap @@ -3,6 +3,7 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `