diff --git a/packages/components/README.md b/packages/components/README.md index 3358616..1226a11 100644 --- a/packages/components/README.md +++ b/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 diff --git a/packages/components/src/viewport/aware/index.js b/packages/components/src/viewport/aware/index.js index 7b04543..bcbede6 100644 --- a/packages/components/src/viewport/aware/index.js +++ b/packages/components/src/viewport/aware/index.js @@ -88,9 +88,12 @@ export default WrappedComponent => { render() { return ( (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 = {