chore: publish

- @react-navigation/bottom-tabs@6.0.0-next.6
 - @react-navigation/core@6.0.0-next.3
 - @react-navigation/devtools@6.0.0-next.3
 - @react-navigation/drawer@6.0.0-next.5
 - @react-navigation/elements@1.0.0-next.5
 - @react-navigation/material-bottom-tabs@6.0.0-next.3
 - @react-navigation/material-top-tabs@6.0.0-next.4
 - @react-navigation/native@6.0.0-next.3
 - @react-navigation/stack@6.0.0-next.10

.github/workflows/check-repro.yml

@@ -23,10 +23,7 @@ jobs:
               'gm'
             );
 
-            if (!regex.test(body)) {
+            if (regex.test(body)) {
-              return;
-            }
-
               await github.issues.addLabels({
                 issue_number: context.issue.number,
                 owner: context.repo.owner,
@@ -46,3 +43,34 @@ jobs:
                   throw error;
                 }
               }
+            } else {
+              if (context.eventName !== 'issues') {
+                return;
+              }
+
+              const body = "Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a [snack.expo.io](https://snack.expo.io) link or link to a GitHub repo under your username).\n\nCan you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.";
+
+              const comments = await github.issues.listComments({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+              });
+
+              if (comments.data.some(comment => comment.body === body)) {
+                return;
+              }
+
+              await github.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body,
+              });
+
+              await github.issues.addLabels({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                labels: ['needs repro'],
+              });
+            }

.github/workflows/expo-preview.yml

@@ -18,9 +18,7 @@ jobs:
       - name: Setup Expo
         uses: expo/expo-github-action@v5
         with:
-          expo-version: 3.x
+          expo-token: ${{ secrets.EXPO_TOKEN }}
-          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
-          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
       - name: Restore yarn cache
@@ -36,7 +34,7 @@ jobs:
 
       - name: Publish Expo app
         working-directory: ./example
-        run: expo publish --release-channel=pr-${{ github.event.number }}
+        run: yarn expo publish --release-channel=pr-${{ github.event.number }}
         env:
           EXPO_USE_DEV_SERVER: true
 

.github/workflows/expo.yml

@@ -21,9 +21,7 @@ jobs:
       - name: Setup Expo
         uses: expo/expo-github-action@v5
         with:
-          expo-version: 3.x
+          expo-token: ${{ secrets.EXPO_TOKEN }}
-          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
-          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
       - name: Restore yarn cache
@@ -39,4 +37,4 @@ jobs:
 
       - name: Publish Expo app
         working-directory: ./example
-        run: expo publish
+        run: yarn expo publish

.github/workflows/first-pull-request.yml

@@ -1,5 +1,5 @@
 name: First pull request
-on: pull_request
+on: pull_request_target
 
 jobs:
   welcome:
@@ -12,13 +12,13 @@ jobs:
             // Get a list of all issues created by the PR opener
             // See: https://octokit.github.io/rest.js/#pagination
             const creator = context.payload.sender.login;
-            const opts = github.issues.listForRepo.endpoint.merge({
+            const options = github.issues.listForRepo.endpoint.merge({
               ...context.issue,
               creator,
               state: 'all'
             });
 
-            const issues = await github.paginate(opts);
+            const issues = await github.paginate(options);
 
             for (const issue of issues) {
               if (issue.number === context.issue.number) {
@@ -26,7 +26,7 @@ jobs:
               }
 
               if (issue.pull_request) {
-                return ;// Creator is already a contributor.
+                return; // Creator is already a contributor.
               }
             }
 
@@ -41,5 +41,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey ${creator}! Thanks for opening the pull request. If you haven't already, make sure to read our [contribution guidelines](https://github.com/react-navigation/react-navigation/blob/main/CONTRIBUTING.md)."
+              body: `Hey ${creator}! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our [contribution guidelines](https://github.com/react-navigation/react-navigation/blob/main/CONTRIBUTING.md).`
             });

.github/workflows/sponsor.yml

@@ -0,0 +1,15 @@
+name: Label sponsors
+on:
+  pull_request:
+    types: [opened]
+  issues:
+    types: [opened]
+
+jobs:
+  build:
+    name: is-sponsor-label
+    runs-on: ubuntu-latest
+    steps:
+      - uses: JasonEtco/is-sponsor-label-action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/stale.yml

@@ -0,0 +1,21 @@
+name: Close stale issues and PRs
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-stale: 30
+          days-before-close: 7
+          any-of-labels: 'needs more info,needs repro,needs response'
+          exempt-issue-labels: 'repro provided,keep open'
+          exempt-pr-labels: 'keep open'
+          stale-issue-label: 'stale'
+          stale-pr-label: 'stale'
+          stale-issue-message: 'Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.'
+          stale-pr-message: 'Hello 👋, this pull request has been open for more than a month with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.'

.github/workflows/triage.yml

@@ -31,7 +31,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible.\n\nThe easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then please provide the repro in a GitHub repository."
+              body: "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.\n\nThe easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then please provide the repro in a GitHub repository."
             })
 
   question:

.gitignore

@@ -33,3 +33,5 @@ npm-debug.*
 *.key
 *.mobileprovision
 *.orig.*
+
+*.iml

example/src/index.tsx

@@ -28,13 +28,13 @@ import {
   DefaultTheme,
   DarkTheme,
   PathConfigMap,
-  NavigationContainerRef,
+  useNavigationContainerRef,
 } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStackNavigator,
-  StackScreenProps,
   HeaderStyleInterpolators,
+  StackNavigationProp,
 } from '@react-navigation/stack';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
 
@@ -193,7 +193,7 @@ export default function App() {
     return () => Dimensions.removeEventListener('change', onDimensionsChange);
   }, []);
 
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
+  const navigationRef = useNavigationContainerRef<RootStackParamList>();
 
   useReduxDevToolsExtension(navigationRef);
 
@@ -304,7 +304,11 @@ export default function App() {
                     ),
                   }}
                 >
-                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
+                  {({
+                    navigation,
+                  }: {
+                    navigation: StackNavigationProp<RootStackParamList>;
+                  }) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.5...@react-navigation/bottom-tabs@6.0.0-next.6) (2021-05-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [6.0.0-next.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.4...@react-navigation/bottom-tabs@6.0.0-next.5) (2021-04-16)
+
+
+### Bug Fixes
+
+* update tab bar height correctly. fixes [#9296](https://github.com/react-navigation/react-navigation/issues/9296) ([338ed6f](https://github.com/react-navigation/react-navigation/commit/338ed6ff07bd2d6efa1abdb369612ea72f540502))
+
+
+
+
+
 # [6.0.0-next.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.3...@react-navigation/bottom-tabs@6.0.0-next.4) (2021-04-08)
 
 

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "6.0.0-next.4",
+  "version": "6.0.0-next.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.4",
+    "@react-navigation/elements": "^1.0.0-next.5",
     "color": "^3.1.3",
     "warn-once": "^0.0.1"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.2",
+    "@react-navigation/native": "^6.0.0-next.3",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",

packages/bottom-tabs/src/types.tsx

@@ -42,7 +42,7 @@ export type BottomTabNavigationHelpers = NavigationHelpers<
 
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -54,7 +54,7 @@ export type BottomTabNavigationProp<
 
 export type BottomTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: BottomTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -239,7 +239,7 @@ export type BottomTabNavigationOptions = HeaderOptions & {
 export type BottomTabDescriptor = Descriptor<
   BottomTabNavigationOptions,
   BottomTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
@@ -283,7 +283,7 @@ export type BottomTabHeaderProps = {
   /**
    * Route object for the current screen.
    */
-  route: RouteProp<ParamListBase, string>;
+  route: RouteProp<ParamListBase>;
   /**
    * Navigation prop for the header.
    */

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -284,12 +284,9 @@ export default function BottomTabBar({
         tabBarStyle,
       ]}
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-    >
-      <View
-        accessibilityRole="tablist"
-        style={styles.content}
       onLayout={handleLayout}
     >
+      <View accessibilityRole="tablist" style={styles.content}>
         {routes.map((route, index) => {
           const focused = index === state.index;
           const { options } = descriptors[route.key];

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.2...@react-navigation/core@6.0.0-next.3) (2021-05-01)
+
+
+### Features
+
+* add a CompositeScreenProps type ([def7c03](https://github.com/react-navigation/react-navigation/commit/def7c03d7d7b42cf322f4e277f8f76858717654e))
+* add helper and hook for container ref ([0ecd112](https://github.com/react-navigation/react-navigation/commit/0ecd112ec9786a26261ada3d33ef44dc1ec84da0))
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.1...@react-navigation/core@6.0.0-next.2) (2021-04-08)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react",
     "react-native",

packages/core/src/BaseNavigationContainer.tsx

@@ -6,6 +6,7 @@ import {
   InitialState,
   PartialState,
   NavigationAction,
+  ParamListBase,
 } from '@react-navigation/routers';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import UnhandledActionContext from './UnhandledActionContext';
@@ -22,6 +23,7 @@ import useSyncState from './useSyncState';
 import checkSerializable from './checkSerializable';
 import checkDuplicateRouteNames from './checkDuplicateRouteNames';
 import findFocusedRoute from './findFocusedRoute';
+import { NOT_INITIALIZED_ERROR } from './createNavigationContainerRef';
 import type {
   NavigationContainerEventMap,
   NavigationContainerRef,
@@ -30,9 +32,6 @@ import type {
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
-const NOT_INITIALIZED_ERROR =
-  "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
-
 const serializableWarnings: string[] = [];
 const duplicateNameWarnings: string[] = [];
 
@@ -103,7 +102,7 @@ const BaseNavigationContainer = React.forwardRef(
       independent,
       children,
     }: NavigationContainerProps,
-    ref?: React.Ref<NavigationContainerRef>
+    ref?: React.Ref<NavigationContainerRef<ParamListBase>>
   ) {
     const parent = React.useContext(NavigationStateContext);
 
@@ -202,16 +201,10 @@ const BaseNavigationContainer = React.forwardRef(
     const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({});
 
     React.useImperativeHandle(ref, () => ({
-      ...(Object.keys(
+      ...Object.keys(CommonActions).reduce<any>((acc, name) => {
-        CommonActions
-      ) as (keyof typeof CommonActions)[]).reduce<any>((acc, name) => {
         acc[name] = (...args: any[]) =>
-          dispatch(
+          // @ts-expect-error: this is ok
-            CommonActions[name](
+          dispatch(CommonActions[name](...args));
-              // @ts-expect-error: we can't know the type statically
-              ...args
-            )
-          );
         return acc;
       }, {}),
       ...emitter.create('root'),
@@ -223,6 +216,7 @@ const BaseNavigationContainer = React.forwardRef(
       getParent: () => undefined,
       getCurrentRoute,
       getCurrentOptions,
+      isReady: () => listeners.focus[0] != null,
     }));
 
     const onDispatchAction = React.useCallback(

packages/core/src/NavigationContext.tsx

@@ -6,7 +6,7 @@ import type { NavigationProp } from './types';
  * Context which holds the navigation prop for a screen.
  */
 const NavigationContext = React.createContext<
-  NavigationProp<ParamListBase, string, any, any> | undefined
+  NavigationProp<ParamListBase> | undefined
 >(undefined);
 
 export default NavigationContext;

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

@@ -3,16 +3,17 @@ import { act, render } from '@testing-library/react-native';
 import {
   DefaultRouterOptions,
   NavigationState,
+  ParamListBase,
   Router,
   StackRouter,
   TabRouter,
 } from '@react-navigation/routers';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import NavigationStateContext from '../NavigationStateContext';
+import createNavigationContainerRef from '../createNavigationContainerRef';
 import MockRouter, { MockActions } from './__fixtures__/MockRouter';
 import useNavigationBuilder from '../useNavigationBuilder';
 import Screen from '../Screen';
-import type { NavigationContainerRef } from '../types';
 
 it('throws when getState is accessed without a container', () => {
   expect.assertions(1);
@@ -128,7 +129,7 @@ it('handle dispatching with ref', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const onStateChange = jest.fn();
 
@@ -226,7 +227,7 @@ it('handle resetting state with ref', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const onStateChange = jest.fn();
 
@@ -316,7 +317,7 @@ it('handles getRootState', () => {
     return descriptors[state.routes[state.index].key].render();
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref}>
@@ -378,7 +379,7 @@ it('emits state events when the state changes', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref}>
@@ -448,7 +449,7 @@ it('emits state events when new navigator mounts', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const NestedNavigator = () => {
     const [isRendered, setIsRendered] = React.useState(false);
@@ -537,7 +538,7 @@ it('emits option events when options change with tab router', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref}>
@@ -611,7 +612,7 @@ it('emits option events when options change with stack router', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref}>
@@ -677,7 +678,7 @@ it('emits option events when options change with stack router', () => {
 it('throws if there is no navigator rendered', () => {
   expect.assertions(1);
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = <BaseNavigationContainer ref={ref} children={null} />;
 
@@ -697,7 +698,7 @@ it('throws if there is no navigator rendered', () => {
 it("throws if the ref hasn't finished initializing", () => {
   expect.assertions(1);
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -733,7 +734,7 @@ it("throws if the ref hasn't finished initializing", () => {
 });
 
 it('invokes the unhandled action listener with the unhandled action', () => {
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
   const fn = jest.fn();
 
   const TestNavigator = (props: any) => {
@@ -779,7 +780,7 @@ it('works with state change events in independent nested container', () => {
     );
   };
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const onStateChange = jest.fn();
 

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { render, act } from '@testing-library/react-native';
-import type { NavigationState } from '@react-navigation/routers';
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import Screen from '../Screen';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
+import createNavigationContainerRef from '../createNavigationContainerRef';
 import useNavigation from '../useNavigation';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
-import type { NavigationContainerRef } from '../types';
 
 beforeEach(() => (MockRouterKey.current = 0));
 
@@ -679,7 +679,7 @@ it('navigates to nested child in a navigator', () => {
 
   const onStateChange = jest.fn();
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const element = render(
     <BaseNavigationContainer ref={navigation} onStateChange={onStateChange}>
@@ -715,7 +715,7 @@ it('navigates to nested child in a navigator', () => {
   expect(element).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
 
   act(() =>
-    navigation.current?.navigate('bar', {
+    navigation.navigate('bar', {
       screen: 'bar-b',
       params: { test: 42 },
     })
@@ -726,7 +726,7 @@ it('navigates to nested child in a navigator', () => {
   );
 
   act(() =>
-    navigation.current?.navigate('bar', {
+    navigation.navigate('bar', {
       screen: 'bar-a',
       params: { whoa: 'test' },
     })
@@ -736,15 +736,15 @@ it('navigates to nested child in a navigator', () => {
     `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
   );
 
-  act(() => navigation.current?.navigate('bar', { screen: 'bar-b' }));
+  act(() => navigation.navigate('bar', { screen: 'bar-b' }));
 
-  act(() => navigation.current?.goBack());
+  act(() => navigation.goBack());
 
   expect(element).toMatchInlineSnapshot(
     `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
   );
 
-  act(() => navigation.current?.navigate('bar', { screen: 'bar-b' }));
+  act(() => navigation.navigate('bar', { screen: 'bar-b' }));
 
   expect(element).toMatchInlineSnapshot(
     `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42,\\"whoa\\":\\"test\\"}]"`
@@ -799,7 +799,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
 
   const onStateChange = jest.fn();
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const first = render(
     <BaseNavigationContainer ref={navigation} onStateChange={onStateChange}>
@@ -833,7 +833,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
   );
 
   expect(first).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -866,7 +866,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
   });
 
   act(() =>
-    navigation.current?.navigate('bar', {
+    navigation.navigate('bar', {
       screen: 'bar-b',
       params: { test: 42 },
     })
@@ -876,7 +876,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
     `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42}]"`
   );
 
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 2,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -944,7 +944,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
   );
 
   expect(second).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 0,
     key: '4',
     routeNames: ['foo', 'bar'],
@@ -971,7 +971,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
   });
 
   act(() =>
-    navigation.current?.navigate('bar', {
+    navigation.navigate('bar', {
       screen: 'bar-b',
       params: { test: 42 },
       initial: false,
@@ -980,7 +980,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
 
   expect(second).toMatchInlineSnapshot(`"[bar-b, {\\"test\\":42}]"`);
 
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 2,
     key: '4',
     routeNames: ['foo', 'bar'],
@@ -1071,7 +1071,7 @@ it('navigates to nested child in a navigator with initial: false', () => {
 
   expect(third).toMatchInlineSnapshot(`"[bar-b, {\\"some\\":\\"stuff\\"}]"`);
 
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 1,
     key: '11',
     routeNames: ['foo', 'bar'],
@@ -1119,7 +1119,7 @@ it('resets state of a nested child in a navigator', () => {
 
   const onStateChange = jest.fn();
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const first = render(
     <BaseNavigationContainer ref={navigation} onStateChange={onStateChange}>
@@ -1150,7 +1150,7 @@ it('resets state of a nested child in a navigator', () => {
 
   expect(first).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
 
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -1183,7 +1183,7 @@ it('resets state of a nested child in a navigator', () => {
   });
 
   act(() =>
-    navigation.current?.navigate('bar', {
+    navigation.navigate('bar', {
       state: {
         routes: [{ name: 'bar-a' }, { name: 'bar-b' }],
       },
@@ -1192,7 +1192,7 @@ it('resets state of a nested child in a navigator', () => {
 
   expect(first).toMatchInlineSnapshot(`"[bar-a, undefined]"`);
 
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 1,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -1231,7 +1231,7 @@ it('resets state of a nested child in a navigator', () => {
   });
 
   act(() =>
-    navigation.current?.navigate('bar', {
+    navigation.navigate('bar', {
       state: {
         index: 2,
         routes: [
@@ -1245,7 +1245,7 @@ it('resets state of a nested child in a navigator', () => {
 
   expect(first).toMatchInlineSnapshot(`"[bar-a, {\\"test\\":18}]"`);
 
-  expect(navigation.current?.getRootState()).toEqual({
+  expect(navigation.getRootState()).toEqual({
     index: 1,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -1336,7 +1336,7 @@ it('preserves order of screens in state with non-numeric names', () => {
     return null;
   };
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const root = (
     <BaseNavigationContainer ref={navigation}>
@@ -1350,11 +1350,7 @@ it('preserves order of screens in state with non-numeric names', () => {
 
   render(root);
 
-  expect(navigation.current?.getRootState().routeNames).toEqual([
+  expect(navigation.getRootState().routeNames).toEqual(['foo', 'bar', 'baz']);
-    'foo',
-    'bar',
-    'baz',
-  ]);
 });
 
 it('preserves order of screens in state with numeric names', () => {
@@ -1363,7 +1359,7 @@ it('preserves order of screens in state with numeric names', () => {
     return null;
   };
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const root = (
     <BaseNavigationContainer ref={navigation}>
@@ -1377,11 +1373,7 @@ it('preserves order of screens in state with numeric names', () => {
 
   render(root);
 
-  expect(navigation.current?.getRootState().routeNames).toEqual([
+  expect(navigation.getRootState().routeNames).toEqual(['4', '7', '1']);
-    '4',
-    '7',
-    '1',
-  ]);
 });
 
 it("throws if navigator doesn't have any screens", () => {
@@ -1801,7 +1793,7 @@ it('returns currently focused route with getCurrentRoute', () => {
 
   const TestScreen = () => null;
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const container = (
     <BaseNavigationContainer ref={navigation}>
@@ -1824,7 +1816,7 @@ it('returns currently focused route with getCurrentRoute', () => {
 
   render(container).update(container);
 
-  expect(navigation.current?.getCurrentRoute()).toEqual({
+  expect(navigation.getCurrentRoute()).toEqual({
     key: 'bar-a',
     name: 'bar-a',
   });
@@ -1839,7 +1831,7 @@ it("returns focused screen's options with getCurrentOptions when focused screen
 
   const TestScreen = () => null;
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const container = (
     <BaseNavigationContainer ref={navigation}>
@@ -1870,14 +1862,14 @@ it("returns focused screen's options with getCurrentOptions when focused screen
 
   render(container).update(container);
 
-  expect(navigation.current?.getCurrentOptions()).toEqual({
+  expect(navigation.getCurrentOptions()).toEqual({
     sample: 'data',
     sample2: 'data',
   });
 
-  act(() => navigation.current?.navigate('bar-b'));
+  act(() => navigation.navigate('bar-b'));
 
-  expect(navigation.current?.getCurrentOptions()).toEqual({
+  expect(navigation.getCurrentOptions()).toEqual({
     sample2: 'data',
     sample3: 'data',
   });
@@ -1892,7 +1884,7 @@ it("returns focused screen's options with getCurrentOptions when all screens are
 
   const TestScreen = () => null;
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const container = (
     <BaseNavigationContainer ref={navigation}>
@@ -1923,14 +1915,14 @@ it("returns focused screen's options with getCurrentOptions when all screens are
 
   render(container).update(container);
 
-  expect(navigation.current?.getCurrentOptions()).toEqual({
+  expect(navigation.getCurrentOptions()).toEqual({
     sample: 'data',
     sample2: 'data',
   });
 
-  act(() => navigation.current?.navigate('bar-b'));
+  act(() => navigation.navigate('bar-b'));
 
-  expect(navigation.current?.getCurrentOptions()).toEqual({
+  expect(navigation.getCurrentOptions()).toEqual({
     sample2: 'data',
     sample3: 'data',
   });
@@ -1945,7 +1937,7 @@ it('does not throw if while getting current options with no options defined', ()
 
   const TestScreen = () => null;
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const container = (
     <BaseNavigationContainer ref={navigation}>
@@ -1968,11 +1960,11 @@ it('does not throw if while getting current options with no options defined', ()
 
   render(container).update(container);
 
-  expect(navigation.current?.getCurrentOptions()).toEqual({});
+  expect(navigation.getCurrentOptions()).toEqual({});
 });
 
 it('does not throw if while getting current options with empty container', () => {
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   const container = (
     <BaseNavigationContainer ref={navigation} children={null} />
@@ -1980,5 +1972,5 @@ it('does not throw if while getting current options with empty container', () =>
 
   render(container).update(container);
 
-  expect(navigation.current?.getCurrentOptions()).toEqual(undefined);
+  expect(navigation.getCurrentOptions()).toEqual(undefined);
 });

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

@@ -5,15 +5,16 @@ import {
   DefaultRouterOptions,
   NavigationState,
   StackRouter,
+  ParamListBase,
 } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import createNavigationContainerRef from '../createNavigationContainerRef';
 import MockRouter, {
   MockActions,
   MockRouterKey,
 } from './__fixtures__/MockRouter';
-import type { NavigationContainerRef } from '../types';
 
 jest.mock('nanoid/non-secure', () => {
   const m = { nanoid: () => String(++m.__key), __key: 0 };
@@ -571,7 +572,7 @@ it("prevents removing a screen with 'beforeRemove' event", () => {
 
   const onStateChange = jest.fn();
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
@@ -706,7 +707,7 @@ it("prevents removing a child screen with 'beforeRemove' event", () => {
 
   const onStateChange = jest.fn();
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
@@ -867,7 +868,7 @@ it("prevents removing a grand child screen with 'beforeRemove' event", () => {
 
   const onStateChange = jest.fn();
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
@@ -1065,7 +1066,7 @@ it("prevents removing by multiple screens with 'beforeRemove' event", () => {
 
   const onStateChange = jest.fn();
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
@@ -1217,7 +1218,7 @@ it("prevents removing a child screen with 'beforeRemove' event with 'resetRoot'"
 
   const onStateChange = jest.fn();
 
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const element = (
     <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>

packages/core/src/createNavigationContainerRef.tsx

@@ -0,0 +1,47 @@
+import { CommonActions, ParamListBase } from '@react-navigation/routers';
+import type { NavigationContainerRefWithCurrent } from './types';
+
+export const NOT_INITIALIZED_ERROR =
+  "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
+
+export default function createNavigationContainerRef<
+  ParamList extends ParamListBase
+>(): NavigationContainerRefWithCurrent<ParamList> {
+  const methods = [
+    ...Object.keys(CommonActions),
+    'addListener',
+    'removeListener',
+    'resetRoot',
+    'dispatch',
+    'canGoBack',
+    'getRootState',
+    'getState',
+    'getParent',
+    'getCurrentRoute',
+    'getCurrentOptions',
+  ] as const;
+
+  const ref: NavigationContainerRefWithCurrent<ParamList> = {
+    ...methods.reduce<any>((acc, name) => {
+      acc[name] = (...args: any[]) => {
+        if (ref.current == null) {
+          console.error(NOT_INITIALIZED_ERROR);
+        } else {
+          // @ts-expect-error: this is ok
+          return ref.current[name](...args);
+        }
+      };
+      return acc;
+    }, {}),
+    isReady: () => {
+      if (ref.current == null) {
+        return false;
+      }
+
+      return ref.current.isReady();
+    },
+    current: null,
+  };
+
+  return ref;
+}

packages/core/src/index.tsx

@@ -3,6 +3,9 @@ export * from '@react-navigation/routers';
 export { default as BaseNavigationContainer } from './BaseNavigationContainer';
 export { default as createNavigatorFactory } from './createNavigatorFactory';
 
+export { default as createNavigationContainerRef } from './createNavigationContainerRef';
+export { default as useNavigationContainerRef } from './useNavigationContainerRef';
+
 export { default as NavigationHelpersContext } from './NavigationHelpersContext';
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';

packages/core/src/types.tsx

@@ -9,10 +9,12 @@ import type {
   ParamListBase,
 } from '@react-navigation/routers';
 
+type Keyof<T extends {}> = Extract<keyof T, string>;
+
 export type DefaultNavigatorOptions<
   ScreenOptions extends {},
   ParamList extends ParamListBase = ParamListBase
-> = DefaultRouterOptions<Extract<keyof ParamList, string>> & {
+> = DefaultRouterOptions<Keyof<ParamList>> & {
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen` components are supported as children.
@@ -24,7 +26,7 @@ export type DefaultNavigatorOptions<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList, keyof ParamList>;
+        route: RouteProp<ParamList>;
         navigation: any;
       }) => ScreenOptions);
   /**
@@ -34,7 +36,7 @@ export type DefaultNavigatorOptions<
   defaultScreenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList, keyof ParamList>;
+        route: RouteProp<ParamList>;
         navigation: any;
         options: ScreenOptions;
       }) => ScreenOptions);
@@ -96,11 +98,11 @@ export type EventConsumer<EventMap extends EventMapBase> = {
    * @param type Type of the event (e.g. `focus`, `blur`)
    * @param callback Callback listener which is executed upon receiving the event.
    */
-  addListener<EventName extends Extract<keyof EventMap, string>>(
+  addListener<EventName extends Keyof<EventMap>>(
     type: EventName,
     callback: EventListenerCallback<EventMap, EventName>
   ): () => void;
-  removeListener<EventName extends Extract<keyof EventMap, string>>(
+  removeListener<EventName extends Keyof<EventMap>>(
     type: EventName,
     callback: EventListenerCallback<EventMap, EventName>
   ): void;
@@ -115,7 +117,7 @@ export type EventEmitter<EventMap extends EventMapBase> = {
    * @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>>(
+  emit<EventName extends Keyof<EventMap>>(
     options: {
       type: EventName;
       target?: string;
@@ -264,7 +266,7 @@ export type NavigationContainerProps = {
 
 export type NavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string,
+  RouteName extends keyof ParamList = Keyof<ParamList>,
   State extends NavigationState = NavigationState<ParamList>,
   ScreenOptions extends {} = {},
   EventMap extends EventMapBase = {}
@@ -289,7 +291,7 @@ export type NavigationProp<
 
 export type RouteProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
+  RouteName extends keyof ParamList = Keyof<ParamList>
 > = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
 export type CompositeNavigationProp<
@@ -325,6 +327,19 @@ export type CompositeNavigationProp<
     A extends NavigationProp<any, any, any, any, infer E> ? E : {}
   >;
 
+export type CompositeScreenProps<
+  A extends {
+    navigation: NavigationProp<ParamListBase, string, any, any>;
+    route: RouteProp<ParamListBase>;
+  },
+  B extends {
+    navigation: NavigationHelpersCommon<ParamListBase, any>;
+  }
+> = {
+  navigation: CompositeNavigationProp<A['navigation'], B['navigation']>;
+  route: A['route'];
+};
+
 export type Descriptor<
   ScreenOptions extends {},
   Navigation extends NavigationProp<any, any, any, any, any>,
@@ -470,7 +485,9 @@ export type NavigationContainerEventMap = {
   };
 };
 
-export type NavigationContainerRef = NavigationHelpers<ParamListBase> &
+export type NavigationContainerRef<
+  ParamList extends ParamListBase
+> = NavigationHelpers<ParamList> &
   EventConsumer<NavigationContainerEventMap> & {
     /**
      * Reset the navigation state of the root navigator to the provided state.
@@ -490,8 +507,18 @@ export type NavigationContainerRef = NavigationHelpers<ParamListBase> &
      * Get the currently focused route's options.
      */
     getCurrentOptions(): object | undefined;
+    /**
+     * Whether the navigation container is ready to handle actions.
+     */
+    isReady(): boolean;
   };
 
+export type NavigationContainerRefWithCurrent<
+  ParamList extends ParamListBase
+> = NavigationContainerRef<ParamList> & {
+  current: NavigationContainerRef<ParamList> | null;
+};
+
 export type TypedNavigator<
   ParamList extends ParamListBase,
   State extends NavigationState,

packages/core/src/useCurrentRender.tsx

@@ -13,11 +13,7 @@ type Options = {
   navigation: NavigationHelpers<ParamListBase>;
   descriptors: Record<
     string,
-    Descriptor<
+    Descriptor<object, NavigationProp<ParamListBase>, RouteProp<ParamListBase>>
-      object,
-      NavigationProp<ParamListBase>,
-      RouteProp<ParamListBase, string>
-    >
   >;
 };
 

packages/core/src/useDescriptors.tsx

@@ -38,13 +38,13 @@ type Options<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamListBase, string>;
+        route: RouteProp<ParamListBase>;
         navigation: any;
       }) => ScreenOptions);
   defaultScreenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamListBase, string>;
+        route: RouteProp<ParamListBase>;
         navigation: any;
         options: ScreenOptions;
       }) => ScreenOptions);
@@ -133,7 +133,7 @@ export default function useDescriptors<
         ScreenOptions,
         NavigationProp<ParamListBase, string, State, ScreenOptions, EventMap> &
           ActionHelpers,
-        RouteProp<ParamListBase, string>
+        RouteProp<ParamListBase>
       >
     >
   >((acc, route, i) => {

packages/core/src/useNavigationContainerRef.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { ParamListBase } from '@react-navigation/routers';
+import createNavigationContainerRef from './createNavigationContainerRef';
+import type { NavigationContainerRefWithCurrent } from './types';
+
+export default function useNavigationContainerRef<
+  ParamList extends ParamListBase
+>(): NavigationContainerRefWithCurrent<ParamList> {
+  const navigation = React.useRef<NavigationContainerRefWithCurrent<ParamList> | null>(
+    null
+  );
+
+  if (navigation.current == null) {
+    navigation.current = createNavigationContainerRef<ParamList>();
+  }
+
+  return navigation.current;
+}

packages/core/src/useOptionsGetters.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import type { ParamListBase, NavigationState } from '@react-navigation/routers';
+import type { ParamListBase } from '@react-navigation/routers';
 import NavigationStateContext from './NavigationStateContext';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import type { NavigationProp } from './types';
 
 type Options = {
   key?: string;
-  navigation?: NavigationProp<ParamListBase, string, NavigationState, object>;
+  navigation?: NavigationProp<ParamListBase>;
   options?: object | undefined;
 };
 

packages/core/src/useRoute.tsx

@@ -8,9 +8,7 @@ import type { RouteProp } from './types';
  *
  * @returns Route prop of the parent screen.
  */
-export default function useRoute<
+export default function useRoute<T extends RouteProp<ParamListBase>>(): T {
-  T extends RouteProp<ParamListBase, string>
->(): T {
   const route = React.useContext(NavigationRouteContext);
 
   if (route === undefined) {

packages/core/src/useRouteCache.tsx

@@ -6,7 +6,7 @@ import type {
 } from '@react-navigation/routers';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<Route<string>, RouteProp<ParamListBase, string>>;
+type RouteCache = Map<Route<string>, RouteProp<ParamListBase>>;
 
 /**
  * Utilites such as `getFocusedRouteNameFromRoute` need to access state.

packages/devtools/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.2...@react-navigation/devtools@6.0.0-next.3) (2021-05-01)
+
+
+### Features
+
+* add helper and hook for container ref ([0ecd112](https://github.com/react-navigation/react-navigation/commit/0ecd112ec9786a26261ada3d33ef44dc1ec84da0))
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.1...@react-navigation/devtools@6.0.0-next.2) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/devtools

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react",
     "react-native",
@@ -36,7 +36,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.0-next.2",
+    "@react-navigation/core": "^6.0.0-next.3",
     "deep-equal": "^2.0.5"
   },
   "devDependencies": {

packages/devtools/src/useReduxDevToolsExtension.tsx

@@ -3,6 +3,7 @@ import type {
   NavigationContainerRef,
   NavigationState,
   NavigationAction,
+  ParamListBase,
 } from '@react-navigation/core';
 import deepEqual from 'deep-equal';
 
@@ -22,7 +23,7 @@ type DevToolsExtension = {
 declare const __REDUX_DEVTOOLS_EXTENSION__: DevToolsExtension | undefined;
 
 export default function useReduxDevToolsExtension(
-  ref: React.RefObject<NavigationContainerRef>
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
 ) {
   const devToolsRef = React.useRef<DevToolsConnection>();
 

packages/drawer/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.4...@react-navigation/drawer@6.0.0-next.5) (2021-05-01)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [6.0.0-next.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.3...@react-navigation/drawer@6.0.0-next.4) (2021-04-08)
 
 

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "6.0.0-next.4",
+  "version": "6.0.0-next.5",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,12 +41,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.4",
+    "@react-navigation/elements": "^1.0.0-next.5",
     "color": "^3.1.3",
     "warn-once": "^0.0.1"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.2",
+    "@react-navigation/native": "^6.0.0-next.3",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.63.51",

packages/drawer/src/types.tsx

@@ -235,7 +235,7 @@ export type DrawerHeaderProps = {
   /**
    * Route object for the current screen.
    */
-  route: RouteProp<ParamListBase, string>;
+  route: RouteProp<ParamListBase>;
   /**
    * Navigation prop for the header.
    */
@@ -252,7 +252,7 @@ export type DrawerNavigationHelpers = NavigationHelpers<
 
 export type DrawerNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -264,7 +264,7 @@ export type DrawerNavigationProp<
 
 export type DrawerScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: DrawerNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -273,7 +273,7 @@ export type DrawerScreenProps<
 export type DrawerDescriptor = Descriptor<
   DrawerNavigationOptions,
   DrawerNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type DrawerDescriptorMap = Record<string, DrawerDescriptor>;

packages/elements/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-next.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.4...@react-navigation/elements@1.0.0-next.5) (2021-05-01)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
 # [1.0.0-next.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.3...@react-navigation/elements@1.0.0-next.4) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/elements

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "^0.2.3",
-    "@react-navigation/native": "^6.0.0-next.2",
+    "@react-navigation/native": "^6.0.0-next.3",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.63.51",

packages/elements/src/Screen.tsx

@@ -20,7 +20,7 @@ import getDefaultHeaderHeight from './Header/getDefaultHeaderHeight';
 type Props = {
   focused: boolean;
   navigation: NavigationProp<ParamListBase>;
-  route: RouteProp<ParamListBase, string>;
+  route: RouteProp<ParamListBase>;
   header: React.ReactNode;
   headerShown?: boolean;
   headerStatusBarHeight?: number;

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.2...@react-navigation/material-bottom-tabs@6.0.0-next.3) (2021-05-01)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.1...@react-navigation/material-bottom-tabs@6.0.0-next.2) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.2",
+    "@react-navigation/native": "^6.0.0-next.3",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.63.51",

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

@@ -24,7 +24,7 @@ export type MaterialBottomTabNavigationHelpers = NavigationHelpers<
 
 export type MaterialBottomTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -36,7 +36,7 @@ export type MaterialBottomTabNavigationProp<
 
 export type MaterialBottomTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: MaterialBottomTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -85,7 +85,7 @@ export type MaterialBottomTabNavigationOptions = {
 export type MaterialBottomTabDescriptor = Descriptor<
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type MaterialBottomTabDescriptorMap = Record<

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.3...@react-navigation/material-top-tabs@6.0.0-next.4) (2021-05-01)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.2...@react-navigation/material-top-tabs@6.0.0-next.3) (2021-04-08)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.1...@react-navigation/material-top-tabs@6.0.0-next.2) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0-next.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
     "warn-once": "^0.0.1"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.2",
+    "@react-navigation/native": "^6.0.0-next.3",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.63.51",

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

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { SceneRendererProps, TabView } from 'react-native-tab-view';
+import type { SceneRendererProps, TabViewProps } from 'react-native-tab-view';
 import type {
   ParamListBase,
   Descriptor,
@@ -38,7 +38,7 @@ export type MaterialTopTabNavigationHelpers = NavigationHelpers<
 
 export type MaterialTopTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -50,7 +50,7 @@ export type MaterialTopTabNavigationProp<
 
 export type MaterialTopTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: MaterialTopTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -67,6 +67,16 @@ export type MaterialTopTabNavigationOptions = {
    */
   lazy?: boolean;
 
+  /**
+   * Function that returns a React element to render if this screen hasn't been rendered yet.
+   * The `lazy` option also needs to be enabled for this to work.
+   *
+   * This view is usually only shown for a split second. Keep it lightweight.
+   *
+   * By default, this renders null.
+   */
+  lazyPlaceholder?: () => React.ReactNode;
+
   /**
    * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
@@ -179,7 +189,7 @@ export type MaterialTopTabNavigationOptions = {
 export type MaterialTopTabDescriptor = Descriptor<
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type MaterialTopTabDescriptorMap = Record<
@@ -187,9 +197,8 @@ export type MaterialTopTabDescriptorMap = Record<
   MaterialTopTabDescriptor
 >;
 
-export type MaterialTopTabNavigationConfig = Partial<
+export type MaterialTopTabNavigationConfig = Omit<
-  Omit<
+  TabViewProps<Route<string>>,
-    React.ComponentProps<typeof TabView>,
   | 'navigationState'
   | 'onIndexChange'
   | 'onSwipeStart'
@@ -198,26 +207,11 @@ export type MaterialTopTabNavigationConfig = Partial<
   | 'renderTabBar'
   | 'renderLazyPlaceholder'
   | 'lazy'
-  >
 > & {
-  /**
-   * Function that returns a React element to render for routes that haven't been rendered yet.
-   * Receives an object containing the route as the prop.
-   * The lazy prop also needs to be enabled.
-   *
-   * This view is usually only shown for a split second. Keep it lightweight.
-   *
-   * By default, this renders null.
-   */
-  lazyPlaceholder?: (props: { route: Route<string> }) => React.ReactNode;
   /**
    * Function that returns a React element to display as the tab bar.
    */
   tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
-  /**
-   * Position of the tab bar. Defaults to `top`.
-   */
-  tabBarPosition?: 'top' | 'bottom';
 };
 
 export type MaterialTopTabBarProps = SceneRendererProps & {

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -21,11 +21,9 @@ type Props = MaterialTopTabNavigationConfig & {
   state: TabNavigationState<ParamListBase>;
   navigation: MaterialTopTabNavigationHelpers;
   descriptors: MaterialTopTabDescriptorMap;
-  tabBarPosition?: 'top' | 'bottom';
 };
 
 export default function MaterialTopTabView({
-  lazyPlaceholder,
   tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
   state,
   navigation,
@@ -57,7 +55,9 @@ export default function MaterialTopTabView({
         renderScene={({ route }) => descriptors[route.key].render()}
         navigationState={state}
         renderTabBar={renderTabBar}
-        renderLazyPlaceholder={lazyPlaceholder}
+        renderLazyPlaceholder={({ route }) =>
+          descriptors[route.key].options.lazyPlaceholder?.() ?? null
+        }
         lazy={({ route }) => descriptors[route.key].options.lazy === true}
         onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
         onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}

packages/native/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.2...@react-navigation/native@6.0.0-next.3) (2021-05-01)
+
+
+### Features
+
+* add helper and hook for container ref ([0ecd112](https://github.com/react-navigation/react-navigation/commit/0ecd112ec9786a26261ada3d33ef44dc1ec84da0))
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.1...@react-navigation/native@6.0.0-next.2) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.0-next.2",
+    "@react-navigation/core": "^6.0.0-next.3",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.22"
   },

packages/native/src/NavigationContainer.tsx

@@ -3,6 +3,7 @@ import {
   BaseNavigationContainer,
   NavigationContainerProps,
   NavigationContainerRef,
+  ParamListBase,
 } from '@react-navigation/core';
 import ThemeProvider from './theming/ThemeProvider';
 import DefaultTheme from './theming/DefaultTheme';
@@ -44,11 +45,13 @@ const NavigationContainer = React.forwardRef(function NavigationContainer(
     onReady,
     ...rest
   }: Props,
-  ref?: React.Ref<NavigationContainerRef | null>
+  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
 ) {
   const isLinkingEnabled = linking ? linking.enabled !== false : false;
 
-  const refContainer = React.useRef<NavigationContainerRef>(null);
+  const refContainer = React.useRef<NavigationContainerRef<ParamListBase>>(
+    null
+  );
 
   useBackButton(refContainer);
   useDocumentTitle(refContainer, documentTitle);

packages/native/src/__tests__/NavigationContainer.test.tsx

@@ -5,7 +5,8 @@ import {
   StackRouter,
   TabRouter,
   NavigationHelpersContext,
-  NavigationContainerRef,
+  createNavigationContainerRef,
+  ParamListBase,
 } from '@react-navigation/core';
 import { act, render } from '@testing-library/react-native';
 import NavigationContainer from '../NavigationContainer';
@@ -79,7 +80,7 @@ it('integrates with the history API', () => {
     },
   };
 
-  const navigation = React.createRef<NavigationContainerRef>();
+  const navigation = createNavigationContainerRef<ParamListBase>();
 
   render(
     <NavigationContainer ref={navigation} linking={linking}>

packages/native/src/__tests__/useLinking.test.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { render, RenderAPI } from '@testing-library/react-native';
-import type { NavigationContainerRef } from '@react-navigation/core';
+import {
+  createNavigationContainerRef,
+  ParamListBase,
+} from '@react-navigation/core';
 import useLinking from '../useLinking';
 
 it('throws if multiple instances of useLinking are used', () => {
-  const ref = React.createRef<NavigationContainerRef>();
+  const ref = createNavigationContainerRef<ParamListBase>();
 
   const options = { prefixes: [] };
 

packages/native/src/useBackButton.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { BackHandler } from 'react-native';
-import type { NavigationContainerRef } from '@react-navigation/core';
+import type {
+  NavigationContainerRef,
+  ParamListBase,
+} from '@react-navigation/core';
 
 export default function useBackButton(
-  ref: React.RefObject<NavigationContainerRef>
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
 ) {
   React.useEffect(() => {
     const subscription = BackHandler.addEventListener(

packages/native/src/useDocumentTitle.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import type { NavigationContainerRef } from '@react-navigation/core';
+import type {
+  NavigationContainerRef,
+  ParamListBase,
+} from '@react-navigation/core';
 import type { DocumentTitleOptions } from './types';
 
 /**
  * Set the document title for the active screen
  */
 export default function useDocumentTitle(
-  ref: React.RefObject<NavigationContainerRef>,
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,
     formatter = (options, route) => options?.title ?? route?.name,

packages/native/src/useLinking.native.tsx

@@ -4,6 +4,7 @@ import {
   getActionFromState,
   getStateFromPath as getStateFromPathDefault,
   NavigationContainerRef,
+  ParamListBase,
 } from '@react-navigation/core';
 import extractPathFromURL from './extractPathFromURL';
 import type { LinkingOptions } from './types';
@@ -13,7 +14,7 @@ type ResultState = ReturnType<typeof getStateFromPathDefault>;
 let isUsingLinking = false;
 
 export default function useLinking(
-  ref: React.RefObject<NavigationContainerRef>,
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,
     prefixes,

packages/native/src/useLinking.tsx

@@ -6,6 +6,7 @@ import {
   NavigationState,
   getActionFromState,
   findFocusedRoute,
+  ParamListBase,
 } from '@react-navigation/core';
 import { nanoid } from 'nanoid/non-secure';
 import ServerContext from './ServerContext';
@@ -288,7 +289,7 @@ const series = (cb: () => Promise<void>) => {
 let isUsingLinking = false;
 
 export default function useLinking(
-  ref: React.RefObject<NavigationContainerRef>,
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,
     config,

packages/stack/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.9...@react-navigation/stack@6.0.0-next.10) (2021-05-01)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
 # [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.8...@react-navigation/stack@6.0.0-next.9) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,13 +40,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.4",
+    "@react-navigation/elements": "^1.0.0-next.5",
     "color": "^3.1.3",
     "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.0.1"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.2",
+    "@react-navigation/native": "^6.0.0-next.3",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",

packages/stack/src/types.tsx

@@ -46,7 +46,7 @@ export type StackNavigationHelpers = NavigationHelpers<
 
 export type StackNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -58,7 +58,7 @@ export type StackNavigationProp<
 
 export type StackScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: StackNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -182,7 +182,7 @@ export type StackHeaderProps = {
 export type StackDescriptor = Descriptor<
   StackNavigationOptions,
   StackNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type StackDescriptorMap = Record<string, StackDescriptor>;