fix(components): Allow access to the inner reference of viewport-awar…

…e components (#121)

* Allow access to the inner reference of viewport-aware components

* Add sample usage of innerRef

packages/components/README.md

@@ -46,7 +46,8 @@ render() {
       source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
       preTriggerRatio={0.5}
       onViewportEnter={() => console.log('Entered!')}
-      onViewportLeave={() => console.log('Left!')} />
+      onViewportLeave={() => console.log('Left!')}
+      innerRef={ref => (this._ref = ref)} />
   )
 }
 ```
@@ -58,6 +59,7 @@ render() {
 |**`preTriggerRatio`**| Determines pre-triggering of `inViewport`. Useful for rendering components beforehand to improve user experience. A ratio of `0.5` means that the effective viewport will be twice the size of the real viewport. | `0` |
 |**`onViewportEnter`**| Invoked when the component enters the viewport. | `null` |
 |**`onViewportLeave`**| Invoked when the component leaves the viewport. | `null` |
+|**`innerRef`**| Allows access to the reference of the wrapped component. | `null` |
 
 ### With Placeholder
 

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

@@ -88,9 +88,12 @@ export default WrappedComponent => {
     render() {
       return (
         <WrappedComponent
-          ref={ref => (this.nodeHandle = findNodeHandle(ref))}
           {...this.props}
           inViewport={this.state.inViewport}
+          ref={ref => {
+            this.nodeHandle = findNodeHandle(ref)
+            this.props.innerRef && this.props.innerRef(ref)
+          }}
         />
       )
     }
@@ -99,6 +102,7 @@ export default WrappedComponent => {
       preTriggerRatio: PropTypes.number,
       onViewportEnter: PropTypes.func,
       onViewportLeave: PropTypes.func,
+      innerRef: PropTypes.func,
     }
 
     static contextTypes = {