chore: publish

- @react-navigation/core@5.0.0-alpha.8
 - @react-navigation/stack@5.0.0-alpha.15

.circleci/config.yml

@@ -42,6 +42,13 @@ jobs:
         - store_artifacts:
             path: coverage
             destination: coverage
+  build-packages:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn lerna run prepare
 
 workflows:
   version: 2
@@ -54,3 +61,6 @@ workflows:
       - unit-test:
           requires:
             - install-dependencies
+      - build-packages:
+          requires:
+            - install-dependencies

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
@@ -31,6 +35,8 @@ Navigators bundle a router and a view which takes the navigation state and decid
 A simple navigator could look like this:
 
 ```js
+import { createNavigator } from '@react-navigation/core';
+
 function StackNavigator({ initialRouteName, children, ...rest }) {
   // The `navigation` object contains the navigation state and some helpers (e.g. push, pop)
   // The `descriptors` object contains the screen options and a helper for rendering a screen
@@ -127,8 +133,11 @@ It's also possible to disable bubbling of actions when dispatching them by addin
 ## Basic usage
 
 ```js
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
 const Stack = createStackNavigator();
-const Tab = createTabNavigator();
+const Tab = createBottomTabNavigator();
 
 function App() {
   return (
@@ -210,6 +219,8 @@ function Profile({ navigation }) {
 }
 ```
 
+The `navigation.addListener` method returns a function to remove the listener which can be returned as the cleanup function in an effect.
+
 Navigators can also emit custom events using the `emit` method in the `navigation` object passed:
 
 ```js
@@ -245,6 +256,8 @@ Sometimes we want to run side-effects when a screen is focused. A side effect ma
 To make this easier, the library exports a `useFocusEffect` hook:
 
 ```js
+import { useFocusEffect } from '@react-navigation/core';
+
 function Profile({ userId }) {
   const [user, setUser] = React.useState(null);
 
@@ -272,6 +285,10 @@ The `useFocusEffect` is analogous to React's `useEffect` hook. The only differen
 We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
 
 ```js
+import { useIsFocused } from '@react-navigation/core';
+
+// ...
+
 const isFocused = useIsFocused();
 ```
 
@@ -284,6 +301,10 @@ For proper UX in React Native, we need to respect platform behavior such as the
 When the back button on the device is pressed, we also want to navigate back in the focused navigator. The library exports a `useBackButton` hook to handle this:
 
 ```js
+import { useBackButton } from '@react-navigation/native';
+
+// ...
+
 const ref = React.useRef();
 
 useBackButton(ref);
@@ -291,6 +312,24 @@ useBackButton(ref);
 return <NavigationContainer ref={ref}>{/* content */}</NavigationContainer>;
 ```
 
+### Scroll to top on tab button press
+
+When there's a scroll view in a tab and the user taps on the already focused tab bar again, we might want to scroll to top in our scroll view. The library exports a `useScrollToTop` hook to handle this:
+
+```js
+import { useScrollToTop } from '@react-navigation/native';
+
+// ...
+
+const ref = React.useRef();
+
+useScrollToTop(ref);
+
+return <ScrollView ref={ref}>{/* content */}</ScrollView>;
+```
+
+The hook can accept a ref object to any view that has a `scrollTo` method.
+
 ### Deep-link integration
 
 To handle incoming links, we need to handle 2 scenarios:
@@ -325,6 +364,10 @@ For example, the path `/rooms/chat?user=jane` will be translated to a state obje
 The `useLinking` hooks makes it easier to handle incoming links:
 
 ```js
+import { useLinking } from '@react-navigation/native';
+
+// ...
+
 const ref = React.useRef();
 
 const { getInitialState } = useLinking(ref, {
@@ -451,10 +494,10 @@ Unfortunately it's not possible to verify that the type of children elements are
 
 ## Contributing
 
-The project uses a monorepo structure for the packages managed by [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) and [lerna](https://lerna.js.org). To get started with the project, run `lerna bootstrap` to install the required dependencies for each package:
+The project uses a monorepo structure for the packages managed by [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) and [lerna](https://lerna.js.org). To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
 
 ```sh
-lerna bootstrap
+yarn
 ```
 
 While developing, you can run the [example app](/example/) with [Expo](https://expo.io/) to test your changes:
@@ -476,13 +519,7 @@ To fix formatting errors, run the following:
 yarn lint --fix
 ```
 
-Remember to add tests for your change if possible. To run tests, first build all the files:
-
-```sh
-lerna run prepare
-```
-
-Then run the tests:
+Remember to add tests for your change if possible. Run the tests by:
 
 ```sh
 yarn test
@@ -493,7 +530,16 @@ yarn test
 To publish a new version, first we need to export a `GH_TOKEN` environment variable as mentioned [here](https://github.com/lerna/lerna/tree/master/commands/version#--create-release-type). Then run:
 
 ```sh
-lerna publish
+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

@@ -14,7 +14,7 @@
     "type": "git",
     "url": "git+https://github.com/satya164/react-navigation.git"
   },
-  "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/)",
+  "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/), Michał Osadnik <micosa97@gmail.com> (https://github.com/osdnk/)",
   "scripts": {
     "lint": "eslint --ext '.js,.ts,.tsx' .",
     "typescript": "tsc --noEmit",
@@ -59,7 +59,16 @@
     },
     "setupFiles": [
       "<rootDir>/jest/setup.js"
-    ]
+    ],
+    "moduleNameMapper": {
+      "@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,56 @@
 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)
+
+
+### Features
+
+* add hook to scroll to top on tab press ([9e1104c](https://github.com/react-navigation/navigation-ex/commit/9e1104c))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.2...@react-navigation/bottom-tabs@5.0.0-alpha.3) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.1...@react-navigation/bottom-tabs@5.0.0-alpha.2) (2019-08-22)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.2",
+  "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/src/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.2",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -13,6 +13,7 @@ import BottomTabView from '../views/BottomTabView';
 import {
   BottomTabNavigationConfig,
   BottomTabNavigationOptions,
+  BottomTabNavigationEventMap,
 } from '../types';
 
 type Props = DefaultNavigatorOptions<BottomTabNavigationOptions> &
@@ -28,8 +29,9 @@ function BottomTabNavigator({
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     TabNavigationState,
+    TabRouterOptions,
     BottomTabNavigationOptions,
-    TabRouterOptions
+    BottomTabNavigationEventMap
   >(TabRouter, {
     initialRouteName,
     backBehavior,

packages/bottom-tabs/src/types.tsx

@@ -17,10 +17,6 @@ import {
 import { TabNavigationState } from '@react-navigation/routers';
 
 export type BottomTabNavigationEventMap = {
-  /**
-   * Event which fires on tapping on the tab for an already focused screen.
-   */
-  refocus: undefined;
   /**
    * Event which fires on tapping on the tab in the tab bar.
    */
@@ -35,6 +31,11 @@ export type Orientation = 'horizontal' | 'vertical';
 
 export type LabelPosition = 'beside-icon' | 'below-icon';
 
+export type BottomTabNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  BottomTabNavigationEventMap
+>;
+
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
@@ -52,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/bottom-tabs/src/views/BottomTabView.tsx

@@ -5,23 +5,22 @@ import {
   AccessibilityRole,
   AccessibilityStates,
 } from 'react-native';
-import {
-  NavigationHelpers,
-  ParamListBase,
-  Route,
-  BaseActions,
-} from '@react-navigation/core';
+import { Route, CommonActions } from '@react-navigation/core';
 import { TabNavigationState } from '@react-navigation/routers';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 
 import BottomTabBar from './BottomTabBar';
-import { BottomTabNavigationConfig, BottomTabDescriptorMap } from '../types';
+import {
+  BottomTabNavigationConfig,
+  BottomTabDescriptorMap,
+  BottomTabNavigationHelpers,
+} from '../types';
 import ResourceSavingScene from './ResourceSavingScene';
 
 type Props = BottomTabNavigationConfig & {
   state: TabNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: BottomTabNavigationHelpers;
   descriptors: BottomTabDescriptorMap;
 };
 
@@ -139,14 +138,12 @@ export default class BottomTabView extends React.Component<Props, State> {
       target: route.key,
     });
 
-    if (state.routes[state.index].key === route.key) {
-      navigation.emit({
-        type: 'refocus',
-        target: route.key,
-      });
-    } else if (!event.defaultPrevented) {
+    if (
+      state.routes[state.index].key !== route.key &&
+      !event.defaultPrevented
+    ) {
       navigation.dispatch({
-        ...BaseActions.navigate(route.name),
+        ...CommonActions.navigate(route.name),
         target: state.key,
       });
     }

packages/core/CHANGELOG.md

@@ -3,6 +3,91 @@
 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/core@5.0.0-alpha.7...@react-navigation/core@5.0.0-alpha.8) (2019-09-04)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.5...@react-navigation/core@5.0.0-alpha.7) (2019-08-31)
+
+
+### Bug Fixes
+
+* fix navigation object changing too often ([3c840bb](https://github.com/react-navigation/navigation-ex/commit/3c840bb))
+
+
+### Features
+
+* add useRoute ([#89](https://github.com/react-navigation/navigation-ex/issues/89)) ([b0a3756](https://github.com/react-navigation/navigation-ex/commit/b0a3756))
+* support function in screenOptions ([eff0c04](https://github.com/react-navigation/navigation-ex/commit/eff0c04))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.5...@react-navigation/core@5.0.0-alpha.6) (2019-08-31)
+
+
+### Features
+
+* add useRoute ([#89](https://github.com/react-navigation/navigation-ex/issues/89)) ([b0a3756](https://github.com/react-navigation/navigation-ex/commit/b0a3756))
+* support function in screenOptions ([eff0c04](https://github.com/react-navigation/navigation-ex/commit/eff0c04))
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* add hook to scroll to top on tab press ([9e1104c](https://github.com/react-navigation/navigation-ex/commit/9e1104c))
+* add native container ([d26b77f](https://github.com/react-navigation/navigation-ex/commit/d26b77f))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.1...@react-navigation/core@5.0.0-alpha.2) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-08-21)
 
 

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/index.d.ts",
   "files": [
     "src",
     "lib"

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/NavigationContainer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as BaseActions from './BaseActions';
+import * as CommonActions from './CommonActions';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import useFocusedListeners from './useFocusedListeners';
@@ -12,16 +12,11 @@ import {
   PartialState,
   NavigationAction,
   NavigationContainerRef,
+  NavigationContainerProps,
 } from './types';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
-type Props = {
-  initialState?: InitialState;
-  onStateChange?: (state: State) => void;
-  children: React.ReactNode;
-};
-
 const MISSING_CONTEXT_ERROR =
   "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?";
 
@@ -84,7 +79,7 @@ const getPartialState = (
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 const Container = React.forwardRef(function NavigationContainer(
-  { initialState, onStateChange, children }: Props,
+  { initialState, onStateChange, children }: NavigationContainerProps,
   ref: React.Ref<NavigationContainerRef>
 ) {
   const [state, setNavigationState] = React.useState<State>(() =>
@@ -110,13 +105,13 @@ const Container = React.forwardRef(function NavigationContainer(
   };
 
   React.useImperativeHandle(ref, () => ({
-    ...(Object.keys(BaseActions) as Array<keyof typeof BaseActions>).reduce<
+    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
       any
     >((acc, name) => {
       acc[name] = (...args: any[]) =>
         dispatch(
           // eslint-disable-next-line import/namespace
-          BaseActions[name](
+          CommonActions[name](
             // @ts-ignore
             ...args
           )

packages/core/src/NavigationRouteContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Route } from './types';
+
+/**
+ * Context which holds the route prop for a screen.
+ */
+const NavigationContext = React.createContext<Route<string> | undefined>(
+  undefined
+);
+
+export default NavigationContext;

packages/core/src/SceneView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavigationStateContext } from './NavigationContainer';
 import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import {
@@ -56,7 +57,7 @@ export default function SceneView<
         ),
       });
     },
-    [getState, route, setState]
+    [getState, route.key, setState]
   );
 
   const context = React.useMemo(
@@ -78,23 +79,25 @@ export default function SceneView<
 
   return (
     <NavigationContext.Provider value={navigation}>
-      <NavigationStateContext.Provider value={context}>
-        <EnsureSingleNavigator>
-          <StaticContainer
-            name={screen.name}
-            // @ts-ignore
-            render={screen.component || screen.children}
-            navigation={navigation}
-            route={route}
-          >
-            {'component' in screen && screen.component !== undefined ? (
-              <screen.component navigation={navigation} route={route} />
-            ) : 'children' in screen && screen.children !== undefined ? (
-              screen.children({ navigation, route })
-            ) : null}
-          </StaticContainer>
-        </EnsureSingleNavigator>
-      </NavigationStateContext.Provider>
+      <NavigationRouteContext.Provider value={route}>
+        <NavigationStateContext.Provider value={context}>
+          <EnsureSingleNavigator>
+            <StaticContainer
+              name={screen.name}
+              // @ts-ignore
+              render={screen.component || screen.children}
+              navigation={navigation}
+              route={route}
+            >
+              {'component' in screen && screen.component !== undefined ? (
+                <screen.component navigation={navigation} route={route} />
+              ) : 'children' in screen && screen.children !== undefined ? (
+                screen.children({ navigation, route })
+              ) : null}
+            </StaticContainer>
+          </EnsureSingleNavigator>
+        </NavigationStateContext.Provider>
+      </NavigationRouteContext.Provider>
     </NavigationContext.Provider>
   );
 }

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

@@ -1,5 +1,5 @@
 import BaseRouter from '../BaseRouter';
-import * as BaseActions from '../BaseActions';
+import * as CommonActions from '../CommonActions';
 
 jest.mock('shortid', () => () => 'test');
 
@@ -18,7 +18,7 @@ const STATE = {
 it('replaces focused screen with REPLACE', () => {
   const result = BaseRouter.getStateForAction(
     STATE,
-    BaseActions.replace('qux', { answer: 42 })
+    CommonActions.replace('qux', { answer: 42 })
   );
 
   expect(result).toEqual({
@@ -36,7 +36,7 @@ it('replaces focused screen with REPLACE', () => {
 
 it('replaces source screen with REPLACE', () => {
   const result = BaseRouter.getStateForAction(STATE, {
-    ...BaseActions.replace('qux', { answer: 42 }),
+    ...CommonActions.replace('qux', { answer: 42 }),
     source: 'baz',
   });
 
@@ -55,7 +55,7 @@ it('replaces source screen with REPLACE', () => {
 
 it("doesn't handle REPLACE if source key isn't present", () => {
   const result = BaseRouter.getStateForAction(STATE, {
-    ...BaseActions.replace('qux', { answer: 42 }),
+    ...CommonActions.replace('qux', { answer: 42 }),
     source: 'magic',
   });
 
@@ -65,7 +65,7 @@ it("doesn't handle REPLACE if source key isn't present", () => {
 it('sets params for the focused screen with SET_PARAMS', () => {
   const result = BaseRouter.getStateForAction(
     STATE,
-    BaseActions.setParams({ answer: 42 })
+    CommonActions.setParams({ answer: 42 })
   );
 
   expect(result).toEqual({
@@ -83,7 +83,7 @@ it('sets params for the focused screen with SET_PARAMS', () => {
 
 it('sets params for the source screen with SET_PARAMS', () => {
   const result = BaseRouter.getStateForAction(STATE, {
-    ...BaseActions.setParams({ answer: 42 }),
+    ...CommonActions.setParams({ answer: 42 }),
     source: 'foo',
   });
 
@@ -102,7 +102,7 @@ it('sets params for the source screen with SET_PARAMS', () => {
 
 it("doesn't handle SET_PARAMS if source key isn't present", () => {
   const result = BaseRouter.getStateForAction(STATE, {
-    ...BaseActions.setParams({ answer: 42 }),
+    ...CommonActions.setParams({ answer: 42 }),
     source: 'magic',
   });
 
@@ -119,7 +119,7 @@ it('resets state to new state with RESET', () => {
 
   const result = BaseRouter.getStateForAction(
     STATE,
-    BaseActions.reset({
+    CommonActions.reset({
       index: 0,
       routes,
     })
@@ -132,7 +132,7 @@ it('ignores key and routeNames when resetting with RESET', () => {
   const result = BaseRouter.getStateForAction(
     STATE,
     // @ts-ignore
-    BaseActions.reset({ index: 2, key: 'foo', routeNames: ['test'] })
+    CommonActions.reset({ index: 2, key: 'foo', routeNames: ['test'] })
   );
 
   expect(result).toEqual({ ...STATE, index: 2 });

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/__tests__/index.test.tsx

@@ -3,8 +3,8 @@ import { render, act } from 'react-native-testing-library';
 import Screen from '../Screen';
 import NavigationContainer from '../NavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
-import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
 import useNavigation from '../useNavigation';
+import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
 import { NavigationState } from '../types';
 
 beforeEach(() => (MockRouterKey.current = 0));

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

@@ -17,6 +17,7 @@ it('sets options with options prop as an object', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
+      any,
       { title?: string },
       any
     >(MockRouter, props);
@@ -45,11 +46,320 @@ it('sets options with options prop as an object', () => {
     </NavigationContainer>
   );
 
+  expect(root).toMatchInlineSnapshot(`
+                    <main>
+                      <h1>
+                        Hello world
+                      </h1>
+                      <div>
+                        Test screen
+                      </div>
+                    </main>
+          `);
+});
+
+it('sets options with options prop as a fuction', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      { title?: string },
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1>{options.title}</h1>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const TestScreen = (): any => 'Test screen';
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen
+          name="foo"
+          component={TestScreen}
+          options={({ route }: any) => ({ title: route.params.author })}
+          initialParams={{ author: 'Jane' }}
+        />
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+                    <main>
+                      <h1>
+                        Jane
+                      </h1>
+                      <div>
+                        Test screen
+                      </div>
+                    </main>
+          `);
+});
+
+it('sets options with screenOptions prop as an object', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      { title?: string },
+      any
+    >(MockRouter, props);
+
+    return (
+      <>
+        {state.routes.map(route => {
+          const { render, options } = descriptors[route.key];
+
+          return (
+            <main key={route.key}>
+              <h1>{options.title}</h1>
+              <div>{render()}</div>
+            </main>
+          );
+        })}
+      </>
+    );
+  };
+
+  const TestScreenA = (): any => 'Test screen A';
+
+  const TestScreenB = (): any => 'Test screen B';
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator screenOptions={{ title: 'Hello world' }}>
+        <Screen name="foo" component={TestScreenA} />
+        <Screen name="bar" component={TestScreenB} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+        Array [
+          <main>
+            <h1>
+              Hello world
+            </h1>
+            <div>
+              Test screen A
+            </div>
+          </main>,
+          <main>
+            <h1>
+              Hello world
+            </h1>
+            <div>
+              Test screen B
+            </div>
+          </main>,
+        ]
+    `);
+});
+
+it('sets options with screenOptions prop as a fuction', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      { title?: string },
+      any
+    >(MockRouter, props);
+
+    return (
+      <>
+        {state.routes.map(route => {
+          const { render, options } = descriptors[route.key];
+
+          return (
+            <main key={route.key}>
+              <h1>{options.title}</h1>
+              <div>{render()}</div>
+            </main>
+          );
+        })}
+      </>
+    );
+  };
+
+  const TestScreenA = (): any => 'Test screen A';
+
+  const TestScreenB = (): any => 'Test screen B';
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator
+        screenOptions={({ route }: any) => ({
+          title: `${route.name}: ${route.params.author || route.params.fruit}`,
+        })}
+      >
+        <Screen
+          name="foo"
+          component={TestScreenA}
+          initialParams={{ author: 'Jane' }}
+        />
+        <Screen
+          name="bar"
+          component={TestScreenB}
+          initialParams={{ fruit: 'Apple' }}
+        />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+    Array [
+      <main>
+        <h1>
+          foo: Jane
+        </h1>
+        <div>
+          Test screen A
+        </div>
+      </main>,
+      <main>
+        <h1>
+          bar: Apple
+        </h1>
+        <div>
+          Test screen B
+        </div>
+      </main>,
+    ]
+  `);
+});
+
+it('sets initial options with setOptions', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      {
+        title?: string;
+        color?: string;
+      },
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1 color={options.color}>{options.title}</h1>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const TestScreen = ({ navigation }: any): any => {
+    navigation.setOptions({
+      title: 'Hello world',
+    });
+
+    return 'Test screen';
+  };
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" options={{ color: 'blue' }}>
+          {props => <TestScreen {...props} />}
+        </Screen>
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+                <main>
+                  <h1
+                    color="blue"
+                  >
+                    Hello world
+                  </h1>
+                  <div>
+                    Test screen
+                  </div>
+                </main>
+        `);
+});
+
+it('updates options with setOptions', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      any,
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1 color={options.color}>{options.title}</h1>
+        <p>{options.description}</p>
+        <caption>{options.author}</caption>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const TestScreen = ({ navigation }: any): any => {
+    navigation.setOptions({
+      title: 'Hello world',
+      description: 'Something here',
+    });
+
+    React.useEffect(() => {
+      const timer = setTimeout(() =>
+        navigation.setOptions({
+          title: 'Hello again',
+          author: 'Jane',
+        })
+      );
+
+      return () => clearTimeout(timer);
+    });
+
+    return 'Test screen';
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" options={{ color: 'blue' }}>
+          {props => <TestScreen {...props} />}
+        </Screen>
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  const root = render(element);
+
+  act(() => jest.runAllTimers());
+
+  root.update(element);
+
   expect(root).toMatchInlineSnapshot(`
             <main>
-              <h1>
-                Hello world
+              <h1
+                color="blue"
+              >
+                Hello again
               </h1>
+              <p>
+                Something here
+              </p>
+              <caption>
+                Jane
+              </caption>
               <div>
                 Test screen
               </div>
@@ -61,6 +371,7 @@ it("returns correct value for canGoBack when it's not overridden", () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
+      any,
       { title?: string },
       any
     >(MockRouter, props);
@@ -123,6 +434,7 @@ it(`returns false for canGoBack when current router doesn't handle GO_BACK`, ()
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      any,
       any
     >(TestRouter, props);
 
@@ -172,6 +484,7 @@ it('returns true for canGoBack when current router handles GO_BACK', () => {
   const ParentNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
+      any,
       { title?: string },
       any
     >(ParentRouter, props);
@@ -181,6 +494,7 @@ it('returns true for canGoBack when current router handles GO_BACK', () => {
   const ChildNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
+      any,
       { title?: string },
       any
     >(MockRouter, props);
@@ -237,6 +551,7 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
   const OverrodeNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
+      any,
       { title?: string },
       any
     >(OverrodeRouter, props);
@@ -246,6 +561,7 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
+      any,
       { title?: string },
       any
     >(MockRouter, props);
@@ -288,177 +604,3 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
 
   expect(result).toBe(false);
 });
-
-it('sets options with options prop as a fuction', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      { title?: string },
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1>{options.title}</h1>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const TestScreen = (): any => 'Test screen';
-
-  const root = render(
-    <NavigationContainer>
-      <TestNavigator>
-        <Screen
-          name="foo"
-          component={TestScreen}
-          options={({ route }: any) => ({ title: route.params.author })}
-          initialParams={{ author: 'Jane' }}
-        />
-        <Screen name="bar" component={jest.fn()} />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  expect(root).toMatchInlineSnapshot(`
-            <main>
-              <h1>
-                Jane
-              </h1>
-              <div>
-                Test screen
-              </div>
-            </main>
-      `);
-});
-
-it('sets initial options with setOptions', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      {
-        title?: string;
-        color?: string;
-      },
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1 color={options.color}>{options.title}</h1>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const TestScreen = ({ navigation }: any): any => {
-    navigation.setOptions({
-      title: 'Hello world',
-    });
-
-    return 'Test screen';
-  };
-
-  const root = render(
-    <NavigationContainer>
-      <TestNavigator>
-        <Screen name="foo" options={{ color: 'blue' }}>
-          {props => <TestScreen {...props} />}
-        </Screen>
-        <Screen name="bar" component={jest.fn()} />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  expect(root).toMatchInlineSnapshot(`
-        <main>
-          <h1
-            color="blue"
-          >
-            Hello world
-          </h1>
-          <div>
-            Test screen
-          </div>
-        </main>
-    `);
-});
-
-it('updates options with setOptions', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      any,
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1 color={options.color}>{options.title}</h1>
-        <p>{options.description}</p>
-        <caption>{options.author}</caption>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const TestScreen = ({ navigation }: any): any => {
-    navigation.setOptions({
-      title: 'Hello world',
-      description: 'Something here',
-    });
-
-    React.useEffect(() => {
-      const timer = setTimeout(() =>
-        navigation.setOptions({
-          title: 'Hello again',
-          author: 'Jane',
-        })
-      );
-
-      return () => clearTimeout(timer);
-    });
-
-    return 'Test screen';
-  };
-
-  const element = (
-    <NavigationContainer>
-      <TestNavigator>
-        <Screen name="foo" options={{ color: 'blue' }}>
-          {props => <TestScreen {...props} />}
-        </Screen>
-        <Screen name="bar" component={jest.fn()} />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  const root = render(element);
-
-  act(() => jest.runAllTimers());
-
-  root.update(element);
-
-  expect(root).toMatchInlineSnapshot(`
-    <main>
-      <h1
-        color="blue"
-      >
-        Hello again
-      </h1>
-      <p>
-        Something here
-      </p>
-      <caption>
-        Jane
-      </caption>
-      <div>
-        Test screen
-      </div>
-    </main>
-  `);
-});

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { render } from 'react-native-testing-library';
+import useNavigationBuilder from '../useNavigationBuilder';
+import useRoute from '../useRoute';
+import NavigationContainer from '../NavigationContainer';
+import Screen from '../Screen';
+import MockRouter from './__fixtures__/MockRouter';
+import { RouteProp } from '../types';
+
+it('gets route prop from context', () => {
+  expect.assertions(1);
+
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  };
+
+  const Test = () => {
+    const route = useRoute<RouteProp<{ sample: { x: string } }, 'sample'>>();
+
+    expect(route && route.params && route.params.x).toEqual(1);
+
+    return null;
+  };
+
+  render(
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" component={Test} initialParams={{ x: 1 }} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+});

packages/core/src/index.tsx

@@ -1,13 +1,17 @@
-import * as BaseActions from './BaseActions';
+import * as CommonActions from './CommonActions';
 
-export { BaseActions };
+export { CommonActions };
 
 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 NavigationRouteContext } from './NavigationRouteContext';
+
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigation } from './useNavigation';
+export { default as useRoute } from './useRoute';
 export { default as useFocusEffect } from './useFocusEffect';
 export { default as useIsFocused } from './useIsFocused';
 

packages/core/src/types.tsx

@@ -1,6 +1,7 @@
-import * as BaseActions from './BaseActions';
+import * as CommonActions from './CommonActions';
+import * as React from 'react';
 
-export type CommonAction = BaseActions.Action;
+export type CommonAction = CommonActions.Action;
 
 export type NavigationState = {
   /**
@@ -95,7 +96,12 @@ export type DefaultNavigatorOptions<
   /**
    * Default options for all screens under this navigator.
    */
-  screenOptions?: ScreenOptions;
+  screenOptions?:
+    | ScreenOptions
+    | ((props: {
+        route: RouteProp<ParamListBase, string>;
+        navigation: any;
+      }) => ScreenOptions);
 };
 
 export type RouterFactory<
@@ -186,7 +192,7 @@ export type EventMapBase = {
   blur: undefined;
 };
 
-export type EventArg<EventName extends string, Data> = {
+export type EventArg<EventName extends string, Data = undefined> = {
   /**
    * Type of the event (e.g. `focus`, `blur`)
    */
@@ -231,11 +237,14 @@ export type EventEmitter<EventMap extends { [key: string]: any }> = {
    * @param [options.target] Key of the target route which should receive the event.
    * If not specified, all routes receive the event.
    */
-  emit<EventName extends Extract<keyof EventMap, string>>(options: {
-    type: EventName;
-    data?: EventMap[EventName];
-    target?: string;
-  }): EventArg<EventName, EventMap[EventName]>;
+  emit<EventName extends Extract<keyof EventMap, string>>(
+    options: {
+      type: EventName;
+      target?: string;
+    } & (EventMap[EventName] extends undefined
+      ? {}
+      : { data: EventMap[EventName] })
+  ): EventArg<EventName, EventMap[EventName]>;
 };
 
 export class PrivateValueStore<A, B, C> {
@@ -270,8 +279,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;
 
@@ -283,7 +292,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;
 
   /**
@@ -294,7 +303,7 @@ type NavigationHelpersCommon<
    */
   replace<RouteName extends keyof ParamList>(
     ...args: ParamList[RouteName] extends undefined
-      ? [RouteName] | [RouteName, undefined]
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
 
@@ -326,9 +335,10 @@ type NavigationHelpersCommon<
 } & PrivateValueStore<ParamList, keyof ParamList, {}>;
 
 export type NavigationHelpers<
-  ParamList extends ParamListBase
+  ParamList extends ParamListBase,
+  EventMap extends { [key: string]: any } = {}
 > = NavigationHelpersCommon<ParamList> &
-  EventEmitter<{ [key: string]: any }> & {
+  EventEmitter<EventMap> & {
     /**
      * Update the param object for the route.
      * The new params will be shallow merged with the old one.
@@ -340,6 +350,14 @@ export type NavigationHelpers<
     ): void;
   };
 
+export type NavigationContainerProps = {
+  initialState?: InitialState;
+  onStateChange?: (
+    state: NavigationState | PartialState<NavigationState> | undefined
+  ) => void;
+  children: React.ReactNode;
+};
+
 export type NavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
@@ -521,11 +539,24 @@ export type TypedNavigator<
    * Navigator component which manages the child screens.
    */
   Navigator: React.ComponentType<
-    React.ComponentProps<Navigator> & {
+    Omit<
+      React.ComponentProps<Navigator>,
+      'initialRouteName' | 'screenOptions'
+    > & {
       /**
-       * Route to focus on initial render.
+       * Name of the route to focus by on initial render.
+       * If not specified, usually the first route is used.
        */
       initialRouteName?: keyof ParamList;
+      /**
+       * Default options for all screens under this navigator.
+       */
+      screenOptions?:
+        | ScreenOptions
+        | ((props: {
+            route: RouteProp<ParamList, keyof ParamList>;
+            navigation: any;
+          }) => ScreenOptions);
     }
   >;
   /**

packages/core/src/useDescriptors.tsx

@@ -13,6 +13,7 @@ import {
   NavigationState,
   ParamListBase,
   RouteConfig,
+  RouteProp,
   Router,
 } from './types';
 
@@ -20,7 +21,12 @@ type Options<ScreenOptions extends object> = {
   state: NavigationState;
   screens: { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> };
   navigation: NavigationHelpers<ParamListBase>;
-  screenOptions?: ScreenOptions;
+  screenOptions?:
+    | ScreenOptions
+    | ((props: {
+        route: RouteProp<ParamListBase, string>;
+        navigation: any;
+      }) => ScreenOptions);
   onAction: (
     action: NavigationAction,
     visitedNavigators?: Set<string>
@@ -93,13 +99,15 @@ export default function useDescriptors<
   return state.routes.reduce(
     (acc, route) => {
       const screen = screens[route.name];
+      const navigation = navigations[route.key];
 
       acc[route.key] = {
+        navigation,
         render() {
           return (
             <NavigationBuilderContext.Provider key={route.key} value={context}>
               <SceneView
-                navigation={navigations[route.key]}
+                navigation={navigation}
                 route={route}
                 screen={screen}
                 getState={getState}
@@ -108,22 +116,30 @@ export default function useDescriptors<
             </NavigationBuilderContext.Provider>
           );
         },
-        options: {
-          // The default `screenOptions` passed to the navigator
-          ...screenOptions,
-          // The `options` prop passed to `Screen` elements
-          ...(typeof screen.options === 'object' || screen.options == null
-            ? screen.options
-            : screen.options({
-                // @ts-ignore
-                route,
-                navigation: navigations[route.key],
-              })),
-          // The options set via `navigation.setOptions`
-          ...options[route.key],
+        get options() {
+          return {
+            // The default `screenOptions` passed to the navigator
+            ...(typeof screenOptions === 'object' || screenOptions == null
+              ? screenOptions
+              : screenOptions({
+                  // @ts-ignore
+                  route,
+                  navigation,
+                })),
+            // The `options` prop passed to `Screen` elements
+            ...(typeof screen.options === 'object' || screen.options == null
+              ? screen.options
+              : screen.options({
+                  // @ts-ignore
+                  route,
+                  navigation,
+                })),
+            // The options set via `navigation.setOptions`
+            ...options[route.key],
+          };
         },
-        navigation: navigations[route.key],
       };
+
       return acc;
     },
     {} as {

packages/core/src/useNavigationBuilder.tsx

@@ -21,6 +21,7 @@ import {
   RouterFactory,
   PartialState,
   PrivateValueStore,
+  NavigationAction,
 } from './types';
 
 // This is to make TypeScript compiler happy
@@ -84,8 +85,9 @@ const getRouteConfigsFromChildren = <ScreenOptions extends object>(
  */
 export default function useNavigationBuilder<
   State extends NavigationState,
+  RouterOptions extends DefaultRouterOptions,
   ScreenOptions extends object,
-  RouterOptions extends DefaultRouterOptions
+  EventMap extends { [key: string]: any }
 >(
   createRouter: RouterFactory<State, any, RouterOptions>,
   options: DefaultNavigatorOptions<ScreenOptions> & RouterOptions
@@ -240,7 +242,7 @@ export default function useNavigationBuilder<
     setState,
   });
 
-  const navigation = useNavigationHelpers({
+  const navigation = useNavigationHelpers<State, NavigationAction, EventMap>({
     onAction,
     getState,
     setState,

packages/core/src/useNavigationCache.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as BaseActions from './BaseActions';
+import * as CommonActions from './CommonActions';
 import { NavigationEventEmitter } from './useEventEmitter';
 import NavigationContext from './NavigationContext';
 
@@ -53,7 +53,7 @@ export default function useNavigationCache<
 
   const actions = {
     ...router.actionCreators,
-    ...BaseActions,
+    ...CommonActions,
   };
 
   cache.current = state.routes.reduce<NavigationCache<State, ScreenOptions>>(

packages/core/src/useNavigationHelpers.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as BaseActions from './BaseActions';
+import * as CommonActions from './CommonActions';
 import NavigationContext from './NavigationContext';
 import { NavigationStateContext } from './NavigationContainer';
 import { NavigationEventEmitter } from './useEventEmitter';
@@ -34,7 +34,8 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
  */
 export default function useNavigationHelpers<
   State extends NavigationState,
-  Action extends NavigationAction
+  Action extends NavigationAction,
+  EventMap extends { [key: string]: any }
 >({ onAction, getState, setState, emitter, router }: Options<State, Action>) {
   const parentNavigationHelpers = React.useContext(NavigationContext);
   const { performTransaction } = React.useContext(NavigationStateContext);
@@ -51,7 +52,7 @@ export default function useNavigationHelpers<
 
     const actions = {
       ...router.actionCreators,
-      ...BaseActions,
+      ...CommonActions,
     };
 
     const helpers = Object.keys(actions).reduce(
@@ -72,11 +73,13 @@ export default function useNavigationHelpers<
         ? parentNavigationHelpers.isFocused
         : () => true,
       canGoBack: () =>
-        router.getStateForAction(getState(), BaseActions.goBack() as Action) !==
-          null ||
+        router.getStateForAction(
+          getState(),
+          CommonActions.goBack() as Action
+        ) !== null ||
         (parentNavigationHelpers && parentNavigationHelpers.canGoBack()) ||
         false,
-    } as NavigationHelpers<ParamListBase> &
+    } as NavigationHelpers<ParamListBase, EventMap> &
       (NavigationProp<ParamListBase, string, any, any, any> | undefined);
   }, [
     router,

packages/core/src/useRoute.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import NavigationRouteContext from './NavigationRouteContext';
+import { ParamListBase, RouteProp } from './types';
+
+/**
+ * Hook to access the route prop of the parent screen anywhere.
+ *
+ * @returns Route prop of the parent screen.
+ */
+export default function useRoute<
+  T extends RouteProp<ParamListBase, string>
+>(): T {
+  const route = React.useContext(NavigationRouteContext);
+
+  if (route === undefined) {
+    throw new Error(
+      "We couldn't find a route object. Is your component inside a navigator?"
+    );
+  }
+
+  return route as T;
+}

packages/drawer/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.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
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.2...@react-navigation/drawer@5.0.0-alpha.3) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.1...@react-navigation/drawer@5.0.0-alpha.2) (2019-08-22)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/drawer/src/index.d.ts",
   "files": [
     "src",
     "lib"
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.2",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -11,7 +11,11 @@ import {
 } from '@react-navigation/routers';
 
 import DrawerView from '../views/DrawerView';
-import { DrawerNavigationOptions, DrawerNavigationConfig } from '../types';
+import {
+  DrawerNavigationOptions,
+  DrawerNavigationConfig,
+  DrawerNavigationEventMap,
+} from '../types';
 
 type Props = DefaultNavigatorOptions<DrawerNavigationOptions> &
   DrawerRouterOptions &
@@ -25,8 +29,9 @@ function DrawerNavigator({
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     DrawerNavigationState,
+    DrawerRouterOptions,
     DrawerNavigationOptions,
-    DrawerRouterOptions
+    DrawerNavigationEventMap
   >(DrawerRouter, {
     initialRouteName,
     children,

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>;
 };
 
@@ -182,6 +185,11 @@ export type DrawerNavigationEventMap = {
   drawerClose: undefined;
 };
 
+export type DrawerNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  DrawerNavigationEventMap
+>;
+
 export type DrawerNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string

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/DrawerSidebar.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
 import Animated from 'react-native-reanimated';
-import {
-  NavigationHelpers,
-  ParamListBase,
-  Route,
-  BaseActions,
-} from '@react-navigation/core';
+import { Route, CommonActions } from '@react-navigation/core';
 import {
   DrawerActions,
   DrawerNavigationState,
 } from '@react-navigation/routers';
 
-import { Scene, ContentComponentProps, DrawerDescriptorMap } from '../types';
+import {
+  Scene,
+  ContentComponentProps,
+  DrawerDescriptorMap,
+  DrawerNavigationHelpers,
+} from '../types';
 
 type Props = {
   contentComponent?: React.ComponentType<ContentComponentProps>;
   contentOptions?: object;
   state: DrawerNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
   drawerOpenProgress: Animated.Node<number>;
   drawerPosition: 'left' | 'right';
@@ -78,7 +78,7 @@ class DrawerSidebar extends React.PureComponent<Props> {
     navigation.dispatch({
       ...(focused
         ? DrawerActions.closeDrawer()
-        : BaseActions.navigate(route.name)),
+        : CommonActions.navigate(route.name)),
       target: state.key,
     });
   };

packages/drawer/src/views/DrawerView.tsx

@@ -4,7 +4,6 @@ import { Dimensions, StyleSheet, I18nManager, Platform } from 'react-native';
 import { ScreenContainer } from 'react-native-screens';
 import SafeAreaView from 'react-native-safe-area-view';
 import { PanGestureHandler, ScrollView } from 'react-native-gesture-handler';
-import { ParamListBase, NavigationHelpers } from '@react-navigation/core';
 import {
   DrawerNavigationState,
   DrawerActions,
@@ -19,11 +18,12 @@ import {
   DrawerDescriptorMap,
   DrawerNavigationConfig,
   ContentComponentProps,
+  DrawerNavigationHelpers,
 } from '../types';
 
 type Props = DrawerNavigationConfig & {
   state: DrawerNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
 };
 
@@ -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,55 @@
 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.6](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.4...@react-navigation/example@5.0.0-alpha.6) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.4...@react-navigation/example@5.0.0-alpha.5) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* add native container ([d26b77f](https://github.com/react-navigation/navigation-ex/commit/d26b77f))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-08-21)
 
 

packages/example/README.md

@@ -2,6 +2,6 @@
 
 If you want to run the example from the repo,
 
-- Clone the repository and run `lerna bootstrap` in the root
+- Clone the repository and run `yarn` in the project root
 - Run `yarn example start` to start the packager
 - Follow the instructions to open it with the [Expo app](https://expo.io/)

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.1",
+  "version": "5.0.0-alpha.6",
   "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

@@ -4,12 +4,14 @@ import { Linking } from 'expo';
 import { Appbar, List } from 'react-native-paper';
 import { Asset } from 'expo-asset';
 import {
-  NavigationContainer,
   InitialState,
   getStateFromPath,
   NavigationContainerRef,
 } from '@react-navigation/core';
-import { useBackButton, useLinking } from '@react-navigation/native';
+import {
+  useLinking,
+  NavigationNativeContainer,
+} from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerNavigationProp,
@@ -24,6 +26,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']);
 
@@ -48,6 +51,10 @@ const SCREENS = {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
+  'auth-flow': {
+    title: 'Auth Flow',
+    component: AuthFlow,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
@@ -60,8 +67,6 @@ Asset.loadAsync(StackAssets);
 export default function App() {
   const containerRef = React.useRef<NavigationContainerRef>();
 
-  useBackButton(containerRef);
-
   // To test deep linking on, run the following in the Terminal:
   // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
   // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
@@ -116,7 +121,7 @@ export default function App() {
   }
 
   return (
-    <NavigationContainer
+    <NavigationNativeContainer
       ref={containerRef}
       initialState={initialState}
       onStateChange={state =>
@@ -175,6 +180,6 @@ export default function App() {
           )}
         </Drawer.Screen>
       </Drawer.Navigator>
-    </NavigationContainer>
+    </NavigationNativeContainer>
   );
 }

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,55 @@
 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)
+
+
+### Features
+
+* add hook to scroll to top on tab press ([9e1104c](https://github.com/react-navigation/navigation-ex/commit/9e1104c))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.2...@react-navigation/material-bottom-tabs@5.0.0-alpha.3) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.1...@react-navigation/material-bottom-tabs@5.0.0-alpha.2) (2019-08-22)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/material-bottom-tabs/src/index.d.ts",
   "files": [
     "src",
     "lib"
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.2"
+    "@react-navigation/routers": "^5.0.0-alpha.7"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx

@@ -14,6 +14,7 @@ import MaterialBottomTabView from '../views/MaterialBottomTabView';
 import {
   MaterialBottomTabNavigationConfig,
   MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationEventMap,
 } from '../types';
 
 type Props = DefaultNavigatorOptions<MaterialBottomTabNavigationOptions> &
@@ -29,8 +30,9 @@ function MaterialBottomTabNavigator({
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     TabNavigationState,
+    TabRouterOptions,
     MaterialBottomTabNavigationOptions,
-    TabRouterOptions
+    MaterialBottomTabNavigationEventMap
   >(TabRouter, {
     initialRouteName,
     backBehavior,

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

@@ -3,14 +3,22 @@ import {
   ParamListBase,
   Descriptor,
   NavigationProp,
+  NavigationHelpers,
 } from '@react-navigation/core';
 import { TabNavigationState } from '@react-navigation/routers';
 
 export type MaterialBottomTabNavigationEventMap = {
-  refocus: undefined;
+  /**
+   * Event which fires on tapping on the tab in the tab bar.
+   */
   tabPress: undefined;
 };
 
+export type MaterialBottomTabNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  MaterialBottomTabNavigationEventMap
+>;
+
 export type MaterialBottomTabNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
@@ -28,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-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -2,21 +2,18 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { BottomNavigation } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';
-import {
-  NavigationHelpers,
-  ParamListBase,
-  Route,
-} from '@react-navigation/core';
+import { Route } from '@react-navigation/core';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import {
   MaterialBottomTabDescriptorMap,
   MaterialBottomTabNavigationConfig,
+  MaterialBottomTabNavigationHelpers,
 } from '../types';
 
 type Props = MaterialBottomTabNavigationConfig & {
   state: TabNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: MaterialBottomTabNavigationHelpers;
   descriptors: MaterialBottomTabDescriptorMap;
 };
 
@@ -65,19 +62,12 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
   };
 
   private handleTabPress = ({ route }: Scene) => {
-    const { state, navigation } = this.props;
+    const { navigation } = this.props;
 
     navigation.emit({
       type: 'tabPress',
       target: route.key,
     });
-
-    if (state.routes[state.index].key === route.key) {
-      navigation.emit({
-        type: 'refocus',
-        target: route.key,
-      });
-    }
   };
 
   private renderIcon = ({

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,55 @@
 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)
+
+
+### Features
+
+* add hook to scroll to top on tab press ([9e1104c](https://github.com/react-navigation/navigation-ex/commit/9e1104c))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.2...@react-navigation/material-top-tabs@5.0.0-alpha.3) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.1...@react-navigation/material-top-tabs@5.0.0-alpha.2) (2019-08-22)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/material-top-tabs/src/index.d.ts",
   "files": [
     "src",
     "lib"
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.2"
+    "@react-navigation/routers": "^5.0.0-alpha.7"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -13,6 +13,7 @@ import MaterialTopTabView from '../views/MaterialTopTabView';
 import {
   MaterialTopTabNavigationConfig,
   MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationEventMap,
 } from '../types';
 
 type Props = DefaultNavigatorOptions<MaterialTopTabNavigationOptions> &
@@ -28,8 +29,9 @@ function MaterialTopTabNavigator({
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     TabNavigationState,
+    TabRouterOptions,
     MaterialTopTabNavigationOptions,
-    TabRouterOptions
+    MaterialTopTabNavigationEventMap
   >(TabRouter, {
     initialRouteName,
     backBehavior,

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

@@ -10,10 +10,6 @@ import {
 import { TabNavigationState } from '@react-navigation/routers';
 
 export type MaterialTopTabNavigationEventMap = {
-  /**
-   * Event which fires on tapping on the tab for an already focused screen.
-   */
-  refocus: undefined;
   /**
    * Event which fires on tapping on the tab in the tab bar.
    */
@@ -32,6 +28,11 @@ export type MaterialTopTabNavigationEventMap = {
   swipeEnd: undefined;
 };
 
+export type MaterialTopTabNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  MaterialTopTabNavigationEventMap
+>;
+
 export type MaterialTopTabNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
@@ -49,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;
 };
@@ -124,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/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -1,21 +1,18 @@
 import * as React from 'react';
 import { TabView, SceneRendererProps } from 'react-native-tab-view';
-import {
-  NavigationHelpers,
-  ParamListBase,
-  Route,
-} from '@react-navigation/core';
+import { Route } from '@react-navigation/core';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import MaterialTopTabBar from './MaterialTopTabBar';
 import {
   MaterialTopTabDescriptorMap,
   MaterialTopTabNavigationConfig,
+  MaterialTopTabNavigationHelpers,
 } from '../types';
 
 type Props = MaterialTopTabNavigationConfig & {
   state: TabNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: MaterialTopTabNavigationHelpers;
   descriptors: MaterialTopTabDescriptorMap;
   tabBarPosition: 'top' | 'bottom';
 };
@@ -76,7 +73,6 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
     route: Route<string>;
     preventDefault: () => void;
   }) => {
-    const { state, navigation } = this.props;
     const event = this.props.navigation.emit({
       type: 'tabPress',
       target: route.key,
@@ -85,13 +81,6 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
     if (event.defaultPrevented) {
       preventDefault();
     }
-
-    if (state.routes[state.index].key === route.key) {
-      navigation.emit({
-        type: 'refocus',
-        target: route.key,
-      });
-    }
   };
 
   private handleTabLongPress = ({ route }: { route: Route<string> }) => {

packages/native/CHANGELOG.md

@@ -3,6 +3,73 @@
 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/native@5.0.0-alpha.5...@react-navigation/native@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.5...@react-navigation/native@5.0.0-alpha.6) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* add hook to scroll to top on tab press ([9e1104c](https://github.com/react-navigation/navigation-ex/commit/9e1104c))
+* add native container ([d26b77f](https://github.com/react-navigation/navigation-ex/commit/d26b77f))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.1...@react-navigation/native@5.0.0-alpha.2) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-08-21)
 
 

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/native/src/index.d.ts",
   "files": [
     "src",
     "lib"

packages/native/src/NavigationNativeContainer.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {
+  NavigationContainer,
+  NavigationContainerProps,
+  NavigationContainerRef,
+} from '@react-navigation/core';
+import useBackButton from './useBackButton';
+
+/**
+ * Container component which holds the navigation state
+ * designed for mobile apps.
+ * This should be rendered at the root wrapping the whole app.
+ *
+ * @param props.initialState Initial state object for the navigation tree.
+ * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which refers to the navigation object containing helper methods.
+ */
+const NavigationNativeContainer = React.forwardRef(function NativeContainer(
+  props: NavigationContainerProps,
+  ref: React.Ref<NavigationContainerRef>
+) {
+  const refContainer = React.useRef<NavigationContainerRef>(null);
+
+  useBackButton(refContainer);
+
+  React.useImperativeHandle(ref, () => refContainer.current);
+
+  return (
+    <NavigationContainer
+      {...props}
+      ref={refContainer}
+      children={props.children}
+    />
+  );
+});
+
+export default NavigationNativeContainer;

packages/native/src/index.tsx

@@ -1,2 +1,7 @@
+export {
+  default as NavigationNativeContainer,
+} from './NavigationNativeContainer';
+
 export { default as useBackButton } from './useBackButton';
 export { default as useLinking } from './useLinking';
+export { default as useScrollToTop } from './useScrollToTop';

packages/native/src/useScrollToTop.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useNavigation, EventArg } from '@react-navigation/core';
+
+type ScrollOptions = { y?: number; animated?: boolean };
+
+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(
+    () =>
+      // @ts-ignore
+      // 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(() => {
+          const scrollable = getScrollableNode(ref);
+
+          if (isFocused && !e.defaultPrevented && scrollable) {
+            // When user taps on already focused tab, scroll to top
+            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 });
+            }
+          }
+        });
+      }),
+    [navigation, ref]
+  );
+}

packages/routers/CHANGELOG.md

@@ -3,6 +3,55 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.2...@react-navigation/routers@5.0.0-alpha.3) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.1...@react-navigation/routers@5.0.0-alpha.2) (2019-08-22)
 
 

packages/routers/__tests__/DrawerRouter.test.tsx

@@ -0,0 +1,440 @@
+import { CommonActions } from '@react-navigation/core';
+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({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        isDrawerOpen: false,
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('baz', { answer: 42 })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: false,
+    routeKeyHistory: ['bar'],
+    routes: [
+      { key: 'baz', name: 'baz', params: { answer: 42 } },
+      { key: 'bar', name: 'bar' },
+    ],
+  });
+});
+
+it('handles open drawer action', () => {
+  const router = DrawerRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        isDrawerOpen: false,
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      DrawerActions.openDrawer()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: true,
+    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', () => {
+  const router = DrawerRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        isDrawerOpen: true,
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      DrawerActions.closeDrawer()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: false,
+    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', () => {
+  const router = DrawerRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        isDrawerOpen: true,
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      DrawerActions.toggleDrawer()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        isDrawerOpen: false,
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      DrawerActions.toggleDrawer()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: true,
+    routeKeyHistory: [],
+    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

@@ -0,0 +1,599 @@
+import { CommonActions } from '@react-navigation/core';
+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({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('qux', { answer: 42 })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+      {
+        key: 'qux-test',
+        name: 'qux',
+        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', () => {
+  const router = StackRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    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', () => {
+  const router = StackRouter({});
+
+  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()
+    )
+  ).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,
+    key: 'root',
+    index: 0,
+    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', () => {
+  const router = StackRouter({});
+
+  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.popToTop()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [{ key: 'baz', name: 'baz' }],
+  });
+});
+
+it('handles push action', () => {
+  const router = StackRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      StackActions.push('baz')
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 3,
+    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

@@ -0,0 +1,526 @@
+import { CommonActions } from '@react-navigation/core';
+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(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('baz', { answer: 42 })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar'],
+    routeKeyHistory: ['bar'],
+    routes: [
+      { key: 'baz', name: 'baz', params: { answer: 42 } },
+      { 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', () => {
+  const router = TabRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      TabActions.jumpTo('bar')
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar'],
+    routeKeyHistory: ['baz'],
+    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+  });
+});
+
+it('handles back action with backBehavior: history', () => {
+  const router = TabRouter({ backBehavior: 'history' });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: ['bar'],
+        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(
+      {
+        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 back action with backBehavior: order', () => {
+  const router = TabRouter({ backBehavior: 'order' });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar'],
+    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 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(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.goBack()
+    )
+  ).toBe(null);
+});
+
+it('handles back action with backBehavior: none', () => {
+  const router = TabRouter({ backBehavior: 'none' });
+
+  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(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.2",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/routers/src/index.d.ts",
   "files": [
     "src",
     "lib"

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,145 @@
 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.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.14...@react-navigation/stack@5.0.0-alpha.15) (2019-09-04)
+
+
+### Features
+
+* add approximate android Q transition ([196cce0](https://github.com/react-navigation/navigation-ex/commit/196cce0))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.13...@react-navigation/stack@5.0.0-alpha.14) (2019-09-03)
+
+
+### Bug Fixes
+
+* change order of attaching nodes in card exec ([167d58c](https://github.com/react-navigation/navigation-ex/commit/167d58c))
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.12...@react-navigation/stack@5.0.0-alpha.13) (2019-09-01)
+
+
+### Features
+
+* useForeground if possible in stack header backButton ([aa6313c](https://github.com/react-navigation/navigation-ex/commit/aa6313c))
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.11...@react-navigation/stack@5.0.0-alpha.12) (2019-09-01)
+
+
+### Bug Fixes
+
+* defer running the animation to next frame ([c7a79a6](https://github.com/react-navigation/navigation-ex/commit/c7a79a6))
+* stack with gesture enabled ([55ec815](https://github.com/react-navigation/navigation-ex/commit/55ec815))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.10...@react-navigation/stack@5.0.0-alpha.11) (2019-09-01)
+
+
+### Features
+
+* optimizations in stack ([3f853d4](https://github.com/react-navigation/navigation-ex/commit/3f853d4))
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* link proper descriptor for StackView ([469ec31](https://github.com/react-navigation/navigation-ex/commit/469ec31))
+* set correct pointer events when active prop changes ([1bbd6ac](https://github.com/react-navigation/navigation-ex/commit/1bbd6ac))
+
+
+### Features
+
+* add hook to scroll to top on tab press ([9e1104c](https://github.com/react-navigation/navigation-ex/commit/9e1104c))
+* add memoization of spring for stack ([7990cf2](https://github.com/react-navigation/navigation-ex/commit/7990cf2))
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.3...@react-navigation/stack@5.0.0-alpha.4) (2019-08-22)
+
+
+### Bug Fixes
+
+* fix path to typescript definitions ([f182315](https://github.com/react-navigation/navigation-ex/commit/f182315))
+
+
+
+
+
 # [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.2...@react-navigation/stack@5.0.0-alpha.3) (2019-08-22)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.15",
   "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/src/index.d.ts",
+  "types": "lib/typescript/stack/src/index.d.ts",
   "files": [
     "src",
     "lib"
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.2",
+    "@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],
   });
@@ -195,3 +198,34 @@ export function forRevealFromBottomAndroid({
     overlayStyle: { opacity: overlayOpacity },
   };
 }
+
+/**
+ * Standard Android-style reveal from the bottom for Android Q.
+ * TODO: Update this with correct values when AOSP is updated.
+ */
+export function forScaleFromCenterAndroid({
+  current,
+  next,
+}: CardInterpolationProps): CardInterpolatedStyle {
+  const cardOpacityFocused = interpolate(current.progress, {
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 1, 1],
+  });
+  const cardScaleFocused = interpolate(current.progress, {
+    inputRange: [0, 1],
+    outputRange: [0.9, 1],
+  });
+  const cardScaleUnFocused = next
+    ? interpolate(next.progress, {
+        inputRange: [0, 1],
+        outputRange: [1, 1.1],
+      })
+    : 1;
+
+  return {
+    containerStyle: {
+      opacity: cardOpacityFocused,
+      transform: [{ scale: cardScaleFocused }, { scale: cardScaleUnFocused }],
+    },
+  };
+}

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

@@ -1,6 +1,7 @@
 import {
   forHorizontalIOS,
   forVerticalIOS,
+  forScaleFromCenterAndroid,
   forRevealFromBottomAndroid,
   forFadeFromBottomAndroid,
   forModalPresentationIOS,
@@ -8,6 +9,7 @@ import {
 import { forNoAnimation, forFade } from './HeaderStyleInterpolators';
 import {
   TransitionIOSSpec,
+  ScaleFromCenterAndroidSpec,
   RevealFromBottomAndroidSpec,
   FadeOutToBottomAndroidSpec,
   FadeInFromBottomAndroidSpec,
@@ -17,7 +19,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 +32,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 +45,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 +58,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 +71,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 +84,22 @@ export const RevealFromBottomAndroid: TransitionPreset = {
   headerStyleInterpolator: forNoAnimation,
 };
 
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android 10 (Q).
+ */
+export const ScaleFromCenterAndroid: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: ScaleFromCenterAndroidSpec,
+    close: ScaleFromCenterAndroidSpec,
+  },
+  cardStyleInterpolator: forScaleFromCenterAndroid,
+  headerStyleInterpolator: forNoAnimation,
+};
+
+/**
+ * Default navigation transition for the current platform.
+ */
 export const DefaultTransition = Platform.select({
   ios: SlideFromRightIOS,
   default:
@@ -80,6 +108,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
@@ -42,3 +53,15 @@ export const RevealFromBottomAndroidSpec: TransitionSpec = {
     easing: Easing.bezier(0.35, 0.45, 0, 1),
   },
 };
+
+/**
+ * Approximate configuration for activity open animation from Android Q.
+ * TODO: Update this with correct values when AOSP is updated.
+ */
+export const ScaleFromCenterAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 425,
+    easing: Easing.bezier(0.35, 0.45, 0, 1),
+  },
+};

packages/stack/src/navigators/createStackNavigator.tsx

@@ -13,7 +13,11 @@ import {
 } from '@react-navigation/routers';
 import KeyboardManager from '../views/KeyboardManager';
 import StackView from '../views/Stack/StackView';
-import { StackNavigationConfig, StackNavigationOptions } from '../types';
+import {
+  StackNavigationConfig,
+  StackNavigationOptions,
+  StackNavigationEventMap,
+} from '../types';
 
 type Props = DefaultNavigatorOptions<StackNavigationOptions> &
   StackRouterOptions &
@@ -28,8 +32,9 @@ function StackNavigator({
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     StackNavigationState,
+    StackRouterOptions,
     StackNavigationOptions,
-    StackRouterOptions
+    StackNavigationEventMap
   >(StackRouter, {
     initialRouteName,
     children,
@@ -39,13 +44,21 @@ function StackNavigator({
   React.useEffect(
     () =>
       navigation.addListener &&
-      navigation.addListener('refocus', (e: EventArg<'refocus', undefined>) => {
-        if (state.index > 0 && !e.defaultPrevented) {
-          navigation.dispatch({
-            ...StackActions.popToTop(),
-            target: state.key,
-          });
-        }
+      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 && 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({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
       }),
     [navigation, state.index, state.key]
   );

packages/stack/src/types.tsx

@@ -10,6 +10,7 @@ import {
   ParamListBase,
   Descriptor,
   Route,
+  NavigationHelpers,
 } from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';
 
@@ -24,6 +25,11 @@ export type StackNavigationEventMap = {
   transitionEnd: { closing: boolean };
 };
 
+export type StackNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  StackNavigationEventMap
+>;
+
 export type StackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
@@ -41,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;
 
@@ -399,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.
    */
@@ -461,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

@@ -13,7 +13,13 @@ import {
   PanGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
-import { TransitionSpec, CardStyleInterpolator, Layout } from '../../types';
+import {
+  TransitionSpec,
+  CardStyleInterpolator,
+  Layout,
+  SpringConfig,
+  TimingConfig,
+} from '../../types';
 import memoize from '../../utils/memoize';
 import StackGestureContext from '../../utils/StackGestureContext';
 import PointerEventsView from './PointerEventsView';
@@ -50,12 +56,31 @@ type Props = ViewProps & {
   contentStyle?: StyleProp<ViewStyle>;
 };
 
+type AnimatedSpringConfig = {
+  damping: Animated.Value<number>;
+  mass: Animated.Value<number>;
+  stiffness: Animated.Value<number>;
+  restSpeedThreshold: Animated.Value<number>;
+  restDisplacementThreshold: Animated.Value<number>;
+  overshootClamping: Animated.Value<boolean>;
+};
+
+export type AnimatedTimingConfig = {
+  duration: Animated.Value<number>;
+  easing: Animated.EasingFunction;
+};
+
 type Binary = 0 | 1;
 
 const TRUE = 1;
+const TRUE_NODE = new Animated.Value(TRUE);
 const FALSE = 0;
-const NOOP = 0;
+const FALSE_NODE = new Animated.Value(FALSE);
+const NOOP_NODE = FALSE_NODE;
 const UNSET = -1;
+const UNSET_NODE = new Animated.Value(UNSET);
+
+const MINUS_ONE_NODE = UNSET_NODE;
 
 const DIRECTION_VERTICAL = -1;
 const DIRECTION_HORIZONTAL = 1;
@@ -94,6 +119,110 @@ const {
   Value,
 } = Animated;
 
+// We need to be prepared for both version of reanimated. With and w/out proc
+let memoizedSpring = spring;
+// @ts-ignore
+if (Animated.proc) {
+  // @ts-ignore
+  const springHelper = Animated.proc(
+    (
+      finished: Animated.Value<number>,
+      velocity: Animated.Value<number>,
+      position: Animated.Value<number>,
+      time: Animated.Value<number>,
+      prevPosition: Animated.Value<number>,
+      toValue: Animated.Adaptable<number>,
+      damping: Animated.Adaptable<number>,
+      mass: Animated.Adaptable<number>,
+      stiffness: Animated.Adaptable<number>,
+      overshootClamping: Animated.Adaptable<boolean>,
+      restSpeedThreshold: Animated.Adaptable<number>,
+      restDisplacementThreshold: Animated.Adaptable<number>,
+      clock: Animated.Clock
+    ) =>
+      spring(
+        clock,
+        {
+          finished,
+          velocity,
+          position,
+          time,
+          // @ts-ignore
+          prevPosition,
+        },
+        {
+          toValue,
+          damping,
+          mass,
+          stiffness,
+          overshootClamping,
+          restDisplacementThreshold,
+          restSpeedThreshold,
+        }
+      )
+  );
+
+  // @ts-ignore
+  memoizedSpring = function(
+    clock: Animated.Clock,
+    state: {
+      finished: Animated.Value<number>;
+      velocity: Animated.Value<number>;
+      position: Animated.Value<number>;
+      time: Animated.Value<number>;
+    },
+    config: {
+      toValue: Animated.Adaptable<number>;
+      damping: Animated.Adaptable<number>;
+      mass: Animated.Adaptable<number>;
+      stiffness: Animated.Adaptable<number>;
+      overshootClamping: Animated.Adaptable<boolean>;
+      restSpeedThreshold: Animated.Adaptable<number>;
+      restDisplacementThreshold: Animated.Adaptable<number>;
+    }
+  ) {
+    return springHelper(
+      state.finished,
+      state.velocity,
+      state.position,
+      state.time,
+      new Value(0),
+      config.toValue,
+      config.damping,
+      config.mass,
+      config.stiffness,
+      config.overshootClamping,
+      config.restSpeedThreshold,
+      config.restDisplacementThreshold,
+      clock
+    );
+  };
+}
+
+function transformSpringConfigToAnimatedValues(
+  config: SpringConfig
+): AnimatedSpringConfig {
+  return {
+    damping: new Animated.Value(config.damping),
+    stiffness: new Animated.Value(config.stiffness),
+    mass: new Animated.Value(config.mass),
+    restDisplacementThreshold: new Animated.Value(
+      config.restDisplacementThreshold
+    ),
+    restSpeedThreshold: new Animated.Value(config.restSpeedThreshold),
+    overshootClamping: new Animated.Value(config.overshootClamping),
+  };
+}
+
+function transformTimingConfigToAnimatedValues(
+  config: TimingConfig
+): AnimatedTimingConfig {
+  return {
+    duration: new Animated.Value(config.duration),
+    easing: config.easing,
+  };
+}
+
 export default class Card extends React.Component<Props> {
   static defaultProps = {
     overlayEnabled: Platform.OS !== 'ios',
@@ -122,7 +251,13 @@ 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(() =>
+        requestAnimationFrame(() =>
+          this.isClosing.setValue(closing ? TRUE : FALSE)
+        )
+      );
     }
   }
 
@@ -160,14 +295,34 @@ export default class Card extends React.Component<Props> {
     height: new Value(this.props.layout.height),
   };
 
+  openingSpecConfig =
+    this.props.transitionSpec.open.animation === 'timing'
+      ? transformTimingConfigToAnimatedValues(
+          this.props.transitionSpec.open.config
+        )
+      : transformSpringConfigToAnimatedValues(
+          this.props.transitionSpec.open.config
+        );
+
+  closingSpecConfig =
+    this.props.transitionSpec.close.animation === 'timing'
+      ? transformTimingConfigToAnimatedValues(
+          this.props.transitionSpec.close.config
+        )
+      : transformSpringConfigToAnimatedValues(
+          this.props.transitionSpec.close.config
+        );
+
   private distance = cond(
     eq(this.direction, DIRECTION_VERTICAL),
     this.layout.height,
     this.layout.width
   );
 
+  private gestureUntraversed = new Value(0);
   private gesture = new Value(0);
   private offset = new Value(0);
+  private velocityUntraversed = new Value(0);
   private velocity = new Value(0);
 
   private gestureState = new Value(0);
@@ -187,11 +342,22 @@ 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;
 
-    return cond(eq(this.props.current, isVisible), NOOP, [
-      cond(clockRunning(this.clock), NOOP, [
+    return cond(eq(this.props.current, isVisible), NOOP_NODE, [
+      cond(clockRunning(this.clock), NOOP_NODE, [
         // Animation wasn't running before
         // Set the initial values and start the clock
         set(this.toValue, isVisible),
@@ -200,13 +366,17 @@ export default class Card extends React.Component<Props> {
         set(
           this.transitionVelocity,
           multiply(
-            cond(this.distance, divide(this.velocity, this.distance), 0),
+            cond(
+              this.distance,
+              divide(this.velocity, this.distance),
+              FALSE_NODE
+            ),
             -1
           )
         ),
-        set(this.frameTime, 0),
-        set(this.transitionState.time, 0),
-        set(this.transitionState.finished, FALSE),
+        set(this.frameTime, FALSE_NODE),
+        set(this.transitionState.time, FALSE_NODE),
+        set(this.transitionState.finished, FALSE_NODE),
         set(this.isVisible, isVisible),
         startClock(this.clock),
         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
@@ -217,41 +387,57 @@ export default class Card extends React.Component<Props> {
         }),
       ]),
       cond(
-        eq(isVisible, 1),
-        openingSpec.timing === 'spring'
-          ? spring(
+        eq(isVisible, TRUE_NODE),
+        openingSpec.animation === 'spring'
+          ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
-              { ...openingSpec.config, toValue: this.toValue }
+              // @ts-ignore
+              {
+                ...(this.openingSpecConfig as AnimatedSpringConfig),
+                toValue: this.toValue,
+              }
             )
           : timing(
               this.clock,
               { ...this.transitionState, frameTime: this.frameTime },
-              { ...openingSpec.config, toValue: this.toValue }
+              {
+                ...(this.openingSpecConfig as AnimatedTimingConfig),
+                toValue: this.toValue,
+              }
             ),
-        closingSpec.timing === 'spring'
-          ? spring(
+        closingSpec.animation === 'spring'
+          ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
-              { ...closingSpec.config, toValue: this.toValue }
+              // @ts-ignore
+              {
+                ...(this.closingSpecConfig as AnimatedSpringConfig),
+                toValue: this.toValue,
+              }
             )
           : timing(
               this.clock,
               { ...this.transitionState, frameTime: this.frameTime },
-              { ...closingSpec.config, toValue: this.toValue }
+              {
+                ...(this.closingSpecConfig as AnimatedTimingConfig),
+                toValue: this.toValue,
+              }
             )
       ),
       cond(this.transitionState.finished, [
         // Reset values
-        set(this.isSwipeGesture, FALSE),
-        set(this.gesture, 0),
-        set(this.velocity, 0),
+        set(this.isSwipeGesture, FALSE_NODE),
+        set(this.gesture, FALSE_NODE),
+        set(this.velocity, FALSE_NODE),
         // When the animation finishes, stop the clock
         stopClock(this.clock),
         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 {
@@ -267,25 +453,58 @@ export default class Card extends React.Component<Props> {
     multiply(this.velocity, SWIPE_VELOCITY_IMPACT)
   );
 
-  private exec = block([
+  private exec = [
+    set(
+      this.gesture,
+      multiply(
+        this.gestureUntraversed,
+        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+      )
+    ),
+    set(
+      this.velocity,
+      multiply(
+        this.velocityUntraversed,
+        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+      )
+    ),
     onChange(
       this.isClosing,
-      cond(this.isClosing, set(this.nextIsVisible, FALSE))
+      cond(this.isClosing, set(this.nextIsVisible, FALSE_NODE))
     ),
     onChange(
       this.nextIsVisible,
-      cond(neq(this.nextIsVisible, UNSET), [
+      cond(neq(this.nextIsVisible, UNSET_NODE), [
         // Stop any running animations
         cond(clockRunning(this.clock), [
-          call([], () => (this.isRunningAnimation = false)),
+          call([], this.handleTransitionEnd),
           stopClock(this.clock),
         ]),
-        set(this.gesture, 0),
+        set(this.gesture, FALSE_NODE),
         // Update the index to trigger the transition
         set(this.isVisible, this.nextIsVisible),
-        set(this.nextIsVisible, UNSET),
+        set(this.nextIsVisible, UNSET_NODE),
       ])
     ),
+  ];
+
+  private changeVisiblityExec = onChange(
+    this.isVisible,
+    call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
+  );
+
+  private execNoGesture = block([
+    ...this.exec,
+    this.runTransition(this.isVisible),
+    onChange(
+      this.isVisible,
+      call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
+    ),
+    this.changeVisiblityExec,
+  ]);
+
+  private execWithGesture = block([
+    ...this.exec,
     onChange(
       this.isSwiping,
       call(
@@ -312,11 +531,11 @@ export default class Card extends React.Component<Props> {
     cond(
       eq(this.gestureState, GestureState.ACTIVE),
       [
-        cond(this.isSwiping, NOOP, [
+        cond(this.isSwiping, NOOP_NODE, [
           // We weren't dragging before, set it to true
-          set(this.isSwipeCancelled, FALSE),
-          set(this.isSwiping, TRUE),
-          set(this.isSwipeGesture, TRUE),
+          set(this.isSwipeCancelled, FALSE_NODE),
+          set(this.isSwiping, TRUE_NODE),
+          set(this.isSwipeGesture, TRUE_NODE),
           // Also update the drag offset to the last position
           set(this.offset, this.props.current),
         ]),
@@ -327,11 +546,15 @@ export default class Card extends React.Component<Props> {
             max(
               sub(
                 this.offset,
-                cond(this.distance, divide(this.gesture, this.distance), 1)
+                cond(
+                  this.distance,
+                  divide(this.gesture, this.distance),
+                  TRUE_NODE
+                )
               ),
-              0
+              FALSE_NODE
             ),
-            1
+            TRUE_NODE
           )
         ),
         // Stop animations while we're dragging
@@ -354,7 +577,7 @@ export default class Card extends React.Component<Props> {
           this.isSwipeCancelled,
           eq(this.gestureState, GestureState.CANCELLED)
         ),
-        set(this.isSwiping, FALSE),
+        set(this.isSwiping, FALSE_NODE),
         this.runTransition(
           cond(
             greaterThan(
@@ -363,30 +586,29 @@ export default class Card extends React.Component<Props> {
             ),
             cond(
               lessThan(
-                cond(eq(this.velocity, 0), this.gesture, this.velocity),
-                0
+                cond(
+                  eq(this.velocity, FALSE_NODE),
+                  this.gesture,
+                  this.velocity
+                ),
+                FALSE_NODE
               ),
-              TRUE,
-              FALSE
+              TRUE_NODE,
+              FALSE_NODE
             ),
             this.isVisible
           )
         ),
       ]
     ),
-    onChange(
-      this.isVisible,
-      call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
-    ),
+    this.changeVisiblityExec,
   ]);
 
   private handleGestureEventHorizontal = Animated.event([
     {
       nativeEvent: {
-        translationX: (x: Animated.Adaptable<number>) =>
-          set(this.gesture, multiply(x, I18nManager.isRTL ? -1 : 1)),
-        velocityX: (x: Animated.Adaptable<number>) =>
-          set(this.velocity, multiply(x, I18nManager.isRTL ? -1 : 1)),
+        translationX: this.gestureUntraversed,
+        velocityX: this.velocityUntraversed,
         state: this.gestureState,
       },
     },
@@ -415,10 +637,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,
@@ -426,6 +646,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;
 
@@ -466,45 +698,53 @@ 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/PointerEventsView.tsx

@@ -23,6 +23,13 @@ const { block, greaterThan, cond, set, call, onChange } = Animated;
  * whenever position changes.
  */
 export default class PointerEventsView extends React.Component<Props> {
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.active !== prevProps.active) {
+      this.pointerEventsEnabled.setValue(this.props.active ? TRUE : FALSE);
+      this.setPointerEventsEnabled(this.props.active);
+    }
+  }
+
   private pointerEventsEnabled = new Animated.Value<Binary>(
     this.props.active ? TRUE : FALSE
   );
@@ -40,13 +47,17 @@ export default class PointerEventsView extends React.Component<Props> {
     onChange(
       this.pointerEventsEnabled,
       call([this.pointerEventsEnabled], ([value]) => {
-        const pointerEvents = this.props.active && value ? 'box-none' : 'none';
-
-        this.root && this.root.setNativeProps({ pointerEvents });
+        this.setPointerEventsEnabled(Boolean(this.props.active && value));
       })
     ),
   ]);
 
+  private setPointerEventsEnabled = (enabled: boolean) => {
+    const pointerEvents = enabled ? 'box-none' : 'none';
+
+    this.root && this.root.setNativeProps({ pointerEvents });
+  };
+
   private root: View | null = null;
 
   render() {

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

@@ -10,11 +10,7 @@ import {
 import Animated from 'react-native-reanimated';
 // eslint-disable-next-line import/no-unresolved
 import * as Screens from 'react-native-screens'; // Import with * as to prevent getters being called
-import {
-  Route,
-  NavigationHelpers,
-  ParamListBase,
-} from '@react-navigation/core';
+import { Route } from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';
 
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
@@ -31,6 +27,7 @@ import {
   HeaderScene,
   StackDescriptorMap,
   StackNavigationOptions,
+  StackNavigationHelpers,
 } from '../../types';
 
 type ProgressValues = {
@@ -40,7 +37,7 @@ type ProgressValues = {
 type Props = {
   mode: 'card' | 'modal';
   state: StackNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
   routes: Route<string>[];
   openingRoutes: string[];
@@ -170,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,
@@ -182,8 +182,6 @@ export default class Stack extends React.Component<Props, State> {
           },
         };
 
-        const oldScene = state.scenes[index];
-
         if (
           oldScene &&
           scene.route === oldScene.route &&
@@ -331,8 +329,8 @@ export default class Stack extends React.Component<Props, State> {
           {routes.map((route, index, self) => {
             const focused = focusedRoute.key === route.key;
             const current = progress[route.key];
-            const descriptor = descriptors[route.key];
             const scene = scenes[index];
+            const descriptor = scene.descriptor;
             const next = self[index + 1]
               ? progress[self[index + 1].key]
               : ANIMATED_ONE;

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

@@ -2,14 +2,16 @@ import * as React from 'react';
 import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { StackNavigationState } from '@react-navigation/routers';
-import {
-  Route,
-  NavigationHelpers,
-  ParamListBase,
-} from '@react-navigation/core';
+import { Route } from '@react-navigation/core';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
-import { HeaderScene, Layout, HeaderMode, TransitionPreset } from '../../types';
+import {
+  StackNavigationHelpers,
+  HeaderScene,
+  Layout,
+  HeaderMode,
+  TransitionPreset,
+} from '../../types';
 
 type Props = TransitionPreset & {
   index: number;
@@ -21,7 +23,7 @@ type Props = TransitionPreset & {
   previousScene?: HeaderScene<Route<string>>;
   scene: HeaderScene<Route<string>>;
   state: StackNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: StackNavigationHelpers;
   cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;

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

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import {
-  ParamListBase,
-  Route,
-  NavigationHelpers,
-} from '@react-navigation/core';
+import { Route } from '@react-navigation/core';
 import { StackActions, StackNavigationState } from '@react-navigation/routers';
 
 import Stack from './Stack';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import { StackNavigationConfig, StackDescriptorMap } from '../../types';
+import {
+  StackNavigationHelpers,
+  StackNavigationConfig,
+  StackDescriptorMap,
+} from '../../types';
 
 type Props = StackNavigationConfig & {
   state: StackNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;

packages/stack/src/views/TouchableItem.tsx

@@ -52,6 +52,7 @@ export default class TouchableItem extends React.Component<Props> {
       return (
         <TouchableNativeFeedback
           {...rest}
+          useForeground={TouchableNativeFeedback.canUseNativeForeground()}
           background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
         >
           <View style={style}>{React.Children.only(children)}</View>

tsconfig.json

@@ -2,7 +2,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@react-navigation/*": ["./packages/*/src", "./packages/*/lib/typescript"],
+      "@react-navigation/*": [
+        "./packages/*/src",
+        "./packages/*/lib/typescript"
+      ],
       "use-subscription": ["./typings/use-subscription.d"]
     },
     "allowUnreachableCode": false,