diff --git a/FadeInView.js b/FadeInView.js index 0a71bbb..f1f4401 100644 --- a/FadeInView.js +++ b/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, diff --git a/README.md b/README.md index 53a1c6a..0ce2bc8 100644 --- a/README.md +++ b/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 = () => ( ); ``` + +### Cascading List View +```javascript +import FadeInView from 'react-native-fade-in-view'; + +// Assuming items is an array of components +const myFadeInList = () => ( + + {items.map((item, i) => ( + + {item} + + ))} + +); +```