Release 1.4.0

* Add isFocused helper to navigation and fix withNavigationFocus accordingly

* Fix snapshots

* Make flow pass on TabsWithNavigationFocus example

examples/NavigationPlayground/js/App.js

@@ -114,10 +114,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 = {
@@ -146,7 +146,7 @@ const ExampleRoutes = {
     path: 'settings',
   },
   TabAnimations,
-  // TabsWithNavigationFocus: TabsWithNavigationFocus,
+  TabsWithNavigationFocus,
 };
 
 type State = {

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);
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {

src/getChildEventSubscriber.js

@@ -4,6 +4,7 @@
  * Based on the 'action' events that get fired for this navigation state, this utility will fire
  * focus and blur events for this child
  */
+
 export default function getChildEventSubscriber(addListener, key) {
   const actionSubscribers = new Set();
   const willFocusSubscribers = new Set();

src/routers/__tests__/__snapshots__/validateRouteConfigMap-test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validateRouteConfigMap Fails if both screen and getScreen are defined 1`] = `"Route 'Home' should declare a screen or a getScreen, not both."`;
+
+exports[`validateRouteConfigMap Fails on bad object 1`] = `
+"The component for route 'Home' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+Home: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+Home: MyNavigator,
+}"
+`;
+
+exports[`validateRouteConfigMap Fails on empty bare screen 1`] = `
+"The component for route 'Home' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+Home: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+Home: MyNavigator,
+}"
+`;
+
+exports[`validateRouteConfigMap Fails on empty config 1`] = `"Please specify at least one route when configuring a navigator."`;

src/routers/__tests__/validateRouteConfigMap-test.js

@@ -13,9 +13,19 @@ ProfileNavigator.router = StackRouter({
 });
 
 describe('validateRouteConfigMap', () => {
+  test('Fails on empty bare screen', () => {
+    const invalidMap = {
+      Home: undefined,
+    };
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
+  });
   test('Fails on empty config', () => {
     const invalidMap = {};
-    expect(() => validateRouteConfigMap(invalidMap)).toThrow();
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
   });
   test('Fails on bad object', () => {
     const invalidMap = {
@@ -23,7 +33,9 @@ describe('validateRouteConfigMap', () => {
         foo: 'bar',
       },
     };
-    expect(() => validateRouteConfigMap(invalidMap)).toThrow();
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
   });
   test('Fails if both screen and getScreen are defined', () => {
     const invalidMap = {
@@ -32,15 +44,17 @@ describe('validateRouteConfigMap', () => {
         getScreen: () => ListScreen,
       },
     };
-    expect(() => validateRouteConfigMap(invalidMap)).toThrow();
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
   });
   test('Succeeds on a valid config', () => {
-    const invalidMap = {
+    const validMap = {
       Home: {
         screen: ProfileNavigator,
       },
       Chat: ListScreen,
     };
-    validateRouteConfigMap(invalidMap);
+    validateRouteConfigMap(validMap);
   });
 });

src/routers/validateRouteConfigMap.js

@@ -13,16 +13,13 @@ function validateRouteConfigMap(routeConfigs) {
 
   routeNames.forEach(routeName => {
     const routeConfig = routeConfigs[routeName];
-
-    const screenComponent = routeConfig.screen
-      ? routeConfig.screen
-      : routeConfig;
+    const screenComponent = getScreenComponent(routeConfig);
 
     if (
-      screenComponent &&
-      typeof screenComponent !== 'function' &&
-      typeof screenComponent !== 'string' &&
-      !routeConfig.getScreen
+      !screenComponent ||
+      (typeof screenComponent !== 'function' &&
+        typeof screenComponent !== 'string' &&
+        !routeConfig.getScreen)
     ) {
       throw new Error(
         `The component for route '${routeName}' must be a ` +
@@ -48,4 +45,12 @@ function validateRouteConfigMap(routeConfigs) {
   });
 }
 
+function getScreenComponent(routeConfig) {
+  if (!routeConfig) {
+    return null;
+  }
+
+  return routeConfig.screen ? routeConfig.screen : routeConfig;
+}
+
 export default validateRouteConfigMap;

src/views/CardStack/CardStack.js

@@ -82,6 +82,8 @@ class CardStack extends React.Component {
 
   _screenDetails = {};
 
+  _childEventSubscribers = {};
+
   componentWillReceiveProps(props) {
     if (props.screenProps !== this.props.screenProps) {
       this._screenDetails = {};
@@ -96,17 +98,39 @@ class CardStack extends React.Component {
     });
   }
 
+  componentDidUpdate() {
+    const activeKeys = this.props.transitionProps.navigation.state.routes.map(
+      route => route.key
+    );
+    Object.keys(this._childEventSubscribers).forEach(key => {
+      if (!activeKeys.includes(key)) {
+        delete this._childEventSubscribers[key];
+      }
+    });
+  }
+
+  _isRouteFocused = route => {
+    const { state } = this.props.navigation;
+    const focusedRoute = state.routes[state.index];
+    return route === focusedRoute;
+  };
+
   _getScreenDetails = scene => {
     const { screenProps, transitionProps: { navigation }, router } = this.props;
     let screenDetails = this._screenDetails[scene.key];
     if (!screenDetails || screenDetails.state !== scene.route) {
+      if (!this._childEventSubscribers[scene.route.key]) {
+        this._childEventSubscribers[scene.route.key] = getChildEventSubscriber(
+          navigation.addListener,
+          scene.route.key
+        );
+      }
+
       const screenNavigation = addNavigationHelpers({
         dispatch: navigation.dispatch,
         state: scene.route,
-        addListener: getChildEventSubscriber(
-          navigation.addListener,
-          scene.route.key
-        ),
+        isFocused: this._isRouteFocused.bind(this, scene.route),
+        addListener: this._childEventSubscribers[scene.route.key],
       });
       screenDetails = {
         state: scene.route,

src/views/Drawer/DrawerView.js

@@ -17,6 +17,8 @@ export default class DrawerView extends React.PureComponent {
         : this.props.drawerWidth,
   };
 
+  _childEventSubscribers = {};
+
   componentWillMount() {
     this._updateScreenNavigation(this.props.navigation);
 
@@ -27,6 +29,17 @@ export default class DrawerView extends React.PureComponent {
     Dimensions.removeEventListener('change', this._updateWidth);
   }
 
+  componentDidUpdate() {
+    const activeKeys = this.props.navigation.state.routes.map(
+      route => route.key
+    );
+    Object.keys(this._childEventSubscribers).forEach(key => {
+      if (!activeKeys.includes(key)) {
+        delete this._childEventSubscribers[key];
+      }
+    });
+  }
+
   componentWillReceiveProps(nextProps) {
     if (
       this.props.navigation.state.index !== nextProps.navigation.state.index
@@ -68,6 +81,12 @@ export default class DrawerView extends React.PureComponent {
     }
   };
 
+  _isRouteFocused = route => () => {
+    const { state } = this.props.navigation;
+    const focusedRoute = state.routes[state.index];
+    return route === focusedRoute;
+  };
+
   _updateScreenNavigation = navigation => {
     const { drawerCloseRoute } = this.props;
     const navigationState = navigation.state.routes.find(
@@ -79,13 +98,18 @@ export default class DrawerView extends React.PureComponent {
     ) {
       return;
     }
+
+    if (!this._childEventSubscribers[navigationState.key]) {
+      this._childEventSubscribers[
+        navigationState.key
+      ] = getChildEventSubscriber(navigation.addListener, navigationState.key);
+    }
+
     this._screenNavigationProp = addNavigationHelpers({
       dispatch: navigation.dispatch,
       state: navigationState,
-      addListener: getChildEventSubscriber(
-        navigation.addListener,
-        navigationState.key
-      ),
+      isFocused: this._isRouteFocused.bind(this, navigationState),
+      addListener: this._childEventSubscribers[navigationState.key],
     });
   };
 

src/views/SwitchView/SwitchView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import SceneView from '../SceneView';
 import withCachedChildNavigation from '../../withCachedChildNavigation';
 
 class SwitchContainer extends React.Component {
@@ -14,7 +15,11 @@ class SwitchContainer extends React.Component {
     );
 
     return (
-      <ChildComponent navigation={childNavigation} screenProps={screenProps} />
+      <SceneView
+        component={ChildComponent}
+        navigation={childNavigation}
+        screenProps={screenProps}
+      />
     );
   }
 }

src/views/__tests__/__snapshots__/TabView-test.js.snap

@@ -248,6 +248,7 @@ exports[`TabBarBottom renders successfully 1`] = `
                   "dispatch": undefined,
                   "getParam": [Function],
                   "goBack": [Function],
+                  "isFocused": [Function],
                   "navigate": [Function],
                   "pop": [Function],
                   "popToTop": [Function],

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.'

src/withCachedChildNavigation.js

@@ -10,6 +10,8 @@ export default function withCachedChildNavigation(Comp) {
   return class extends React.PureComponent {
     static displayName = `withCachedChildNavigation(${displayName})`;
 
+    _childEventSubscribers = {};
+
     componentWillMount() {
       this._updateNavigationProps(this.props.navigation);
     }
@@ -18,6 +20,23 @@ export default function withCachedChildNavigation(Comp) {
       this._updateNavigationProps(nextProps.navigation);
     }
 
+    componentDidUpdate() {
+      const activeKeys = this.props.navigation.state.routes.map(
+        route => route.key
+      );
+      Object.keys(this._childEventSubscribers).forEach(key => {
+        if (!activeKeys.includes(key)) {
+          delete this._childEventSubscribers[key];
+        }
+      });
+    }
+
+    _isRouteFocused = route => () => {
+      const { state } = this.props.navigation;
+      const focusedRoute = state.routes[state.index];
+      return route === focusedRoute;
+    };
+
     _updateNavigationProps = navigation => {
       // Update props for each child route
       if (!this._childNavigationProps) {
@@ -28,13 +47,19 @@ export default function withCachedChildNavigation(Comp) {
         if (childNavigation && childNavigation.state === route) {
           return;
         }
+
+        if (!this._childEventSubscribers[route.key]) {
+          this._childEventSubscribers[route.key] = getChildEventSubscriber(
+            navigation.addListener,
+            route.key
+          );
+        }
+
         this._childNavigationProps[route.key] = addNavigationHelpers({
           dispatch: navigation.dispatch,
           state: route,
-          addListener: getChildEventSubscriber(
-            navigation.addListener,
-            route.key
-          ),
+          isFocused: this._isRouteFocused.bind(this, route),
+          addListener: this._childEventSubscribers[route.key],
         });
       });
     };