Release 1.5.2

Fixes #3709

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

examples/ReduxExample/package.json

@@ -26,7 +26,7 @@
     "react": "16.2.0",
     "react-native": "^0.52.0",
     "react-navigation": "link:../..",
-    "react-navigation-redux-helpers": "^1.0.0",
+    "react-navigation-redux-helpers": "^1.0.3",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2"
   },

examples/ReduxExample/src/navigators/AppNavigator.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { addNavigationHelpers, StackNavigator } from 'react-navigation';
+import { initializeListeners } from 'react-navigation-redux-helpers';
 
 import LoginScreen from '../components/LoginScreen';
 import MainScreen from '../components/MainScreen';
@@ -20,6 +21,10 @@ class AppWithNavigationState extends React.Component {
     nav: PropTypes.object.isRequired,
   };
 
+  componentDidMount() {
+    initializeListeners('root', this.props.nav);
+  }
+
   render() {
     const { dispatch, nav } = this.props;
     return (

flow/react-navigation.js

@@ -295,7 +295,6 @@ declare module 'react-navigation' {
       } & NavigationScreenRouteConfig);
 
   declare export type NavigationScreenRouteConfig =
-    | NavigationComponent
     | {
         screen: NavigationComponent,
       }
@@ -361,6 +360,7 @@ declare module 'react-navigation' {
     initialRouteParams?: NavigationParams,
     paths?: NavigationPathsConfig,
     navigationOptions?: NavigationScreenConfig<*>,
+    initialRouteKey?: string,
   |};
 
   declare export type NavigationStackViewConfig = {|
@@ -470,7 +470,7 @@ declare module 'react-navigation' {
     type: EventType,
     action: NavigationAction,
     state: NavigationState,
-    lastState: NavigationState,
+    lastState: ?NavigationState,
   };
 
   declare export type NavigationEventCallback = (
@@ -553,7 +553,7 @@ declare module 'react-navigation' {
 
   declare export type NavigationContainerProps<S: {}, O: {}> = $Shape<{
     uriPrefix?: string | RegExp,
-    onNavigationStateChange?: (
+    onNavigationStateChange?: ?(
       NavigationState,
       NavigationState,
       NavigationAction
@@ -724,7 +724,7 @@ declare module 'react-navigation' {
     SET_PARAMS: 'Navigation/SET_PARAMS',
     URI: 'Navigation/URI',
     back: {
-      (payload: { key?: ?string }): NavigationBackAction,
+      (payload?: { key?: ?string }): NavigationBackAction,
       toString: () => string,
     },
     init: {
@@ -925,12 +925,14 @@ declare module 'react-navigation' {
       vertical?: _SafeAreaViewForceInsetValue,
       horizontal?: _SafeAreaViewForceInsetValue,
     },
-    children: React$Node,
+    children?: React$Node,
     style?: AnimatedViewStyleProp,
   };
   declare export var SafeAreaView: React$ComponentType<_SafeAreaViewProps>;
 
-  declare export var Header: React$ComponentType<HeaderProps>;
+  declare export var Header: React$ComponentType<HeaderProps> & {
+    HEIGHT: number,
+  };
 
   declare type _HeaderTitleProps = {
     children: React$Node,
@@ -995,6 +997,8 @@ declare module 'react-navigation' {
     itemsContainerStyle?: ViewStyleProp,
     itemStyle?: ViewStyleProp,
     labelStyle?: TextStyleProp,
+    activeLabelStyle?: TextStyleProp,
+    inactiveLabelStyle?: TextStyleProp,
     iconContainerStyle?: ViewStyleProp,
     drawerPosition: 'left' | 'right',
   };
@@ -1075,7 +1079,7 @@ declare module 'react-navigation' {
   declare export var TabBarBottom: React$ComponentType<_TabBarBottomProps>;
 
   declare type _NavigationInjectedProps = {
-    navigation: NavigationScreenProp<NavigationState>,
+    navigation: NavigationScreenProp<NavigationStateRoute>,
   };
   declare export function withNavigation<T: {}>(
     Component: React$ComponentType<T & _NavigationInjectedProps>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.3.2",
+  "version": "1.5.2",
   "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/navigators/StackNavigator.js

@@ -11,6 +11,7 @@ import NavigationActions from '../NavigationActions';
 
 export default (routeConfigMap, stackConfig = {}) => {
   const {
+    initialRouteKey,
     initialRouteName,
     initialRouteParams,
     paths,
@@ -25,6 +26,7 @@ export default (routeConfigMap, stackConfig = {}) => {
   } = stackConfig;
 
   const stackRouterConfig = {
+    initialRouteKey,
     initialRouteName,
     initialRouteParams,
     paths,
@@ -47,7 +49,7 @@ export default (routeConfigMap, stackConfig = {}) => {
         onTransitionEnd={(lastTransition, transition) => {
           const { state, dispatch } = props.navigation;
           dispatch(NavigationActions.completeTransition({ key: state.key }));
-          onTransitionEnd && onTransitionEnd();
+          onTransitionEnd && onTransitionEnd(lastTransition, transition);
         }}
       />
     )

src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap

@@ -224,6 +224,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                             "color": "#2196f3",
                           },
                           undefined,
+                          undefined,
                         ]
                       }
                     >

src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap

@@ -147,13 +147,12 @@ exports[`TabNavigator renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 1,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />
@@ -162,13 +161,12 @@ exports[`TabNavigator renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 0,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />

src/routers/StackRouter.js

@@ -92,11 +92,12 @@ export default (routeConfigs, stackConfig = {}) => {
       ...(action.params || {}),
       ...(initialRouteParams || {}),
     };
+    const { initialRouteKey } = stackConfig;
     route = {
       ...route,
       ...(params ? { params } : {}),
       routeName: initialRouteName,
-      key: action.key || generateKey(),
+      key: action.key || (initialRouteKey || generateKey()),
     };
     return {
       key: 'StackRouterRoot',

src/routers/__tests__/StackRouter-test.js

@@ -576,6 +576,23 @@ describe('StackRouter', () => {
     expect(state2.routes[1].routes[1].routes[1].routeName).toEqual('Corge');
   });
 
+  test('Navigate to initial screen is possible', () => {
+    const TestRouter = StackRouter(
+      {
+        foo: { screen: () => <div /> },
+        bar: { screen: () => <div /> },
+      },
+      { initialRouteKey: 'foo' }
+    );
+    const initState = TestRouter.getStateForAction(NavigationActions.init());
+    const pushedState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'foo', key: 'foo' }),
+      initState
+    );
+    expect(pushedState.index).toEqual(0);
+    expect(pushedState.routes[0].routeName).toEqual('foo');
+  });
+
   test('Navigate with key is idempotent', () => {
     const TestRouter = StackRouter({
       foo: { screen: () => <div /> },

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/DrawerNavigatorItems.js

@@ -21,6 +21,8 @@ const DrawerNavigatorItems = ({
   itemsContainerStyle,
   itemStyle,
   labelStyle,
+  activeLabelStyle,
+  inactiveLabelStyle,
   iconContainerStyle,
   drawerPosition,
 }) => (
@@ -34,6 +36,7 @@ const DrawerNavigatorItems = ({
       const scene = { route, index, focused, tintColor: color };
       const icon = renderIcon(scene);
       const label = getLabel(scene);
+      const extraLabelStyle = focused ? activeLabelStyle : inactiveLabelStyle;
       return (
         <TouchableItem
           key={route.key}
@@ -63,7 +66,9 @@ const DrawerNavigatorItems = ({
                 </View>
               ) : null}
               {typeof label === 'string' ? (
-                <Text style={[styles.label, { color }, labelStyle]}>
+                <Text
+                  style={[styles.label, { color }, labelStyle, extraLabelStyle]}
+                >
                   {label}
                 </Text>
               ) : (

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/TabView/TabBarBottom.js

@@ -100,6 +100,7 @@ class TabBarBottom extends React.PureComponent {
     if (showIcon === false) {
       return null;
     }
+
     return (
       <TabBarIcon
         position={position}
@@ -108,7 +109,11 @@ class TabBarBottom extends React.PureComponent {
         inactiveTintColor={inactiveTintColor}
         renderIcon={renderIcon}
         scene={scene}
-        style={showLabel && this._shouldUseHorizontalTabs() ? {} : styles.icon}
+        style={
+          showLabel && this._shouldUseHorizontalTabs()
+            ? styles.horizontalIcon
+            : styles.icon
+        }
       />
     );
   };
@@ -286,6 +291,9 @@ class TabBarBottom extends React.PureComponent {
   }
 }
 
+const DEFAULT_HEIGHT = 49;
+const COMPACT_HEIGHT = 29;
+
 const styles = StyleSheet.create({
   tabBar: {
     backgroundColor: '#F7F7F7', // Default background color in iOS 10
@@ -294,10 +302,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   tabBarCompact: {
-    height: 29,
+    height: COMPACT_HEIGHT,
   },
   tabBarRegular: {
-    height: 49,
+    height: DEFAULT_HEIGHT,
   },
   tab: {
     flex: 1,
@@ -314,6 +322,9 @@ const styles = StyleSheet.create({
   icon: {
     flexGrow: 1,
   },
+  horizontalIcon: {
+    height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
+  },
   label: {
     textAlign: 'center',
     backgroundColor: 'transparent',

src/views/TabView/TabBarIcon.js

@@ -23,6 +23,7 @@ export default class TabBarIcon extends React.PureComponent {
       inputRange,
       outputRange: inputRange.map(i => (i === index ? 0 : 1)),
     });
+
     // We render the icon twice at the same position on top of each other:
     // active and inactive one, so we can fade between them.
     return (
@@ -53,12 +54,11 @@ const styles = StyleSheet.create({
     // We render the icon twice at the same position on top of each other:
     // active and inactive one, so we can fade between them:
     // Cover the whole iconContainer:
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
     alignItems: 'center',
+    alignSelf: 'center',
+    height: '100%',
     justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
   },
 });

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

@@ -93,13 +93,12 @@ exports[`TabBarBottom renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 1,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />
@@ -108,13 +107,12 @@ exports[`TabBarBottom renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 0,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />
@@ -248,6 +246,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(route),
+          addListener: this._childEventSubscribers[route.key],
         });
       });
     };