feat(components): Add retainOnceInViewport prop to Viewport.WithPlace…

…holder (#111)

packages/components/README.md

@@ -61,7 +61,7 @@ render() {
 
 ### With Placeholder
 
-A higher-order component that can be used to display a placeholder while the component is not in the viewport.
+A higher-order component that can be used to display a placeholder while the wrapped component is not in the viewport.
 This can improve user experience since it can serve as a mechanism for lazy loading.
 
 #### Usage
@@ -84,6 +84,7 @@ render() {
       // placeholder={Placeholder} // passing down a placeholder at render time
       source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
       preTriggerRatio={0.5}
+      retainOnceInViewport={true}
       style={{ width: 50, height: 50 }} />
   )
 }
@@ -94,3 +95,4 @@ render() {
 | Prop | Description | Default |
 |---|---|---|
 |**`placeholder`**| Useful for passing down a placeholder at render time. | `null` |
+|**`retainOnceInViewport`**| Whether to keep the wrapped component displayed once it enters the viewport. | `false` |

packages/components/src/viewport/withPlaceholder/index.js

@@ -9,10 +9,21 @@ export default (WrappedComponent, PlaceholderComponent) => {
       super(props, context)
     }
 
+    componentDidUpdate() {
+      if (this.props.inViewport && !this._hasEnteredViewport) {
+        this._hasEnteredViewport = true
+      }
+    }
+
     render() {
       if (this.props.inViewport) {
         return <WrappedComponent {...this.props} />
       }
+
+      if (this.props.retainOnceInViewport && this._hasEnteredViewport) {
+        return <WrappedComponent {...this.props} />
+      }
+
       return this.props.placeholder ? (
         <this.props.placeholder />
       ) : PlaceholderComponent ? (
@@ -23,6 +34,7 @@ export default (WrappedComponent, PlaceholderComponent) => {
     static propTypes = {
       inViewport: PropTypes.bool.isRequired,
       placeholder: PropTypes.func,
+      retainOnceInViewport: PropTypes.bool,
     }
 
     static displayName = `WithPlaceholder(${WrappedComponent.displayName ||