Release 1.5.13

https://github.com/react-navigation/react-navigation/issues/3992

examples/NavigationPlayground/js/SimpleStack.js

@@ -17,7 +17,11 @@ type MyNavScreenProps = {
   banner: React.Node,
 };
 
-class MyBackButton extends React.Component<any, any> {
+type MyBackButtonProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class MyBackButton extends React.Component<MyBackButtonProps, any> {
   render() {
     return <Button onPress={this._navigateBack} title="Custom Back" />;
   }
@@ -142,7 +146,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
     const { navigation } = this.props;
     return (
       <MyNavScreen
-        banner={`${navigation.state.params.name}'s Photos`}
+        banner={`${navigation.getParam('name')}'s Photos`}
         navigation={navigation}
       />
     );
@@ -151,9 +155,9 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 
 const MyProfileScreen = ({ navigation }) => (
   <MyNavScreen
-    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${
-      navigation.state.params.name
-    }'s Profile`}
+    banner={`${
+      navigation.getParam('mode') === 'edit' ? 'Now Editing ' : ''
+    }${navigation.getParam('name')}'s Profile`}
     navigation={navigation}
   />
 );

flow/react-navigation.js

@@ -491,6 +491,7 @@ declare module 'react-navigation' {
       action?: NavigationNavigateAction
     ) => boolean,
     setParams: (newParams: NavigationParams) => boolean,
+    getParam: (paramName: string, fallback?: any) => any,
     addListener: (
       eventName: string,
       callback: NavigationEventCallback
@@ -721,6 +722,7 @@ declare module 'react-navigation' {
     INIT: 'Navigation/INIT',
     NAVIGATE: 'Navigation/NAVIGATE',
     RESET: 'Navigation/RESET',
+    REPLACE: 'Navigation/REPLACE',
     SET_PARAMS: 'Navigation/SET_PARAMS',
     URI: 'Navigation/URI',
     back: {
@@ -747,6 +749,17 @@ declare module 'react-navigation' {
       }): NavigationResetAction,
       toString: () => string,
     },
+    replace: {
+      (payload: {
+        routeName: string,
+        key: string,
+        newKey?: ?string,
+        params?: ?NavigationParams,
+        action?: ?NavigationNavigateAction,
+        immediate?: ?boolean,
+      }): NavigationReplaceAction,
+      toString: () => string,
+    },
     setParams: {
       (payload: {
         key: string,
@@ -1078,13 +1091,17 @@ declare module 'react-navigation' {
   };
   declare export var TabBarBottom: React$ComponentType<_TabBarBottomProps>;
 
-  declare type _NavigationInjectedProps = {
-    navigation: NavigationScreenProp<NavigationStateRoute>,
-  };
-  declare export function withNavigation<T: {}>(
-    Component: React$ComponentType<T & _NavigationInjectedProps>
-  ): React$ComponentType<T>;
-  declare export function withNavigationFocus<T: {}>(
-    Component: React$ComponentType<T & _NavigationInjectedProps>
-  ): React$ComponentType<T>;
+  declare export function withNavigation<Props: {}>(
+    Component: React$ComponentType<Props>
+  ): React$ComponentType<
+    $Diff<
+      Props,
+      {
+        navigation: NavigationScreenProp<NavigationStateRoute> | void,
+      }
+    >
+  >;
+  declare export function withNavigationFocus<Props: {}>(
+    Component: React$ComponentType<Props>
+  ): React$ComponentType<$Diff<Props, { isFocused: boolean | void }>>;
 }

package.json

@@ -1,14 +1,13 @@
 {
   "name": "react-navigation",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
     "url": "git@github.com:react-navigation/react-navigation.git",
     "type": "git"
   },
-  "author":
-    "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>",
+  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>",
   "license": "BSD-2-Clause",
   "scripts": {
     "start": "npm run ios",
@@ -22,7 +21,9 @@
     "format": "eslint --fix .",
     "precommit": "lint-staged"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
@@ -32,9 +33,9 @@
     "hoist-non-react-statics": "^2.2.0",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
-    "react-lifecycles-compat": "^1.0.2",
+    "react-lifecycles-compat": "^3.0.2",
     "react-native-drawer-layout-polyfill": "^1.3.2",
-    "react-native-safe-area-view": "^0.7.0",
+    "react-native-safe-area-view": "^0.9.0",
     "react-native-tab-view": "github:react-navigation/react-native-tab-view"
   },
   "devDependencies": {
@@ -64,13 +65,23 @@
     "notify": true,
     "preset": "react-native",
     "testRegex": "./src/.*\\-test\\.js$",
-    "setupFiles": ["<rootDir>/jest-setup.js"],
+    "setupFiles": [
+      "<rootDir>/jest-setup.js"
+    ],
     "coverageDirectory": "./coverage/",
     "collectCoverage": true,
-    "coverageReporters": ["lcov"],
-    "collectCoverageFrom": ["src/**/*.js"],
-    "coveragePathIgnorePatterns": ["jest-setup.js"],
-    "modulePathIgnorePatterns": ["examples"]
+    "coverageReporters": [
+      "lcov"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "jest-setup.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "examples"
+    ]
   },
   "lint-staged": {
     "*.js": [

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

@@ -143,7 +143,7 @@ exports[`TabNavigator renders successfully 1`] = `
                 },
                 false,
                 Object {
-                  "flexGrow": 1,
+                  "flex": 1,
                 },
               ]
             }
@@ -156,6 +156,7 @@ exports[`TabNavigator renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 1,
                   "position": "absolute",
                   "width": "100%",
@@ -170,6 +171,7 @@ exports[`TabNavigator renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 0,
                   "position": "absolute",
                   "width": "100%",

src/views/Drawer/DrawerSidebar.js

@@ -11,8 +11,9 @@ import invariant from '../../utils/invariant';
  */
 class DrawerSidebar extends React.PureComponent {
   _getScreenOptions = routeKey => {
+    const { drawerCloseRoute } = this.props;
     const DrawerScreen = this.props.router.getComponentForRouteName(
-      'DrawerClose'
+      drawerCloseRoute
     );
     invariant(
       DrawerScreen.router,
@@ -56,7 +57,8 @@ class DrawerSidebar extends React.PureComponent {
   };
 
   _onItemPress = ({ route, focused }) => {
-    this.props.navigation.navigate('DrawerClose');
+    const { drawerCloseRoute } = this.props;
+    this.props.navigation.navigate(drawerCloseRoute);
     if (!focused) {
       let subAction;
       // if the child screen is a StackRouter then always navigate to its first screen (see #1914)

src/views/Drawer/DrawerView.js

@@ -132,17 +132,24 @@ export default class DrawerView extends React.PureComponent {
     return navigationState;
   };
 
-  _renderNavigationView = () => (
-    <DrawerSidebar
-      screenProps={this.props.screenProps}
-      navigation={this._screenNavigationProp}
-      router={this.props.router}
-      contentComponent={this.props.contentComponent}
-      contentOptions={this.props.contentOptions}
-      drawerPosition={this.props.drawerPosition}
-      style={this.props.style}
-    />
-  );
+  _renderNavigationView = () => {
+    const { drawerOpenRoute, drawerCloseRoute, drawerToggleRoute } = this.props;
+
+    return (
+      <DrawerSidebar
+        screenProps={this.props.screenProps}
+        navigation={this._screenNavigationProp}
+        router={this.props.router}
+        contentComponent={this.props.contentComponent}
+        contentOptions={this.props.contentOptions}
+        drawerPosition={this.props.drawerPosition}
+        style={this.props.style}
+        drawerOpenRoute={drawerOpenRoute}
+        drawerCloseRoute={drawerCloseRoute}
+        drawerToggleRoute={drawerToggleRoute}
+      />
+    );
+  };
 
   render() {
     const DrawerScreen = this.props.router.getComponentForRouteName(

src/views/ResourceSavingSceneView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-import withLifecyclePolyfill from 'react-lifecycles-compat';
+import { polyfill } from 'react-lifecycles-compat';
 
 import SceneView from './SceneView';
 
@@ -77,4 +77,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withLifecyclePolyfill(ResourceSavingSceneView);
+export default polyfill(ResourceSavingSceneView);

src/views/TabView/TabBarBottom.js

@@ -137,7 +137,7 @@ class TabBarBottom extends React.PureComponent {
         maxTabBarItemWidth = flattenedTabStyle.width;
       } else if (
         typeof flattenedTabStyle.width === 'string' &&
-        flattenedTabStyle.endsWith('%')
+        flattenedTabStyle.width.endsWith('%')
       ) {
         const width = parseFloat(flattenedTabStyle.width);
         if (Number.isFinite(width)) {
@@ -147,7 +147,7 @@ class TabBarBottom extends React.PureComponent {
         maxTabBarItemWidth = flattenedTabStyle.maxWidth;
       } else if (
         typeof flattenedTabStyle.maxWidth === 'string' &&
-        flattenedTabStyle.endsWith('%')
+        flattenedTabStyle.width.endsWith('%')
       ) {
         const width = parseFloat(flattenedTabStyle.maxWidth);
         if (Number.isFinite(width)) {

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

@@ -89,7 +89,7 @@ exports[`TabBarBottom renders successfully 1`] = `
                 },
                 false,
                 Object {
-                  "flexGrow": 1,
+                  "flex": 1,
                 },
               ]
             }
@@ -102,6 +102,7 @@ exports[`TabBarBottom renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 1,
                   "position": "absolute",
                   "width": "100%",
@@ -116,6 +117,7 @@ exports[`TabBarBottom renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 0,
                   "position": "absolute",
                   "width": "100%",