Merge pull request #229 from NikolaIliev/master

feat(native/svg.tsx native/index.ts): implement 'interval' prop for RN

Author: danilowoz

README.md

@@ -114,7 +114,7 @@ const MyLoader = () => (
 | **`title?: string`** <br/> Defaults to `Loading interface...` | React DOM only             | It's used to describe what element it is. <br />Use `''` (empty string) to remove.                                                                                                                                                                                                                  |
 | **`baseUrl?: string`**<br /> Defaults to an empty string      | React DOM only             | Required if you're using `<base url="/" />` document `<head/>`. <br/>This prop is common used as: <br/>`<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |
 | **`speed?: number`** <br /> Defaults to `1.2`                 | React DOM<br/>React Native | Animation speed in seconds.                                                                                                                                                                                                                                                                         |
-| **`interval?: number`** <br /> Defaults to `0.25`             | React DOM only             | Interval of time between runs of the animation, <br/>as a fraction of the animation speed.                                                                                                                                                                                                          |
+| **`interval?: number`** <br /> Defaults to `0.25`             | React DOM<br/>React Native | Interval of time between runs of the animation, <br/>as a fraction of the animation speed.                                                                                                                                                                                                          |
 | **`viewBox?: string`** <br /> Defaults to `undefined`         | React DOM<br/>React Native | Use viewBox props to set a custom viewBox value, <br/>for more information about how to use it, <br/>read the article [How to Scale SVG](https://css-tricks.com/scale-svg/).                                                                                                                        |
 | **`gradientRatio?: number`** <br /> Defaults to `1.2`         | React DOM only             | Width of the animated gradient as a fraction of the view box width.                                                                                                                                                                                                                                 |
 | **`rtl?: boolean`** <br /> Defaults to `false`                | React DOM<br/>React Native | Content right-to-left.                                                                                                                                                                                                                                                                              |

src/native/Svg.tsx

@@ -20,6 +20,7 @@ class NativeSvg extends Component<IContentLoaderProps> {
     foregroundColor: '#eee',
     rtl: false,
     speed: 1.2,
+    interval: 0.25,
     style: {},
   }
 
@@ -32,13 +33,15 @@ class NativeSvg extends Component<IContentLoaderProps> {
   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)

src/native/__tests__/__snapshots__/snapshots.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
 <Svg
   height={124}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 476 124"
   width={476}
@@ -87,6 +88,7 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
 exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
 <Svg
   height={124}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 100 100"
   width={476}
@@ -171,6 +173,7 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
 exports[`ContentLoader snapshots renders correctly with viewBox defined and sizes defined too 1`] = `
 <Svg
   height={100}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 100 100"
   width={100}
@@ -255,6 +258,7 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
 exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
 <Svg
   height={124}
+  interval={0.25}
   style={Object {}}
   viewBox=""
   width={476}

src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`BulletListStyle renders correctly 1`] = `
 <Svg
   height={125}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 245 125"
   width={245}

src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`CodeStyle renders correctly 1`] = `
 <Svg
   height={84}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 340 84"
   width={340}

src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`FacebookStyle renders correctly 1`] = `
 <Svg
   height={124}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 476 124"
   width={476}

src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`InstagramStyle renders correctly 1`] = `
 <Svg
   height={460}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 400 460"
   width={400}

src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`ListStyle renders correctly 1`] = `
 <Svg
   height={110}
+  interval={0.25}
   style={Object {}}
   viewBox="0 0 400 110"
   width={400}

src/native/index.ts

@@ -8,6 +8,7 @@ export interface IContentLoaderProps extends SvgProps {
   foregroundColor?: string
   rtl?: boolean
   speed?: number
+  interval?: number
   uniqueKey?: string
 }