add withNavigationFocus HOC (#3512)

* add withNavigationFocus HOC

See:
- https://github.com/react-navigation/react-navigation/issues/51#issuecomment-276003658
- https://github.com/react-navigation/react-navigation/issues/51#issuecomment-278761705
- https://github.com/react-navigation/react-navigation/pull/3345#issuecomment-360260067

* typos

* remove unused import

* Add withNavigationFocus export

* add example TabsWithNavigationFocus

* add example TabsWithNavigationFocus

* withNavigationFocus: get navigation from context or props

* subs => subscriptions

* fix flow issues

src/react-navigation.js

@@ -88,4 +88,7 @@ module.exports = {
   get withNavigation() {
     return require('./views/withNavigation').default;
   },
+  get withNavigationFocus() {
+    return require('./views/withNavigationFocus').default;
+  },
 };

src/react-navigation.web.js

@@ -32,4 +32,7 @@ module.exports = {
   get withNavigation() {
     return require('./views/withNavigation').default;
   },
+  get withNavigationFocus() {
+    return require('./views/withNavigationFocus').default;
+  },
 };

src/views/withNavigationFocus.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import hoistStatics from 'hoist-non-react-statics';
+import invariant from '../utils/invariant';
+
+export default function withNavigationFocus(Component) {
+  class ComponentWithNavigationFocus extends React.Component {
+    static displayName = `withNavigationFocus(${Component.displayName ||
+      Component.name})`;
+
+    static contextTypes = {
+      navigation: propTypes.object.isRequired,
+    };
+
+    state = {
+      isFocused: false,
+    };
+
+    componentDidMount() {
+      const navigation = this.getNavigation();
+      this.subscriptions = [
+        navigation.addListener('didFocus', () =>
+          this.setState({ isFocused: true })
+        ),
+        navigation.addListener('willBlur', () =>
+          this.setState({ isFocused: false })
+        ),
+      ];
+    }
+
+    componentWillUnmount() {
+      this.subscriptions.forEach(sub => sub.remove());
+    }
+
+    getNavigation = () => {
+      const navigation = this.props.navigation || this.context.navigation;
+      invariant(
+        !!navigation,
+        'withNavigationFocus can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context.'
+      );
+      return navigation;
+    };
+
+    render() {
+      return (
+        <Component
+          {...this.props}
+          isFocused={this.state.isFocused}
+          ref={this.props.onRef}
+        />
+      );
+    }
+  }
+
+  return hoistStatics(ComponentWithNavigationFocus, Component);
+}