Add isFocused helper to navigation and fix withNavigationFocus

packages/react-navigation/examples/NavigationPlayground/js/App.js

@@ -109,10 +109,10 @@ const ExampleInfo = {
     name: 'Animated Tabs Example',
     description: 'Tab transitions have custom animations',
   },
-  // TabsWithNavigationFocus: {
-  //   name: 'withNavigationFocus',
-  //   description: 'Receive the focus prop to know when a screen is focused',
-  // },
+  TabsWithNavigationFocus: {
+    name: 'withNavigationFocus',
+    description: 'Receive the focus prop to know when a screen is focused',
+  },
 };
 
 const ExampleRoutes = {
@@ -139,8 +139,8 @@ const ExampleRoutes = {
     screen: SimpleTabs,
     path: 'settings',
   },
-  TabAnimations: TabAnimations,
-  // TabsWithNavigationFocus: TabsWithNavigationFocus,
+  TabAnimations,
+  TabsWithNavigationFocus,
 };
 
 type State = {

packages/react-navigation/examples/NavigationPlayground/js/TabsWithNavigationFocus.js

@@ -3,40 +3,75 @@
  */
 
 import React from 'react';
-import { SafeAreaView, Text } from 'react-native';
+import { Button, SafeAreaView, Text } from 'react-native';
 import { TabNavigator, withNavigationFocus } from 'react-navigation';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import SampleText from './SampleText';
 
-const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
-  const TabScreen = ({ isFocused }) => (
-    <SafeAreaView
-      forceInset={{ horizontal: 'always', top: 'always' }}
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Text style={{ fontWeight: '700', fontSize: 16, marginBottom: 5 }}>
-        {'Tab ' + name.toLowerCase()}
+class Child extends React.Component<any, any> {
+  render() {
+    return (
+      <Text style={{ color: this.props.isFocused ? 'green' : 'maroon' }}>
+        {this.props.isFocused
+          ? 'I know that my parent is focused!'
+          : 'My parent is not focused! :O'}
       </Text>
-      <Text>{'props.isFocused: ' + (isFocused ? ' true' : 'false')}</Text>
-    </SafeAreaView>
-  );
+    );
+  }
+}
 
-  TabScreen.navigationOptions = {
-    tabBarLabel: name,
-    tabBarIcon: ({ tintColor, focused }) => (
-      <MaterialCommunityIcons
-        name={focused ? focusedIcon : icon}
-        size={26}
-        style={{ color: focused ? tintColor : '#ccc' }}
-      />
-    ),
-  };
+const ChildWithNavigationFocus = withNavigationFocus(Child);
 
+const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
+  class TabScreen extends React.Component<any, any> {
+    static navigationOptions = {
+      tabBarLabel: name,
+      tabBarIcon: ({ tintColor, focused }) => (
+        <MaterialCommunityIcons
+          name={focused ? focusedIcon : icon}
+          size={26}
+          style={{ color: focused ? tintColor : '#ccc' }}
+        />
+      ),
+    };
+
+    state = { showChild: false };
+
+    render() {
+      const { isFocused } = this.props;
+
+      return (
+        <SafeAreaView
+          forceInset={{ horizontal: 'always', top: 'always' }}
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text style={{ fontWeight: '700', fontSize: 16, marginBottom: 5 }}>
+            {'Tab ' + name.toLowerCase()}
+          </Text>
+          <Text style={{ marginBottom: 20 }}>
+            {'props.isFocused: ' + (isFocused ? ' true' : 'false')}
+          </Text>
+          {this.state.showChild ? (
+            <ChildWithNavigationFocus />
+          ) : (
+            <Button
+              title="Press me"
+              onPress={() => this.setState({ showChild: true })}
+            />
+          )}
+          <Button
+            onPress={() => this.props.navigation.goBack(null)}
+            title="Back to other examples"
+          />
+        </SafeAreaView>
+      );
+    }
+  }
   return withNavigationFocus(TabScreen);
 };
 

packages/react-navigation/src/navigators/createNavigator.js

@@ -26,6 +26,12 @@ function createNavigator(NavigatorView, router, navigationConfig) {
       Object.values(this.childEventSubscribers).map(s => s.removeAll());
     }
 
+    _isRouteFocused = route => () => {
+      const { state } = this.props.navigation;
+      const focusedRoute = state.routes[state.index];
+      return route === focusedRoute;
+    };
+
     render() {
       const { navigation, screenProps } = this.props;
       const { dispatch, state, addListener } = navigation;
@@ -47,6 +53,7 @@ function createNavigator(NavigatorView, router, navigationConfig) {
           dispatch,
           state: route,
           addListener: this.childEventSubscribers[route.key].addListener,
+          isFocused: this._isRouteFocused.bind(this, route),
         });
         const options = router.getScreenOptions(childNavigation, screenProps);
         descriptors[route.key] = {

packages/react-navigation/src/views/withNavigationFocus.js

@@ -12,9 +12,13 @@ export default function withNavigationFocus(Component) {
       navigation: propTypes.object.isRequired,
     };
 
-    state = {
-      isFocused: false,
-    };
+    constructor(props, context) {
+      super();
+
+      this.state = {
+        isFocused: this.getNavigation(props, context).isFocused(),
+      };
+    }
 
     componentDidMount() {
       const navigation = this.getNavigation();
@@ -32,8 +36,8 @@ export default function withNavigationFocus(Component) {
       this.subscriptions.forEach(sub => sub.remove());
     }
 
-    getNavigation = () => {
-      const navigation = this.props.navigation || this.context.navigation;
+    getNavigation = (props = this.props, context = this.context) => {
+      const navigation = props.navigation || 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.'