Adding Fade Delay Pass Through w/ Examples

Author: SteffeyDev

FadeInView.js

@@ -12,13 +12,14 @@ class FadeInView extends Component {
 
   componentDidMount() {
     const { viewOpacity } = this.state;
-    const { onFadeComplete, duration = 500 } = this.props;
+    const { onFadeComplete, duration = 500, delay } = this.props;
 
     Animated.timing(
       viewOpacity,
       {
         toValue: 1,
         duration,
+        delay
       },
     ).start(onFadeComplete || (() => {}));
   }
@@ -38,6 +39,7 @@ class FadeInView extends Component {
 FadeInView.propTypes = {
   onFadeComplete: PropTypes.func,
   duration: PropTypes.number,
+  delay: PropTypes.number,
   style: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,

README.md

@@ -11,10 +11,15 @@ A function that is called when the fade animation completes
 ### `duration`
 The duration of the fade animation, **`500ms`** by default
 
+### `delay`
+The time to wait (in milliseconds) before the fade starts, **`0ms`** by default
+
 ### `style`
 Style to be given to the view
 
 ## Usage
+
+### Basic Usage
 ```javascript
 import FadeInView from 'react-native-fade-in-view';
 
@@ -28,3 +33,19 @@ const myFadeInComponent = () => (
   </FadeInView>
 );
 ```
+
+### Cascading List View
+```javascript
+import FadeInView from 'react-native-fade-in-view';
+
+// Assuming items is an array of components
+const myFadeInList = () => (
+  <ScrollView> 
+    {items.map((item, i) => (
+      <FadeInView key={i} delay={i * 20}>
+        {item}
+      </FadeInView>
+    ))}
+  </ScrollView>
+);
+```