chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.7
 - @react-navigation/drawer@5.0.0-alpha.8
 - @react-navigation/example@5.0.0-alpha.4
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.7
 - @react-navigation/material-top-tabs@5.0.0-alpha.7
 - @react-navigation/routers@5.0.0-alpha.7
 - @react-navigation/stack@5.0.0-alpha.10

README.md

@@ -1,5 +1,9 @@
 # Rethinking Navigation
 
+[![Build Status][build-badge]][build]
+[![Code Coverage][coverage-badge]][coverage]
+[![MIT License][license-badge]][license]
+
 An exploration of a component-first API for React Navigation for building more dynamic navigation solutions.
 
 ## Considerations
@@ -530,3 +534,12 @@ yarn lerna publish
 ```
 
 This will automatically bump the version and publish the packages. It'll also publish the changelogs on GitHub for each package.
+
+<!-- badges -->
+
+[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/navigation-ex/master.svg?style=flat-square
+[build]: https://circleci.com/gh/react-navigation/navigation-ex
+[coverage-badge]: https://img.shields.io/codecov/c/github/react-navigation/navigation-ex.svg?style=flat-square
+[coverage]: https://codecov.io/github/react-navigation/navigation-ex
+[license-badge]: https://img.shields.io/npm/l/@react-navigation/core.svg?style=flat-square
+[license]: https://opensource.org/licenses/MIT

package.json

@@ -64,5 +64,11 @@
       "@react-navigation/([^/]+)": "<rootDir>/packages/$1/src"
     }
   },
+  "prettier": {
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
   "name": "react-navigation"
 }

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.6...@react-navigation/bottom-tabs@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.5...@react-navigation/bottom-tabs@5.0.0-alpha.6) (2019-08-29)
+
+
+### Bug Fixes
+
+* allow making params optional. fixes [#80](https://github.com/react-navigation/navigation-ex/issues/80) ([a9d4813](https://github.com/react-navigation/navigation-ex/commit/a9d4813))
+* types path ([#75](https://github.com/react-navigation/navigation-ex/issues/75)) ([b4a5c3c](https://github.com/react-navigation/navigation-ex/commit/b4a5c3c))
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.4...@react-navigation/bottom-tabs@5.0.0-alpha.5) (2019-08-28)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.3...@react-navigation/bottom-tabs@5.0.0-alpha.4) (2019-08-27)
 
 

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/bottom-tabssrc/index.d.ts",
+  "types": "lib/typescript/bottom-tabs/src/index.d.ts",
   "files": [
     "src",
     "lib"
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.4",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/bottom-tabs/src/types.tsx

@@ -53,8 +53,8 @@ export type BottomTabNavigationProp<
    * @param [params] Params object for the route.
    */
   jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends void
-      ? [RouteName]
+    ...args: ParamList[RouteName] extends (undefined | any)
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 };

packages/core/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.4...@react-navigation/core@5.0.0-alpha.5) (2019-08-30)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.3...@react-navigation/core@5.0.0-alpha.4) (2019-08-29)
+
+
+### Bug Fixes
+
+* allow making params optional. fixes [#80](https://github.com/react-navigation/navigation-ex/issues/80) ([a9d4813](https://github.com/react-navigation/navigation-ex/commit/a9d4813))
+
+
+### Features
+
+* export NavigationContext ([9245c79](https://github.com/react-navigation/navigation-ex/commit/9245c79))
+* handle navigating with both with both key and name ([#83](https://github.com/react-navigation/navigation-ex/issues/83)) ([6b75cba](https://github.com/react-navigation/navigation-ex/commit/6b75cba))
+
+
+
+
+
 # [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.2...@react-navigation/core@5.0.0-alpha.3) (2019-08-27)
 
 

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.5",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/core/src/CommonActions.tsx

@@ -10,7 +10,8 @@ export type Action =
       type: 'NAVIGATE';
       payload:
         | { name: string; key?: undefined; params?: object }
-        | { key: string; name?: undefined; params?: object };
+        | { key: string; name?: undefined; params?: object }
+        | { key: string; name: string; params?: object };
       source?: string;
       target?: string;
     }
@@ -38,7 +39,10 @@ export function goBack(): Action {
 }
 
 export function navigate(
-  route: { key: string; params?: object } | { name: string; params?: object }
+  route:
+    | { key: string; params?: object }
+    | { name: string; params?: object }
+    | { name: string; key: string; params?: object }
 ): Action;
 export function navigate(name: string, params?: object): Action;
 export function navigate(...args: any): Action {
@@ -47,12 +51,9 @@ export function navigate(...args: any): Action {
   } else {
     const payload = args[0];
 
-    if (
-      (payload.hasOwnProperty('key') && payload.hasOwnProperty('name')) ||
-      (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name'))
-    ) {
+    if (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name')) {
       throw new Error(
-        'While calling navigate with an object as the argument, you need to specify either name or key'
+        'While calling navigate with an object as the argument, you need to specify name or key'
       );
     }
 

packages/core/src/__tests__/CommonActions.test.tsx

@@ -7,42 +7,7 @@ import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
 
 beforeEach(() => (MockRouterKey.current = 0));
 
-it('throws if NAVIGATE dispatched with both key and name', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
-
-    return descriptors[state.routes[state.index].key].render();
-  };
-
-  const FooScreen = (props: any) => {
-    React.useEffect(() => {
-      props.navigation.navigate({ key: '1', name: '2' });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return null;
-  };
-
-  const onStateChange = jest.fn();
-
-  const element = (
-    <NavigationContainer onStateChange={onStateChange}>
-      <TestNavigator initialRouteName="foo">
-        <Screen
-          name="foo"
-          component={FooScreen}
-          initialParams={{ count: 10 }}
-        />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  expect(() => render(element).update(element)).toThrowError(
-    'While calling navigate with an object as the argument, you need to specify either name or key'
-  );
-});
-
-it('throws if NAVIGATE dispatched neither both key nor name', () => {
+it('throws if NAVIGATE dispatched neither key nor name', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
 
@@ -73,6 +38,6 @@ it('throws if NAVIGATE dispatched neither both key nor name', () => {
   );
 
   expect(() => render(element).update(element)).toThrowError(
-    'While calling navigate with an object as the argument, you need to specify either name or key'
+    'While calling navigate with an object as the argument, you need to specify name or key'
   );
 });

packages/core/src/index.tsx

@@ -6,6 +6,8 @@ export { default as BaseRouter } from './BaseRouter';
 export { default as NavigationContainer } from './NavigationContainer';
 export { default as createNavigator } from './createNavigator';
 
+export { default as NavigationContext } from './NavigationContext';
+
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigation } from './useNavigation';
 export { default as useFocusEffect } from './useFocusEffect';

packages/core/src/types.tsx

@@ -274,8 +274,8 @@ type NavigationHelpersCommon<
    * @param [params] Params object for the route.
    */
   navigate<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends undefined
-      ? [RouteName] | [RouteName, undefined]
+    ...args: ParamList[RouteName] extends (undefined | any)
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 
@@ -287,7 +287,7 @@ type NavigationHelpersCommon<
   navigate<RouteName extends keyof ParamList>(
     route:
       | { key: string; params?: ParamList[RouteName] }
-      | { name: RouteName; params: ParamList[RouteName] }
+      | { name: RouteName; key?: string; params: ParamList[RouteName] }
   ): void;
 
   /**
@@ -298,7 +298,7 @@ type NavigationHelpersCommon<
    */
   replace<RouteName extends keyof ParamList>(
     ...args: ParamList[RouteName] extends undefined
-      ? [RouteName] | [RouteName, undefined]
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 

packages/drawer/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.7...@react-navigation/drawer@5.0.0-alpha.8) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.6...@react-navigation/drawer@5.0.0-alpha.7) (2019-08-30)
+
+
+### Bug Fixes
+
+* rename contentContainerStyle to sceneContainerStyle for drawer ([fdc24d2](https://github.com/react-navigation/navigation-ex/commit/fdc24d2))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.5...@react-navigation/drawer@5.0.0-alpha.6) (2019-08-29)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.4...@react-navigation/drawer@5.0.0-alpha.5) (2019-08-28)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.3...@react-navigation/drawer@5.0.0-alpha.4) (2019-08-27)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.4",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/drawer/src/types.tsx

@@ -75,7 +75,7 @@ export type DrawerNavigationConfig = {
   lazy: boolean;
   /**
    * Whether a screen should be unmounted when navigating away from it.
-   * Defaults to `false`..
+   * Defaults to `false`.
    */
   unmountInactiveRoutes?: boolean;
   /**
@@ -87,7 +87,10 @@ export type DrawerNavigationConfig = {
    * Options for the content component which will be passed as props.
    */
   contentOptions?: object;
-  contentContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
 };
 

packages/drawer/src/views/Drawer.tsx

@@ -88,7 +88,7 @@ type Props = {
   statusBarAnimation: 'slide' | 'none' | 'fade';
   overlayStyle?: StyleProp<ViewStyle>;
   drawerStyle?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
+  sceneContainerStyle?: StyleProp<ViewStyle>;
   renderDrawerContent: Renderer;
   renderSceneContent: Renderer;
   gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
@@ -484,7 +484,7 @@ export default class DrawerView extends React.PureComponent<Props> {
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
-      contentContainerStyle,
+      sceneContainerStyle,
       drawerStyle,
       overlayStyle,
       onGestureRef,
@@ -534,7 +534,7 @@ export default class DrawerView extends React.PureComponent<Props> {
               {
                 transform: [{ translateX: contentTranslateX }],
               },
-              contentContainerStyle as any,
+              sceneContainerStyle as any,
             ]}
           >
             {renderSceneContent({ progress: this.progress })}

packages/drawer/src/views/DrawerView.tsx

@@ -190,7 +190,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       drawerPosition,
       drawerBackgroundColor,
       overlayColor,
-      contentContainerStyle,
+      sceneContainerStyle,
       edgeWidth,
       minSwipeDistance,
       hideStatusBar,
@@ -222,7 +222,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
           gestureHandlerProps={gestureHandlerProps}
           drawerType={drawerType}
           drawerPosition={drawerPosition}
-          contentContainerStyle={contentContainerStyle}
+          sceneContainerStyle={sceneContainerStyle}
           drawerStyle={{
             backgroundColor: drawerBackgroundColor || 'white',
             width: this.state.drawerWidth,

packages/example/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.4](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.3...@react-navigation/example@5.0.0-alpha.4) (2019-08-31)
+
+
+### Bug Fixes
+
+* handle route names change when all routes are removed ([#86](https://github.com/satya164/navigation-ex/issues/86)) ([1b2983e](https://github.com/satya164/navigation-ex/commit/1b2983e))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.2...@react-navigation/example@5.0.0-alpha.3) (2019-08-29)
+
+
+### Features
+
+* handle more methods in useScrollToTop ([f9e8c7e](https://github.com/react-navigation/navigation-ex/commit/f9e8c7e))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.1...@react-navigation/example@5.0.0-alpha.2) (2019-08-27)
 
 

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.4",
   "private": true,
   "workspaces": {
     "nohoist": [

packages/example/src/Screens/AuthFlow.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
+import { Title, Button } from 'react-native-paper';
+import { ParamListBase } from '@react-navigation/core';
+import {
+  createStackNavigator,
+  HeaderBackButton,
+  StackNavigationProp,
+} from '@react-navigation/stack';
+
+type AuthStackParams = {
+  splash: undefined;
+  home: undefined;
+  'sign-in': undefined;
+};
+
+const SplashScreen = () => (
+  <View style={styles.content}>
+    <ActivityIndicator />
+  </View>
+);
+
+const SignInScreen = ({
+  setUserToken,
+}: {
+  setUserToken: (token: string) => void;
+}) => {
+  return (
+    <View style={styles.content}>
+      <TextInput placeholder="Username" style={styles.input} />
+      <TextInput placeholder="Password" secureTextEntry style={styles.input} />
+      <Button
+        mode="contained"
+        onPress={() => setUserToken('token')}
+        style={styles.button}
+      >
+        Sign in
+      </Button>
+    </View>
+  );
+};
+
+const HomeScreen = ({
+  setUserToken,
+}: {
+  setUserToken: (token: undefined) => void;
+}) => {
+  return (
+    <View style={styles.content}>
+      <Title style={styles.text}>Signed in successfully 🎉</Title>
+      <Button onPress={() => setUserToken(undefined)} style={styles.button}>
+        Sign out
+      </Button>
+    </View>
+  );
+};
+
+const SimpleStack = createStackNavigator<AuthStackParams>();
+
+type Props = {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation }: Props) {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [userToken, setUserToken] = React.useState<string | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  navigation.setOptions({
+    header: null,
+  });
+
+  return (
+    <SimpleStack.Navigator
+      screenOptions={{
+        headerLeft: () => (
+          <HeaderBackButton onPress={() => navigation.goBack()} />
+        ),
+      }}
+    >
+      {isLoading ? (
+        <SimpleStack.Screen
+          name="splash"
+          component={SplashScreen}
+          options={{ title: `Auth Flow` }}
+        />
+      ) : userToken === undefined ? (
+        <SimpleStack.Screen name="sign-in" options={{ title: `Sign in` }}>
+          {() => <SignInScreen setUserToken={setUserToken} />}
+        </SimpleStack.Screen>
+      ) : (
+        <SimpleStack.Screen name="home" options={{ title: 'Home' }}>
+          {() => <HomeScreen setUserToken={setUserToken} />}
+        </SimpleStack.Screen>
+      )}
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  input: {
+    margin: 8,
+    padding: 10,
+    backgroundColor: 'white',
+    borderRadius: 3,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0, 0, 0, 0.08)',
+  },
+  button: {
+    margin: 8,
+  },
+  text: {
+    textAlign: 'center',
+    margin: 8,
+  },
+});

packages/example/src/Screens/BottomTabs.tsx

@@ -8,6 +8,7 @@ import TouchableBounce from 'react-native/Libraries/Components/Touchable/Touchab
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
+import SimpleStackScreen from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({
   tintColor,
@@ -20,6 +21,7 @@ const getTabBarIcon = (name: string) => ({
 );
 
 type BottomTabParams = {
+  article: undefined;
   albums: undefined;
   contacts: undefined;
   chat: undefined;
@@ -30,6 +32,18 @@ const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 export default function BottomTabsScreen() {
   return (
     <BottomTabs.Navigator>
+      <BottomTabs.Screen
+        name="article"
+        options={{
+          title: 'Article',
+          tabBarIcon: getTabBarIcon('chrome-reader-mode'),
+          tabBarButtonComponent: TouchableBounce,
+        }}
+      >
+        {props => (
+          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
+        )}
+      </BottomTabs.Screen>
       <BottomTabs.Screen
         name="chat"
         component={Chat}

packages/example/src/Screens/MaterialBottomTabs.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
-import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
+import SimpleStackScreen from './SimpleStack';
 
 type MaterialBottomTabParams = {
   article: undefined;
@@ -22,13 +22,16 @@ export default function MaterialBottomTabsScreen() {
     <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
       <MaterialBottomTabs.Screen
         name="article"
-        component={Article}
         options={{
           tabBarLabel: 'Article',
           tabBarIcon: 'chrome-reader-mode',
           tabBarColor: '#C9E7F8',
         }}
-      />
+      >
+        {props => (
+          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
+        )}
+      </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
         name="chat"
         component={Chat}

packages/example/src/Screens/SimpleStack.tsx

@@ -72,17 +72,18 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-export default function SimpleStackScreen({
-  navigation,
-}: {
+type Props = {
+  options?: React.ComponentProps<typeof SimpleStack.Navigator>;
   navigation: StackNavigationProp<ParamListBase>;
-}) {
+};
+
+export default function SimpleStackScreen({ navigation, options }: Props) {
   navigation.setOptions({
     header: null,
   });
 
   return (
-    <SimpleStack.Navigator>
+    <SimpleStack.Navigator {...options}>
       <SimpleStack.Screen
         name="article"
         component={ArticleScreen}

packages/example/src/Shared/Albums.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 const COVERS = [
   require('../../assets/album-art-1.jpg'),
@@ -12,19 +13,22 @@ const COVERS = [
   require('../../assets/album-art-8.jpg'),
 ];
 
-export default class Albums extends React.Component {
-  render() {
-    return (
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={styles.content}
-      >
-        {COVERS.map((source, i) => (
-          <Image key={i} source={source} style={styles.cover} />
-        ))}
-      </ScrollView>
-    );
-  }
+export default function Albums() {
+  const ref = React.useRef<ScrollView>(null);
+
+  useScrollToTop(ref);
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      {COVERS.map((source, i) => (
+        <Image key={i} source={source} style={styles.cover} />
+      ))}
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({

packages/example/src/Shared/Article.tsx

@@ -1,63 +1,63 @@
 import * as React from 'react';
 import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 type Props = {
-  date: string;
-  author: {
+  date?: string;
+  author?: {
     name: string;
   };
 };
 
-export default class Article extends React.Component<Props> {
-  static defaultProps = {
-    date: '1st Jan 2025',
-    author: {
-      name: 'Knowledge Bot',
-    },
-  };
+export default function Article({
+  date = '1st Jan 2025',
+  author = {
+    name: 'Knowledge Bot',
+  },
+}: Props) {
+  const ref = React.useRef<ScrollView>(null);
 
-  render() {
-    const { date, author } = this.props;
+  useScrollToTop(ref);
 
-    return (
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={styles.content}
-      >
-        <View style={styles.author}>
-          <Image
-            style={styles.avatar}
-            source={require('../../assets/avatar-1.png')}
-          />
-          <View style={styles.meta}>
-            <Text style={styles.name}>{author.name}</Text>
-            <Text style={styles.timestamp}>{date}</Text>
-          </View>
+  return (
+    <ScrollView
+      ref={ref}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.author}>
+        <Image
+          style={styles.avatar}
+          source={require('../../assets/avatar-1.png')}
+        />
+        <View style={styles.meta}>
+          <Text style={styles.name}>{author.name}</Text>
+          <Text style={styles.timestamp}>{date}</Text>
         </View>
-        <Text style={styles.title}>Lorem Ipsum</Text>
-        <Text style={styles.paragraph}>
-          Contrary to popular belief, Lorem Ipsum is not simply random text. It
-          has roots in a piece of classical Latin literature from 45 BC, making
-          it over 2000 years old.
-        </Text>
-        <Image style={styles.image} source={require('../../assets/book.jpg')} />
-        <Text style={styles.paragraph}>
-          Richard McClintock, a Latin professor at Hampden-Sydney College in
-          Virginia, looked up one of the more obscure Latin words, consectetur,
-          from a Lorem Ipsum passage, and going through the cites of the word in
-          classical literature, discovered the undoubtable source.
-        </Text>
-        <Text style={styles.paragraph}>
-          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
-          Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
-          Cicero, written in 45 BC. This book is a treatise on the theory of
-          ethics, very popular during the Renaissance. The first line of Lorem
-          Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
-          section 1.10.32.
-        </Text>
-      </ScrollView>
-    );
-  }
+      </View>
+      <Text style={styles.title}>Lorem Ipsum</Text>
+      <Text style={styles.paragraph}>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old.
+      </Text>
+      <Image style={styles.image} source={require('../../assets/book.jpg')} />
+      <Text style={styles.paragraph}>
+        Richard McClintock, a Latin professor at Hampden-Sydney College in
+        Virginia, looked up one of the more obscure Latin words, consectetur,
+        from a Lorem Ipsum passage, and going through the cites of the word in
+        classical literature, discovered the undoubtable source.
+      </Text>
+      <Text style={styles.paragraph}>
+        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
+        Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
+        written in 45 BC. This book is a treatise on the theory of ethics, very
+        popular during the Renaissance. The first line of Lorem Ipsum,
+        &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
+        1.10.32.
+      </Text>
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({

packages/example/src/Shared/Chat.tsx

@@ -7,6 +7,7 @@ import {
   ScrollView,
   StyleSheet,
 } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 const MESSAGES = [
   'okay',
@@ -15,49 +16,51 @@ const MESSAGES = [
   'make me a sandwich',
 ];
 
-export default class Chat extends React.Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <ScrollView
-          style={styles.inverted}
-          contentContainerStyle={styles.content}
-        >
-          {MESSAGES.map((text, i) => {
-            const odd = i % 2;
+export default function Chat() {
+  const ref = React.useRef<ScrollView>(null);
 
-            return (
+  useScrollToTop(ref);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={styles.inverted}
+        contentContainerStyle={styles.content}
+      >
+        {MESSAGES.map((text, i) => {
+          const odd = i % 2;
+
+          return (
+            <View
+              key={i}
+              style={[odd ? styles.odd : styles.even, styles.inverted]}
+            >
+              <Image
+                style={styles.avatar}
+                source={
+                  odd
+                    ? require('../../assets/avatar-2.png')
+                    : require('../../assets/avatar-1.png')
+                }
+              />
               <View
-                key={i}
-                style={[odd ? styles.odd : styles.even, styles.inverted]}
+                style={[styles.bubble, odd ? styles.received : styles.sent]}
               >
-                <Image
-                  style={styles.avatar}
-                  source={
-                    odd
-                      ? require('../../assets/avatar-2.png')
-                      : require('../../assets/avatar-1.png')
-                  }
-                />
-                <View
-                  style={[styles.bubble, odd ? styles.received : styles.sent]}
-                >
-                  <Text style={odd ? styles.receivedText : styles.sentText}>
-                    {text}
-                  </Text>
-                </View>
+                <Text style={odd ? styles.receivedText : styles.sentText}>
+                  {text}
+                </Text>
               </View>
-            );
-          })}
-        </ScrollView>
-        <TextInput
-          style={styles.input}
-          placeholder="Write a message"
-          underlineColorAndroid="transparent"
-        />
-      </View>
-    );
-  }
+            </View>
+          );
+        })}
+      </ScrollView>
+      <TextInput
+        style={styles.input}
+        placeholder="Write a message"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

packages/example/src/Shared/Contacts.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { FlatList } from 'react-native-gesture-handler';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 type Item = { name: string; number: number };
 
@@ -79,23 +79,24 @@ class ContactItem extends React.PureComponent<{
   }
 }
 
-export default class Contacts extends React.Component {
-  private renderItem = ({ item }: { item: Item }) => (
-    <ContactItem item={item} />
+export default function Contacts() {
+  const ref = React.useRef<FlatList<Item>>(null);
+
+  useScrollToTop(ref);
+
+  const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
+
+  const ItemSeparator = () => <View style={styles.separator} />;
+
+  return (
+    <FlatList
+      ref={ref}
+      data={CONTACTS}
+      keyExtractor={(_, i) => String(i)}
+      renderItem={renderItem}
+      ItemSeparatorComponent={ItemSeparator}
+    />
   );
-
-  private ItemSeparator = () => <View style={styles.separator} />;
-
-  render() {
-    return (
-      <FlatList
-        data={CONTACTS}
-        keyExtractor={(_, i) => String(i)}
-        renderItem={this.renderItem}
-        ItemSeparatorComponent={this.ItemSeparator}
-      />
-    );
-  }
 }
 
 const styles = StyleSheet.create({

packages/example/src/index.tsx

@@ -23,6 +23,7 @@ import SimpleStackScreen from './Screens/SimpleStack';
 import BottomTabsScreen from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
+import AuthFlow from './Screens/AuthFlow';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
@@ -47,6 +48,10 @@ const SCREENS = {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
+  'auth-flow': {
+    title: 'Auth Flow',
+    component: AuthFlow,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.6...@react-navigation/material-bottom-tabs@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.5...@react-navigation/material-bottom-tabs@5.0.0-alpha.6) (2019-08-29)
+
+
+### Bug Fixes
+
+* allow making params optional. fixes [#80](https://github.com/react-navigation/navigation-ex/issues/80) ([a9d4813](https://github.com/react-navigation/navigation-ex/commit/a9d4813))
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.4...@react-navigation/material-bottom-tabs@5.0.0-alpha.5) (2019-08-28)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.3...@react-navigation/material-bottom-tabs@5.0.0-alpha.4) (2019-08-27)
 
 

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.4"
+    "@react-navigation/routers": "^5.0.0-alpha.7"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/material-bottom-tabs/src/types.tsx

@@ -36,8 +36,8 @@ export type MaterialBottomTabNavigationProp<
    * @param [params] Params object for the route.
    */
   jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends void
-      ? [RouteName]
+    ...args: ParamList[RouteName] extends (undefined | any)
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 };

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.6...@react-navigation/material-top-tabs@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.5...@react-navigation/material-top-tabs@5.0.0-alpha.6) (2019-08-29)
+
+
+### Bug Fixes
+
+* allow making params optional. fixes [#80](https://github.com/react-navigation/navigation-ex/issues/80) ([a9d4813](https://github.com/react-navigation/navigation-ex/commit/a9d4813))
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.4...@react-navigation/material-top-tabs@5.0.0-alpha.5) (2019-08-28)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.3...@react-navigation/material-top-tabs@5.0.0-alpha.4) (2019-08-27)
 
 

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.4"
+    "@react-navigation/routers": "^5.0.0-alpha.7"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/material-top-tabs/src/types.tsx

@@ -50,8 +50,8 @@ export type MaterialTopTabNavigationProp<
    * @param [params] Params object for the route.
    */
   jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends void
-      ? [RouteName]
+    ...args: ParamList[RouteName] extends (undefined | any)
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 };
@@ -125,7 +125,7 @@ export type MaterialTopTabNavigationConfig = Partial<
    *
    * This view is usually only shown for a split second. Keep it lightweight.
    *
-   * By default, this renders null..
+   * By default, this renders null.
    */
   lazyPlaceholderComponent?: React.ComponentType<{ route: Route<string> }>;
   /**

packages/native/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.4...@react-navigation/native@5.0.0-alpha.5) (2019-08-29)
+
+
+### Bug Fixes
+
+* handle both null and undefined in useScrollToTop ([c951027](https://github.com/react-navigation/navigation-ex/commit/c951027))
+
+
+### Features
+
+* handle animated component wrappers in `useScrollToTop` ([#81](https://github.com/react-navigation/navigation-ex/issues/81)) ([cdbf1e9](https://github.com/react-navigation/navigation-ex/commit/cdbf1e9))
+* handle more methods in useScrollToTop ([f9e8c7e](https://github.com/react-navigation/navigation-ex/commit/f9e8c7e))
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.3...@react-navigation/native@5.0.0-alpha.4) (2019-08-28)
+
+
+### Bug Fixes
+
+* fix stack nested in tab always getting reset ([dead4e8](https://github.com/react-navigation/navigation-ex/commit/dead4e8))
+
+
+
+
+
 # [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.2...@react-navigation/native@5.0.0-alpha.3) (2019-08-27)
 
 

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.5",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/native/src/useScrollToTop.tsx

@@ -1,11 +1,40 @@
 import * as React from 'react';
 import { useNavigation, EventArg } from '@react-navigation/core';
 
-type ScrollableView = {
-  scrollTo(options: { x?: number; y?: number; animated?: boolean }): void;
-};
+type ScrollOptions = { y?: number; animated?: boolean };
 
-export default function useScrollToTop(ref: React.RefObject<ScrollableView>) {
+type ScrollableView =
+  | { scrollToTop(): void }
+  | { scrollTo(options: ScrollOptions): void }
+  | { scrollToOffset(options: ScrollOptions): void }
+  | { scrollResponderScrollTo(options: ScrollOptions): void };
+
+type ScrollableWrapper =
+  | { getScrollResponder(): ScrollableView }
+  | { getNode(): ScrollableView }
+  | ScrollableView;
+
+function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
+  if (ref.current == null) {
+    return null;
+  }
+
+  if ('getScrollResponder' in ref.current) {
+    // If the view is a wrapper like FlatList, SectionList etc.
+    // We need to use `getScrollResponder` to get access to the scroll responder
+    return ref.current.getScrollResponder();
+  } else if ('getNode' in ref.current) {
+    // When a `ScrollView` is wraped in `Animated.createAnimatedComponent`
+    // we need to use `getNode` to get the ref to the actual scrollview
+    return ref.current.getNode();
+  } else {
+    return ref.current;
+  }
+}
+
+export default function useScrollToTop(
+  ref: React.RefObject<ScrollableWrapper>
+) {
   const navigation = useNavigation();
 
   React.useEffect(
@@ -14,12 +43,24 @@ export default function useScrollToTop(ref: React.RefObject<ScrollableView>) {
       // We don't wanna import tab types here to avoid extra deps
       // in addition, there are multiple tab implementations
       navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+        const isFocused = navigation.isFocused();
+
         // Run the operation in the next frame so we're sure all listeners have been run
         // This is necessary to know if preventDefault() has been called
         requestAnimationFrame(() => {
-          if (navigation.isFocused() && !e.defaultPrevented && ref.current) {
+          const scrollable = getScrollableNode(ref);
+
+          if (isFocused && !e.defaultPrevented && scrollable) {
             // When user taps on already focused tab, scroll to top
-            ref.current.scrollTo({ y: 0 });
+            if ('scrollToTop' in scrollable) {
+              scrollable.scrollToTop();
+            } else if ('scrollTo' in scrollable) {
+              scrollable.scrollTo({ y: 0, animated: true });
+            } else if ('scrollToOffset' in scrollable) {
+              scrollable.scrollToOffset({ y: 0, animated: true });
+            } else if ('scrollResponderScrollTo' in scrollable) {
+              scrollable.scrollResponderScrollTo({ y: 0, animated: true });
+            }
           }
         });
       }),

packages/routers/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.6...@react-navigation/routers@5.0.0-alpha.7) (2019-08-31)
+
+
+### Bug Fixes
+
+* handle route names change when all routes are removed ([#86](https://github.com/react-navigation/navigation-ex/issues/86)) ([1b2983e](https://github.com/react-navigation/navigation-ex/commit/1b2983e))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.5...@react-navigation/routers@5.0.0-alpha.6) (2019-08-29)
+
+
+### Features
+
+* handle navigating with both with both key and name ([#83](https://github.com/react-navigation/navigation-ex/issues/83)) ([6b75cba](https://github.com/react-navigation/navigation-ex/commit/6b75cba))
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.4...@react-navigation/routers@5.0.0-alpha.5) (2019-08-28)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 # [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.3...@react-navigation/routers@5.0.0-alpha.4) (2019-08-27)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/__tests__/DrawerRouter.test.tsx

@@ -1,8 +1,190 @@
 import { CommonActions } from '@react-navigation/core';
-import { DrawerRouter } from '../src';
+import { DrawerRouter, DrawerActions } from '../src';
 
 jest.mock('shortid', () => () => 'test');
 
+it('gets initial state from route names and params with initialRouteName', () => {
+  const router = DrawerRouter({ initialRouteName: 'baz' });
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+    })
+  ).toEqual({
+    index: 1,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+});
+
+it('gets initial state from route names and params without initialRouteName', () => {
+  const router = DrawerRouter({});
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+    })
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+});
+
+it('gets rehydrated state from partial state', () => {
+  const router = DrawerRouter({});
+
+  const options = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {
+      baz: { answer: 42 },
+      qux: { name: 'Jane' },
+    },
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'bar-0', name: 'bar' }, { key: 'qux-1', name: 'qux' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-1', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 2,
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-1', name: 'baz' },
+          { key: 'qux-2', name: 'qux' },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    index: 2,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-1', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 4,
+        routes: [],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 1,
+        isDrawerOpen: true,
+        routeKeyHistory: ['bar-test', 'qux-test', 'foo-test'],
+        routes: [],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'drawer-test',
+    isDrawerOpen: true,
+    routeKeyHistory: ['bar-test', 'qux-test'],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+});
+
+it("doesn't rehydrate state if it's not stale", () => {
+  const router = DrawerRouter({});
+
+  const state = {
+    index: 0,
+    key: 'drawer-test',
+    isDrawerOpen: true,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false as const,
+  };
+
+  expect(
+    router.getRehydratedState(state, {
+      routeNames: [],
+      routeParamList: {},
+    })
+  ).toBe(state);
+});
+
 it('handles navigate action', () => {
   const router = DrawerRouter({});
 
@@ -47,7 +229,7 @@ it('handles open drawer action', () => {
         isDrawerOpen: false,
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'OPEN_DRAWER' }
+      DrawerActions.openDrawer()
     )
   ).toEqual({
     stale: false,
@@ -58,6 +240,20 @@ it('handles open drawer action', () => {
     routeKeyHistory: [],
     routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
   });
+
+  const state = {
+    stale: false as const,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: true,
+    routeKeyHistory: [],
+    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+  };
+
+  expect(router.getStateForAction(state, DrawerActions.openDrawer())).toBe(
+    state
+  );
 });
 
 it('handles close drawer action', () => {
@@ -74,7 +270,7 @@ it('handles close drawer action', () => {
         isDrawerOpen: true,
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'CLOSE_DRAWER' }
+      DrawerActions.closeDrawer()
     )
   ).toEqual({
     stale: false,
@@ -85,6 +281,20 @@ it('handles close drawer action', () => {
     routeKeyHistory: [],
     routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
   });
+
+  const state = {
+    stale: false as const,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+  };
+
+  expect(router.getStateForAction(state, DrawerActions.closeDrawer())).toBe(
+    state
+  );
 });
 
 it('handles toggle drawer action', () => {
@@ -101,7 +311,7 @@ it('handles toggle drawer action', () => {
         isDrawerOpen: true,
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'TOGGLE_DRAWER' }
+      DrawerActions.toggleDrawer()
     )
   ).toEqual({
     stale: false,
@@ -124,7 +334,7 @@ it('handles toggle drawer action', () => {
         isDrawerOpen: false,
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'TOGGLE_DRAWER' }
+      DrawerActions.toggleDrawer()
     )
   ).toEqual({
     stale: false,
@@ -136,3 +346,95 @@ it('handles toggle drawer action', () => {
     routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
   });
 });
+
+it('updates route key history on focus change', () => {
+  const router = DrawerRouter({ backBehavior: 'history' });
+
+  const state = {
+    index: 0,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-0', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false as const,
+  };
+
+  expect(router.getStateForRouteFocus(state, 'bar-0').routeKeyHistory).toEqual(
+    []
+  );
+
+  expect(router.getStateForRouteFocus(state, 'baz-0').routeKeyHistory).toEqual([
+    'bar-0',
+  ]);
+});
+
+it('closes drawer on focus change', () => {
+  const router = DrawerRouter({ backBehavior: 'history' });
+
+  expect(
+    router.getStateForRouteFocus(
+      {
+        index: 0,
+        key: 'drawer-test',
+        isDrawerOpen: false,
+        routeKeyHistory: [],
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-0', name: 'baz' },
+          { key: 'qux-0', name: 'qux' },
+        ],
+        stale: false,
+      },
+      'baz-0'
+    )
+  ).toEqual({
+    index: 1,
+    isDrawerOpen: false,
+    key: 'drawer-test',
+    routeKeyHistory: ['bar-0'],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz' },
+      { key: 'qux-0', name: 'qux' },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getStateForRouteFocus(
+      {
+        index: 0,
+        key: 'drawer-test',
+        isDrawerOpen: true,
+        routeKeyHistory: [],
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-0', name: 'baz' },
+          { key: 'qux-0', name: 'qux' },
+        ],
+        stale: false,
+      },
+      'baz-0'
+    )
+  ).toEqual({
+    index: 1,
+    isDrawerOpen: false,
+    key: 'drawer-test',
+    routeKeyHistory: ['bar-0'],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz' },
+      { key: 'qux-0', name: 'qux' },
+    ],
+    stale: false,
+  });
+});

packages/routers/__tests__/StackRouter.test.tsx

@@ -1,8 +1,231 @@
 import { CommonActions } from '@react-navigation/core';
-import { StackRouter } from '../src';
+import { StackRouter, StackActions } from '../src';
 
 jest.mock('shortid', () => () => 'test');
 
+it('gets initial state from route names and params with initialRouteName', () => {
+  const router = StackRouter({ initialRouteName: 'baz' });
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+    })
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [{ key: 'baz-test', name: 'baz', params: { answer: 42 } }],
+    stale: false,
+  });
+});
+
+it('gets initial state from route names and params without initialRouteName', () => {
+  const router = StackRouter({});
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+    })
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [{ key: 'bar-test', name: 'bar' }],
+    stale: false,
+  });
+});
+
+it('gets rehydrated state from partial state', () => {
+  const router = StackRouter({});
+
+  const options = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {
+      baz: { answer: 42 },
+      qux: { name: 'Jane' },
+    },
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'bar-0', name: 'bar' }, { key: 'qux-1', name: 'qux' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'qux-1', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 2,
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-1', name: 'baz' },
+          { key: 'qux-2', name: 'qux' },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    index: 2,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-1', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 4,
+        routes: [],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [{ key: 'bar-test', name: 'bar' }],
+    stale: false,
+  });
+});
+
+it("doesn't rehydrate state if it's not stale", () => {
+  const router = StackRouter({});
+
+  const state = {
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [{ key: 'bar-test', name: 'bar' }],
+    stale: false as const,
+  };
+
+  expect(
+    router.getRehydratedState(state, {
+      routeNames: [],
+      routeParamList: {},
+    })
+  ).toBe(state);
+});
+
+it('gets state on route names change', () => {
+  const router = StackRouter({});
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 2,
+        key: 'stack-test',
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+        stale: false,
+      },
+      {
+        routeNames: ['qux', 'baz', 'foo', 'fiz'],
+        routeParamList: {
+          qux: { name: 'John' },
+          fiz: { fruit: 'apple' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 1,
+    key: 'stack-test',
+    routeNames: ['qux', 'baz', 'foo', 'fiz'],
+    routes: [
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 1,
+        key: 'stack-test',
+        routeNames: ['foo', 'bar'],
+        routes: [
+          { key: 'foo-test', name: 'foo' },
+          { key: 'bar-test', name: 'bar' },
+        ],
+        stale: false,
+      },
+      {
+        routeNames: ['baz', 'qux'],
+        routeParamList: {
+          baz: { name: 'John' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['baz', 'qux'],
+    routes: [{ key: 'baz-test', name: 'baz', params: { name: 'John' } }],
+    stale: false,
+  });
+});
+
+it('gets state on route names change with initialRouteName', () => {
+  const router = StackRouter({ initialRouteName: 'qux' });
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 1,
+        key: 'stack-test',
+        routeNames: ['foo', 'bar'],
+        routes: [
+          { key: 'foo-test', name: 'foo' },
+          { key: 'bar-test', name: 'bar' },
+        ],
+        stale: false,
+      },
+      {
+        routeNames: ['baz', 'qux'],
+        routeParamList: {
+          baz: { name: 'John' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['baz', 'qux'],
+    routes: [{ key: 'qux-test', name: 'qux' }],
+    stale: false,
+  });
+});
+
 it('handles navigate action', () => {
   const router = StackRouter({});
 
@@ -28,12 +251,125 @@ it('handles navigate action', () => {
       {
         key: 'qux-test',
         name: 'qux',
-        params: {
-          answer: 42,
-        },
+        params: { answer: 42 },
       },
     ],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('baz', { answer: 42 })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [{ key: 'baz', name: 'baz', params: { answer: 42 } }],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar', params: { answer: 42 } },
+        ],
+      },
+      CommonActions.navigate('bar', { answer: 96 })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar', params: { answer: 96 } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('unknown')
+    )
+  ).toBe(null);
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz-0', name: 'baz' }, { key: 'bar-0', name: 'bar' }],
+      },
+      CommonActions.navigate({ key: 'unknown' })
+    )
+  ).toBe(null);
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz-0', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: { key: 'baz-0', name: 'baz' },
+      }
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [{ key: 'baz-0', name: 'baz' }],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz-0', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate({ key: 'baz-1', name: 'baz' })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz-0', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+      { key: 'baz-1', name: 'baz' },
+    ],
+  });
 });
 
 it('handles go back action', () => {
@@ -48,7 +384,7 @@ it('handles go back action', () => {
         routeNames: ['baz', 'bar', 'qux'],
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'GO_BACK' }
+      CommonActions.goBack()
     )
   ).toEqual({
     stale: false,
@@ -57,6 +393,19 @@ it('handles go back action', () => {
     routeNames: ['baz', 'bar', 'qux'],
     routes: [{ key: 'baz', name: 'baz' }],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz', name: 'baz' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toBe(null);
 });
 
 it('handles pop action', () => {
@@ -75,7 +424,30 @@ it('handles pop action', () => {
           { key: 'qux', name: 'qux' },
         ],
       },
-      { type: 'POP', payload: { count: 2 } }
+      StackActions.pop()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+          { key: 'qux', name: 'qux' },
+        ],
+      },
+      StackActions.pop(2)
     )
   ).toEqual({
     stale: false,
@@ -84,6 +456,46 @@ it('handles pop action', () => {
     routeNames: ['baz', 'bar', 'qux'],
     routes: [{ key: 'baz', name: 'baz' }],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz-0', name: 'baz' },
+          { key: 'bar-0', name: 'bar' },
+          { key: 'qux-0', name: 'qux' },
+        ],
+      },
+      {
+        ...StackActions.pop(),
+        target: 'root',
+        source: 'bar-0',
+      }
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [{ key: 'baz-0', name: 'baz' }],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz-0', name: 'baz' }],
+      },
+      StackActions.pop()
+    )
+  ).toBe(null);
 });
 
 it('handles pop to top action', () => {
@@ -102,7 +514,7 @@ it('handles pop to top action', () => {
           { key: 'qux', name: 'qux' },
         ],
       },
-      { type: 'POP_TO_TOP' }
+      StackActions.popToTop()
     )
   ).toEqual({
     stale: false,
@@ -125,7 +537,7 @@ it('handles push action', () => {
         routeNames: ['baz', 'bar', 'qux'],
         routes: [{ key: 'bar', name: 'bar' }],
       },
-      { type: 'PUSH', payload: { name: 'baz' } }
+      StackActions.push('baz')
     )
   ).toEqual({
     stale: false,
@@ -134,4 +546,54 @@ it('handles push action', () => {
     routeNames: ['baz', 'bar', 'qux'],
     routes: [{ key: 'bar', name: 'bar' }, { key: 'baz-test', name: 'baz' }],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      StackActions.push('unknown')
+    )
+  ).toBe(null);
+});
+
+it('changes index on focus change', () => {
+  const router = StackRouter({});
+
+  expect(
+    router.getStateForRouteFocus(
+      {
+        index: 2,
+        key: 'stack-test',
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-0', name: 'baz' },
+          { key: 'qux-0', name: 'qux' },
+        ],
+        stale: false,
+      },
+      'baz-0'
+    )
+  ).toEqual({
+    index: 1,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [{ key: 'bar-0', name: 'bar' }, { key: 'baz-0', name: 'baz' }],
+    stale: false,
+  });
+
+  const state = {
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [{ key: 'bar-0', name: 'bar' }, { key: 'baz-0', name: 'baz' }],
+    stale: false as const,
+  };
+
+  expect(router.getStateForRouteFocus(state, 'qux-0')).toEqual(state);
 });

packages/routers/__tests__/TabRouter.test.tsx

@@ -1,11 +1,249 @@
 import { CommonActions } from '@react-navigation/core';
-import { TabRouter } from '../src';
+import { TabRouter, TabActions, TabNavigationState } from '../src';
 
 jest.mock('shortid', () => () => 'test');
 
+it('gets initial state from route names and params with initialRouteName', () => {
+  const router = TabRouter({ initialRouteName: 'baz' });
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+    })
+  ).toEqual({
+    index: 1,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+});
+
+it('gets initial state from route names and params without initialRouteName', () => {
+  const router = TabRouter({});
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+    })
+  ).toEqual({
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+});
+
+it('gets rehydrated state from partial state', () => {
+  const router = TabRouter({});
+
+  const options = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {
+      baz: { answer: 42 },
+      qux: { name: 'Jane' },
+    },
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'bar-0', name: 'bar' }, { key: 'qux-1', name: 'qux' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-1', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 2,
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-1', name: 'baz' },
+          { key: 'qux-2', name: 'qux' },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    index: 2,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-1', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 4,
+        routes: [],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 1,
+        routeKeyHistory: ['bar-test', 'qux-test', 'foo-test'],
+        routes: [],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'tab-test',
+    routeKeyHistory: ['bar-test', 'qux-test'],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+});
+
+it("doesn't rehydrate state if it's not stale", () => {
+  const router = TabRouter({});
+
+  const state = {
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false as const,
+  };
+
+  expect(
+    router.getRehydratedState(state, {
+      routeNames: [],
+      routeParamList: {},
+    })
+  ).toBe(state);
+});
+
+it('gets state on route names change', () => {
+  const router = TabRouter({});
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 0,
+        key: 'tab-test',
+        routeKeyHistory: [],
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+        stale: false,
+      },
+      {
+        routeNames: ['qux', 'baz', 'foo', 'fiz'],
+        routeParamList: {
+          qux: { name: 'John' },
+          fiz: { fruit: 'apple' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['qux', 'baz', 'foo', 'fiz'],
+    routes: [
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'foo-test', name: 'foo' },
+      { key: 'fiz-test', name: 'fiz', params: { fruit: 'apple' } },
+    ],
+    stale: false,
+  });
+});
+
 it('handles navigate action', () => {
   const router = TabRouter({});
 
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz-1', name: 'baz' }, { key: 'bar-1', name: 'bar' }],
+      },
+      CommonActions.navigate({ key: 'bar-1', params: { answer: 42 } })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    routeKeyHistory: ['bar-1'],
+    routes: [
+      { key: 'baz-1', name: 'baz' },
+      { key: 'bar-1', name: 'bar', params: { answer: 42 } },
+    ],
+  });
+
   expect(
     router.getStateForAction(
       {
@@ -29,6 +267,20 @@ it('handles navigate action', () => {
       { key: 'bar', name: 'bar' },
     ],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('non-existent')
+    )
+  ).toBe(null);
 });
 
 it('handles jump to action', () => {
@@ -44,7 +296,7 @@ it('handles jump to action', () => {
         routeKeyHistory: [],
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'JUMP_TO', payload: { name: 'bar' } }
+      TabActions.jumpTo('bar')
     )
   ).toEqual({
     stale: false,
@@ -56,8 +308,8 @@ it('handles jump to action', () => {
   });
 });
 
-it('handles history back action', () => {
-  const router = TabRouter({});
+it('handles back action with backBehavior: history', () => {
+  const router = TabRouter({ backBehavior: 'history' });
 
   expect(
     router.getStateForAction(
@@ -69,7 +321,7 @@ it('handles history back action', () => {
         routeKeyHistory: ['bar'],
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'GO_BACK' }
+      CommonActions.goBack()
     )
   ).toEqual({
     stale: false,
@@ -79,9 +331,23 @@ it('handles history back action', () => {
     routeKeyHistory: [],
     routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toBe(null);
 });
 
-it('handles order back action', () => {
+it('handles back action with backBehavior: order', () => {
   const router = TabRouter({ backBehavior: 'order' });
 
   expect(
@@ -94,7 +360,7 @@ it('handles order back action', () => {
         routeKeyHistory: [],
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'GO_BACK' }
+      CommonActions.goBack()
     )
   ).toEqual({
     stale: false,
@@ -104,10 +370,48 @@ it('handles order back action', () => {
     routeKeyHistory: [],
     routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
   });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toBe(null);
 });
 
-it('handles initialRoute back action', () => {
-  const router = TabRouter({ backBehavior: 'initialRoute' });
+it('handles back action with backBehavior: initialRoute', () => {
+  const router = TabRouter({
+    backBehavior: 'initialRoute',
+    initialRouteName: 'bar',
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    routeKeyHistory: [],
+    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+  });
 
   expect(
     router.getStateForAction(
@@ -119,19 +423,12 @@ it('handles initialRoute back action', () => {
         routeKeyHistory: [],
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'GO_BACK' }
+      CommonActions.goBack()
     )
-  ).toEqual({
-    stale: false,
-    key: 'root',
-    index: 0,
-    routeNames: ['baz', 'bar'],
-    routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
-  });
+  ).toBe(null);
 });
 
-it('handles none back action', () => {
+it('handles back action with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
 
   expect(
@@ -144,7 +441,86 @@ it('handles none back action', () => {
         routeKeyHistory: [],
         routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
       },
-      { type: 'GO_BACK' }
+      CommonActions.goBack()
     )
   ).toEqual(null);
 });
+
+it('updates route key history on navigate and jump to', () => {
+  const router = TabRouter({ backBehavior: 'history' });
+
+  let state: TabNavigationState = {
+    index: 1,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-0', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false as const,
+  };
+
+  expect(state.routeKeyHistory).toEqual([]);
+
+  state = router.getStateForAction(
+    state,
+    TabActions.jumpTo('qux')
+  ) as TabNavigationState;
+
+  expect(state.routeKeyHistory).toEqual(['baz-0']);
+
+  state = router.getStateForAction(
+    state,
+    CommonActions.navigate('bar')
+  ) as TabNavigationState;
+
+  expect(state.routeKeyHistory).toEqual(['baz-0', 'qux-0']);
+
+  state = router.getStateForAction(
+    state,
+    TabActions.jumpTo('baz')
+  ) as TabNavigationState;
+
+  expect(state.routeKeyHistory).toEqual(['qux-0', 'bar-0']);
+
+  state = router.getStateForAction(
+    state,
+    CommonActions.goBack()
+  ) as TabNavigationState;
+
+  expect(state.routeKeyHistory).toEqual(['qux-0']);
+
+  state = router.getStateForAction(
+    state,
+    CommonActions.goBack()
+  ) as TabNavigationState;
+
+  expect(state.routeKeyHistory).toEqual([]);
+});
+
+it('updates route key history on focus change', () => {
+  const router = TabRouter({ backBehavior: 'history' });
+
+  const state = {
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-0', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false as const,
+  };
+
+  expect(router.getStateForRouteFocus(state, 'bar-0').routeKeyHistory).toEqual(
+    []
+  );
+
+  expect(router.getStateForRouteFocus(state, 'baz-0').routeKeyHistory).toEqual([
+    'bar-0',
+  ]);
+});

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/routers/src/StackRouter.tsx

@@ -11,7 +11,7 @@ import {
 export type StackActionType =
   | {
       type: 'PUSH';
-      payload: { name: string; params?: object };
+      payload: { name: string; key?: string | undefined; params?: object };
       source?: string;
       target?: string;
     }
@@ -114,11 +114,25 @@ export default function StackRouter(options: StackRouterOptions) {
       };
     },
 
-    getStateForRouteNamesChange(state, { routeNames }) {
+    getStateForRouteNamesChange(state, { routeNames, routeParamList }) {
       const routes = state.routes.filter(route =>
         routeNames.includes(route.name)
       );
 
+      if (routes.length === 0) {
+        const initialRouteName =
+          options.initialRouteName !== undefined &&
+          routeNames.includes(options.initialRouteName)
+            ? options.initialRouteName
+            : routeNames[0];
+
+        routes.push({
+          key: `${initialRouteName}-${shortid()}`,
+          name: initialRouteName,
+          params: routeParamList[initialRouteName],
+        });
+      }
+
       return {
         ...state,
         routeNames,
@@ -151,7 +165,10 @@ export default function StackRouter(options: StackRouterOptions) {
               routes: [
                 ...state.routes,
                 {
-                  key: `${action.payload.name}-${shortid()}`,
+                  key:
+                    action.payload.key === undefined
+                      ? `${action.payload.name}-${shortid()}`
+                      : action.payload.key,
                   name: action.payload.name,
                   params: action.payload.params,
                 },
@@ -199,14 +216,16 @@ export default function StackRouter(options: StackRouterOptions) {
             let index = -1;
 
             if (
-              state.routes[state.index].name === action.payload.name ||
+              (state.routes[state.index].name === action.payload.name &&
+                action.payload.key === undefined) ||
               state.routes[state.index].key === action.payload.key
             ) {
               index = state.index;
             } else {
               for (let i = state.routes.length - 1; i >= 0; i--) {
                 if (
-                  state.routes[i].name === action.payload.name ||
+                  (state.routes[i].name === action.payload.name &&
+                    action.payload.key === undefined) ||
                   state.routes[i].key === action.payload.key
                 ) {
                   index = i;
@@ -215,7 +234,11 @@ export default function StackRouter(options: StackRouterOptions) {
               }
             }
 
-            if (index === -1 && action.payload.key) {
+            if (
+              index === -1 &&
+              action.payload.key &&
+              action.payload.name === undefined
+            ) {
               return null;
             }
 
@@ -223,6 +246,7 @@ export default function StackRouter(options: StackRouterOptions) {
               return router.getStateForAction(state, {
                 type: 'PUSH',
                 payload: {
+                  key: action.payload.key,
                   name: action.payload.name,
                   params: action.payload.params,
                 },

packages/stack/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.9...@react-navigation/stack@5.0.0-alpha.10) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.8...@react-navigation/stack@5.0.0-alpha.9) (2019-08-30)
+
+
+### Bug Fixes
+
+* change interpolated style when idle to avoid messing up reanimated ([3ad2e6e](https://github.com/react-navigation/navigation-ex/commit/3ad2e6e))
+* properly set animated node on gestureEnabled change ([6a8242c](https://github.com/react-navigation/navigation-ex/commit/6a8242c))
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.7...@react-navigation/stack@5.0.0-alpha.8) (2019-08-29)
+
+
+### Bug Fixes
+
+* allow making params optional. fixes [#80](https://github.com/react-navigation/navigation-ex/issues/80) ([a9d4813](https://github.com/react-navigation/navigation-ex/commit/a9d4813))
+* fix gestures not working in stack ([8c1acc3](https://github.com/react-navigation/navigation-ex/commit/8c1acc3))
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.6...@react-navigation/stack@5.0.0-alpha.7) (2019-08-28)
+
+
+### Bug Fixes
+
+* fix stack nested in tab always getting reset ([dead4e8](https://github.com/react-navigation/navigation-ex/commit/dead4e8))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.5...@react-navigation/stack@5.0.0-alpha.6) (2019-08-28)
+
+
+### Features
+
+* disable gesture logic when no gesture stack ([38336b0](https://github.com/react-navigation/navigation-ex/commit/38336b0))
+
+
+
+
+
 # [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.4...@react-navigation/stack@5.0.0-alpha.5) (2019-08-27)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.5",
+  "version": "5.0.0-alpha.10",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.4",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -9,15 +9,16 @@ const { cond, add, multiply, interpolate } = Animated;
  * Standard iOS-style slide in from the right.
  */
 export function forHorizontalIOS({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateFocused = interpolate(current, {
+  const translateFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [I18nManager.isRTL ? -screen.width : screen.width, 0],
   });
   const translateUnfocused = next
-    ? interpolate(next, {
+    ? interpolate(next.progress, {
         inputRange: [0, 1],
         outputRange: [
           0,
@@ -26,12 +27,12 @@ export function forHorizontalIOS({
       })
     : 0;
 
-  const overlayOpacity = interpolate(current, {
+  const overlayOpacity = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [0, 0.07],
   });
 
-  const shadowOpacity = interpolate(current, {
+  const shadowOpacity = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [0, 0.3],
   });
@@ -54,10 +55,10 @@ export function forHorizontalIOS({
  * Standard iOS-style slide in from the bottom (used for modals).
  */
 export function forVerticalIOS({
-  progress: { current },
+  current,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateY = interpolate(current, {
+  const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
   });
@@ -77,14 +78,15 @@ export function forVerticalIOS({
  */
 export function forModalPresentationIOS({
   index,
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
   const topOffset = 10;
   const statusBarHeight = getStatusBarHeight(screen.width > screen.height);
   const aspectRatio = screen.height / screen.width;
 
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
 
   const translateY = interpolate(progress, {
     inputRange: [0, 1, 2],
@@ -129,19 +131,19 @@ export function forModalPresentationIOS({
  * Standard Android-style fade in from the bottom for Android Oreo.
  */
 export function forFadeFromBottomAndroid({
-  progress: { current },
+  current,
   layouts: { screen },
   closing,
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateY = interpolate(current, {
+  const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 0.08), 0],
   });
 
   const opacity = cond(
     closing,
-    current,
-    interpolate(current, {
+    current.progress,
+    interpolate(current.progress, {
       inputRange: [0, 0.5, 0.9, 1],
       outputRange: [0, 0.25, 0.7, 1],
     })
@@ -156,27 +158,28 @@ export function forFadeFromBottomAndroid({
 }
 
 /**
- * Standard Android-style wipe from the bottom for Android Pie.
+ * Standard Android-style reveal from the bottom for Android Pie.
  */
 export function forRevealFromBottomAndroid({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const containerTranslateY = interpolate(current, {
+  const containerTranslateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
   });
-  const cardTranslateYFocused = interpolate(current, {
+  const cardTranslateYFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 95.9 / 100, -1), 0],
   });
   const cardTranslateYUnfocused = next
-    ? interpolate(next, {
+    ? interpolate(next.progress, {
         inputRange: [0, 1],
         outputRange: [0, multiply(screen.height, 2 / 100, -1)],
       })
     : 0;
-  const overlayOpacity = interpolate(current, {
+  const overlayOpacity = interpolate(current.progress, {
     inputRange: [0, 0.36, 1],
     outputRange: [0, 0.1, 0.1],
   });

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -4,8 +4,12 @@ import { HeaderInterpolationProps, HeaderInterpolatedStyle } from '../types';
 
 const { interpolate, add } = Animated;
 
+/**
+ * Standard UIKit style animation for the header where the title fades into the back button label.
+ */
 export function forUIKit({
-  progress: { current, next },
+  current,
+  next,
   layouts,
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
   const defaultOffset = 100;
@@ -27,7 +31,7 @@ export function forUIKit({
   // The back title also animates in from this position
   const rightOffset = layouts.screen.width / 4;
 
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
 
   return {
     leftButtonStyle: {
@@ -85,10 +89,14 @@ export function forUIKit({
   };
 }
 
+/**
+ * Simple fade animation for the header elements.
+ */
 export function forFade({
-  progress: { current, next },
+  current,
+  next,
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
   const opacity = interpolate(progress, {
     inputRange: [0, 1, 2],
     outputRange: [0, 1, 0],
@@ -102,11 +110,15 @@ export function forFade({
   };
 }
 
+/**
+ * Simple translate animation to translate the header along with the sliding screen.
+ */
 export function forStatic({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
   const translateX = interpolate(progress, {
     inputRange: [0, 1, 2],
     outputRange: I18nManager.isRTL

packages/stack/src/TransitionConfigs/TransitionPresets.tsx

@@ -17,7 +17,9 @@ import { Platform } from 'react-native';
 
 const ANDROID_VERSION_PIE = 28;
 
-// Standard iOS navigation transition
+/**
+ * Standard iOS navigation transition.
+ */
 export const SlideFromRightIOS: TransitionPreset = {
   gestureDirection: 'horizontal',
   transitionSpec: {
@@ -28,7 +30,9 @@ export const SlideFromRightIOS: TransitionPreset = {
   headerStyleInterpolator: forFade,
 };
 
-// Standard iOS navigation transition for modals
+/**
+ * Standard iOS navigation transition for modals.
+ */
 export const ModalSlideFromBottomIOS: TransitionPreset = {
   gestureDirection: 'vertical',
   transitionSpec: {
@@ -39,7 +43,9 @@ export const ModalSlideFromBottomIOS: TransitionPreset = {
   headerStyleInterpolator: forNoAnimation,
 };
 
-// Standard iOS modal presentation style (introduced in iOS 13)
+/**
+ * Standard iOS modal presentation style (introduced in iOS 13).
+ */
 export const ModalPresentationIOS: TransitionPreset = {
   gestureDirection: 'vertical',
   transitionSpec: {
@@ -50,7 +56,9 @@ export const ModalPresentationIOS: TransitionPreset = {
   headerStyleInterpolator: forNoAnimation,
 };
 
-// Standard Android navigation transition when opening or closing an Activity on Android < 9
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android < 9 (Oreo).
+ */
 export const FadeFromBottomAndroid: TransitionPreset = {
   gestureDirection: 'vertical',
   transitionSpec: {
@@ -61,7 +69,9 @@ export const FadeFromBottomAndroid: TransitionPreset = {
   headerStyleInterpolator: forNoAnimation,
 };
 
-// Standard Android navigation transition when opening or closing an Activity on Android >= 9
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android >= 9 (Pie).
+ */
 export const RevealFromBottomAndroid: TransitionPreset = {
   gestureDirection: 'vertical',
   transitionSpec: {
@@ -72,6 +82,9 @@ export const RevealFromBottomAndroid: TransitionPreset = {
   headerStyleInterpolator: forNoAnimation,
 };
 
+/**
+ * Default navigation transition for the current platform.
+ */
 export const DefaultTransition = Platform.select({
   ios: SlideFromRightIOS,
   default:
@@ -80,6 +93,9 @@ export const DefaultTransition = Platform.select({
       : RevealFromBottomAndroid,
 });
 
+/**
+ * Default modal transition for the current platform.
+ */
 export const ModalTransition = Platform.select({
   ios: ModalSlideFromBottomIOS,
   default: DefaultTransition,

packages/stack/src/TransitionConfigs/TransitionSpecs.tsx

@@ -1,9 +1,11 @@
 import { Easing } from 'react-native-reanimated';
 import { TransitionSpec } from '../types';
 
-// These are the exact values from UINavigationController's animation configuration
+/**
+ * Exact values from UINavigationController's animation configuration.
+ */
 export const TransitionIOSSpec: TransitionSpec = {
-  timing: 'spring',
+  animation: 'spring',
   config: {
     stiffness: 1000,
     damping: 500,
@@ -14,27 +16,36 @@ export const TransitionIOSSpec: TransitionSpec = {
   },
 };
 
-// See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+/**
+ * Configuration for activity open animation from Android Nougat.
+ * See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ */
 export const FadeInFromBottomAndroidSpec: TransitionSpec = {
-  timing: 'timing',
+  animation: 'timing',
   config: {
     duration: 350,
     easing: Easing.out(Easing.poly(5)),
   },
 };
 
-// See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
+/**
+ * Configuration for activity close animation from Android Nougat.
+ * See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
+ */
 export const FadeOutToBottomAndroidSpec: TransitionSpec = {
-  timing: 'timing',
+  animation: 'timing',
   config: {
     duration: 150,
     easing: Easing.in(Easing.linear),
   },
 };
 
-// See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+/**
+ * Approximate configuration for activity open animation from Android Pie.
+ * See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ */
 export const RevealFromBottomAndroidSpec: TransitionSpec = {
-  timing: 'timing',
+  animation: 'timing',
   config: {
     duration: 425,
     // This is super rough approximation of the path used for the curve by android

packages/stack/src/navigators/createStackNavigator.tsx

@@ -45,14 +45,12 @@ function StackNavigator({
     () =>
       navigation.addListener &&
       navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+        const isFocused = navigation.isFocused();
+
         // Run the operation in the next frame so we're sure all listeners have been run
         // This is necessary to know if preventDefault() has been called
         requestAnimationFrame(() => {
-          if (
-            state.index > 0 &&
-            navigation.isFocused() &&
-            !e.defaultPrevented
-          ) {
+          if (state.index > 0 && isFocused && !e.defaultPrevented) {
             // When user taps on already focused tab and we're inside the tab,
             // reset the stack to replicate native behaviour
             navigation.dispatch({

packages/stack/src/types.tsx

@@ -47,8 +47,8 @@ export type StackNavigationProp<
    * @param [params] Params object for the route.
    */
   push<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends void
-      ? [RouteName]
+    ...args: ParamList[RouteName] extends (undefined | any)
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 
@@ -405,28 +405,33 @@ export type TimingConfig = {
 };
 
 export type TransitionSpec =
-  | { timing: 'spring'; config: SpringConfig }
-  | { timing: 'timing'; config: TimingConfig };
+  | { animation: 'spring'; config: SpringConfig }
+  | { animation: 'timing'; config: TimingConfig };
 
 export type CardInterpolationProps = {
+  /**
+   * Values for the current screen.
+   */
+  current: {
+    /**
+     * Animated node representing the progress value of the current screen.
+     */
+    progress: Animated.Node<number>;
+  };
+  /**
+   * Values for the current screen the screen after this one in the stack.
+   * This can be `undefined` in case the screen animating is the last one.
+   */
+  next?: {
+    /**
+     * Animated node representing the progress value of the next screen.
+     */
+    progress: Animated.Node<number>;
+  };
   /**
    * The index of the card in the stack.
    */
   index: number;
-  /**
-   * Animated nodes representing the progress of the animation.
-   */
-  progress: {
-    /**
-     * Progress value of the current screen.
-     */
-    current: Animated.Node<number>;
-    /**
-     * Progress value for the screen after this one in the stack.
-     * This can be `undefined` in case the screen animating is the last one.
-     */
-    next?: Animated.Node<number>;
-  };
   /**
    * Animated node representing whether the card is closing.
    */
@@ -467,18 +472,23 @@ export type CardStyleInterpolator = (
 
 export type HeaderInterpolationProps = {
   /**
-   * Animated nodes representing the progress of the animation.
+   * Values for the current screen (the screen which owns this header).
    */
-  progress: {
+  current: {
     /**
-     * Progress value of the current screen (the screen which owns this header).
+     * Animated node representing the progress value of the current screen.
      */
-    current: Animated.Node<number>;
+    progress: Animated.Node<number>;
+  };
+  /**
+   * Values for the current screen the screen after this one in the stack.
+   * This can be `undefined` in case the screen animating is the last one.
+   */
+  next?: {
     /**
-     * Progress value for the screen after this one in the stack.
-     * This can be `undefined` in case the screen animating is the last one.
+     * Animated node representing the progress value of the next screen.
      */
-    next?: Animated.Node<number>;
+    progress: Animated.Node<number>;
   };
   /**
    * Layout measurements for various items we use for animation.

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -121,10 +121,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
       leftLabelLayout: Layout | undefined
     ) =>
       styleInterpolator({
-        progress: {
-          current,
-          next,
-        },
+        current: { progress: current },
+        next: next && { progress: next },
         layouts: {
           screen: layout,
           title: titleLayout,

packages/stack/src/views/Stack/Card.tsx

@@ -202,7 +202,11 @@ export default class Card extends React.Component<Props> {
     }
 
     if (closing !== prevProps.closing) {
-      this.isClosing.setValue(closing ? TRUE : FALSE);
+      // If the style updates during render, setting the value here doesn't work
+      // We need to defer it a bit so the animation starts properly
+      requestAnimationFrame(() =>
+        this.isClosing.setValue(closing ? TRUE : FALSE)
+      );
     }
   }
 
@@ -267,6 +271,17 @@ export default class Card extends React.Component<Props> {
     finished: new Value(FALSE),
   };
 
+  private handleTransitionEnd = () => {
+    this.isRunningAnimation = false;
+    this.interpolatedStyle = this.getInterpolatedStyle(
+      this.props.styleInterpolator,
+      this.props.index,
+      this.props.current,
+      this.props.next,
+      this.props.layout
+    );
+  };
+
   private runTransition = (isVisible: Binary | Animated.Node<number>) => {
     const { open: openingSpec, close: closingSpec } = this.props.transitionSpec;
 
@@ -298,7 +313,7 @@ export default class Card extends React.Component<Props> {
       ]),
       cond(
         eq(isVisible, 1),
-        openingSpec.timing === 'spring'
+        openingSpec.animation === 'spring'
           ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
@@ -309,7 +324,7 @@ export default class Card extends React.Component<Props> {
               { ...this.transitionState, frameTime: this.frameTime },
               { ...openingSpec.config, toValue: this.toValue }
             ),
-        closingSpec.timing === 'spring'
+        closingSpec.animation === 'spring'
           ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
@@ -331,7 +346,9 @@ export default class Card extends React.Component<Props> {
         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
           const isOpen = Boolean(value);
           const { onOpen, onClose } = this.props;
-          this.isRunningAnimation = false;
+
+          this.handleTransitionEnd();
+
           if (isOpen) {
             onOpen(true);
           } else {
@@ -357,7 +374,7 @@ export default class Card extends React.Component<Props> {
       cond(neq(this.nextIsVisible, UNSET), [
         // Stop any running animations
         cond(clockRunning(this.clock), [
-          call([], () => (this.isRunningAnimation = false)),
+          call([], this.handleTransitionEnd),
           stopClock(this.clock),
         ]),
         set(this.gesture, 0),
@@ -366,6 +383,15 @@ export default class Card extends React.Component<Props> {
         set(this.nextIsVisible, UNSET),
       ])
     ),
+    onChange(
+      this.isVisible,
+      call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
+    ),
+  ]);
+
+  private execNoGesture = this.runTransition(this.isVisible);
+
+  private execWithGesture = block([
     onChange(
       this.isSwiping,
       call(
@@ -454,10 +480,6 @@ export default class Card extends React.Component<Props> {
         ),
       ]
     ),
-    onChange(
-      this.isVisible,
-      call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
-    ),
   ]);
 
   private handleGestureEventHorizontal = Animated.event([
@@ -495,10 +517,8 @@ export default class Card extends React.Component<Props> {
     ) =>
       styleInterpolator({
         index,
-        progress: {
-          current,
-          next,
-        },
+        current: { progress: current },
+        next: next && { progress: next },
         closing: this.isClosing,
         layouts: {
           screen: layout,
@@ -506,6 +526,18 @@ export default class Card extends React.Component<Props> {
       })
   );
 
+  // Keep track of the style in a property to avoid changing the animated node when deps change
+  // The style shouldn't change in the middle of the animation and should refer to what was there at the start of it
+  // Which will be the last value when just before the render which started the animation
+  // We need to make sure to update this when the running animation ends
+  private interpolatedStyle = this.getInterpolatedStyle(
+    this.props.styleInterpolator,
+    this.props.index,
+    this.props.current,
+    this.props.next,
+    this.props.layout
+  );
+
   private gestureActivationCriteria() {
     const { layout, gestureDirection, gestureResponseDistance } = this.props;
 
@@ -546,45 +578,54 @@ export default class Card extends React.Component<Props> {
 
   render() {
     const {
-      index,
       active,
       transparent,
-      layout,
+      styleInterpolator,
+      index,
       current,
       next,
+      layout,
       overlayEnabled,
       shadowEnabled,
       gestureEnabled,
       gestureDirection,
       children,
-      styleInterpolator,
       containerStyle: customContainerStyle,
       contentStyle,
       ...rest
     } = this.props;
 
+    if (!this.isRunningAnimation) {
+      this.interpolatedStyle = this.getInterpolatedStyle(
+        styleInterpolator,
+        index,
+        current,
+        next,
+        layout
+      );
+    }
+
     const {
       containerStyle,
       cardStyle,
       overlayStyle,
       shadowStyle,
-    } = this.getInterpolatedStyle(
-      styleInterpolator,
-      index,
-      current,
-      next,
-      layout
-    );
+    } = this.interpolatedStyle;
 
-    const handleGestureEvent =
-      gestureDirection === 'vertical'
+    const handleGestureEvent = gestureEnabled
+      ? gestureDirection === 'vertical'
         ? this.handleGestureEventVertical
-        : this.handleGestureEventHorizontal;
+        : this.handleGestureEventHorizontal
+      : undefined;
 
     return (
       <StackGestureContext.Provider value={this.gestureRef}>
         <View pointerEvents="box-none" {...rest}>
           <Animated.Code exec={this.exec} />
+          <Animated.Code
+            key={gestureEnabled ? 'gesture-code' : 'no-gesture-code'}
+            exec={gestureEnabled ? this.execWithGesture : this.execNoGesture}
+          />
           {overlayEnabled && overlayStyle ? (
             <Animated.View
               pointerEvents="none"

packages/stack/src/views/Stack/Stack.tsx

@@ -167,11 +167,14 @@ export default class Stack extends React.Component<Props, State> {
           : undefined;
         const next = nextRoute ? progress[nextRoute.key] : undefined;
 
+        const oldScene = state.scenes[index];
         const scene = {
           route,
           previous: previousRoute,
           descriptor:
-            props.descriptors[route.key] || state.descriptors[route.key],
+            props.descriptors[route.key] ||
+            state.descriptors[route.key] ||
+            (oldScene ? oldScene.descriptor : { options: {} }),
           progress: {
             current,
             next,
@@ -179,8 +182,6 @@ export default class Stack extends React.Component<Props, State> {
           },
         };
 
-        const oldScene = state.scenes[index];
-
         if (
           oldScene &&
           scene.route === oldScene.route &&