createNavigationAwareScrollable.js

// @flow

import React from 'react';
import hoistStatics from 'hoist-non-react-statics';
import { withNavigation } from 'react-navigation';

import type { Subscription } from '../../types';

export default function createNavigationAwareScrollable(Component: any) {
  class ComponentWithStatusBar extends React.PureComponent<any> {
    static displayName = `NavigationAwareScrollable(${Component.displayName ||
      Component.name})`;

    _subscription: ?Subscription;
    _scrollRef = React.createRef();

    componentDidMount() {
      this._subscription = this.props.navigation.addListener('refocus', () => {
        const scrollableNode = this.getNode();
        if (this.props.navigation.isFocused() && scrollableNode !== null) {
          if (scrollableNode.scrollToTop != null) {
            scrollableNode.scrollToTop();
          } else if (scrollableNode.scrollTo != null) {
            scrollableNode.scrollTo({ y: 0 });
          }
        }
      });
    }

    getNode() {
      if (this._scrollRef.current === null) {
        return null;
      }
      // Could be an animated component
      return this._scrollRef.current.getNode != null
        ? this._scrollRef.current.getNode()
        : this._scrollRef.current;
    }

    componentWillUnmount() {
      if (this._subscription != null) {
        this._subscription.remove();
      }
    }

    render() {
      return <Component ref={this._scrollRef} {...this.props} />;
    }
  }

  return hoistStatics(withNavigation(ComponentWithStatusBar), Component);
}