chore: merge current main

- @react-navigation/bottom-tabs@6.0.0-next.17
 - @react-navigation/core@6.0.0-next.13
 - @react-navigation/devtools@6.0.0-next.14
 - @react-navigation/drawer@6.0.0-next.16
 - @react-navigation/elements@1.0.0-next.16
 - flipper-plugin-react-navigation@1.1.4
 - @react-navigation/material-bottom-tabs@6.0.0-next.13
 - @react-navigation/material-top-tabs@6.0.0-next.14
 - @react-navigation/native-stack@6.0.0-next.6
 - @react-navigation/native@6.0.0-next.13
 - @react-navigation/stack@6.0.0-next.24

.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": "satya164",
+  "plugins": ["simple-import-sort"],
   "settings": {
     "react": {
       "version": "16"
@@ -23,6 +24,7 @@
     "node": true
   },
   "rules": {
-    "react/no-unused-prop-types": "off"
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
   }
 }

example/App.tsx

@@ -1,7 +1,8 @@
 import 'react-native-gesture-handler';
+
+import { Assets } from '@react-navigation/elements';
 import { registerRootComponent } from 'expo';
 import { Asset } from 'expo-asset';
-import { Assets } from '@react-navigation/elements';
 
 import App from './src/index';
 

example/e2e/__integration_tests__/server.test.tsx

@@ -1,5 +1,5 @@
-import fetch from 'node-fetch';
 import cheerio from 'cheerio';
+import fetch from 'node-fetch';
 
 const server = 'http://localhost:3275';
 

example/e2e/config/setup-playwright.tsx

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 
-import { chromium, Browser, BrowserContext, Page } from 'playwright';
+import { Browser, BrowserContext, chromium, Page } from 'playwright';
 
 let browser: Browser;
 let context: BrowserContext;

example/ios/Podfile.lock

@@ -370,8 +370,9 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.0.0):
+  - RNScreens (3.3.0):
     - React-Core
+    - React-RCTImage
   - RNVectorIcons (8.1.0):
     - React-Core
   - UMAppLoader (2.1.0)
@@ -680,7 +681,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: fc29d354a40316a990e8fb46391f08aea829c3aa
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
-  RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0
+  RNScreens: bf59f17fbf001f1025243eeed5f19419d3c11ef2
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   UMAppLoader: fe2708bb0ac5cd70052bc207d06aa3b7e72b9e97
   UMBarCodeScannerInterface: 79f92bea5f7af39b381a4c82298105ceb537408a

example/ios/ReactNavigation/Info.plist

@@ -51,7 +51,7 @@
       <string>UIInterfaceOrientationLandscapeRight</string>
     </array>
     <key>UIViewControllerBasedStatusBarAppearance</key>
-    <false/>
+    <true/>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>

example/package.json

@@ -32,10 +32,10 @@
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-pager-view": "~5.0.12",
-    "react-native-paper": "^4.7.2",
+    "react-native-paper": "^4.9.1",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "react-native-tab-view": "^3.0.1",
     "react-native-unimodules": "~0.13.1",
     "react-native-vector-icons": "^8.1.0",

example/server/babel.config.js

@@ -7,14 +7,9 @@ const alias = Object.fromEntries(
   fs
     .readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
-    .map((name) => [
-      `@react-navigation/${name}`,
-      path.resolve(
-        packages,
-        name,
-        require(`../../packages/${name}/package.json`).source
-      ),
-    ])
+    .map((name) => [name, require(`../../packages/${name}/package.json`)])
+    .filter(([, pak]) => pak.source != null)
+    .map(([name, pak]) => [pak.name, path.resolve(packages, name, pak.source)])
 );
 
 module.exports = {

example/server/index.tsx

@@ -1,10 +1,11 @@
 import './resolve-hooks';
 
+import { ServerContainer, ServerContainerRef } from '@react-navigation/native';
 import Koa from 'koa';
 import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { AppRegistry } from 'react-native-web';
-import { ServerContainer, ServerContainerRef } from '@react-navigation/native';
+
 import App from '../src/index';
 
 AppRegistry.registerComponent('App', () => App);

example/src/Screens/AuthFlow.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
-import { Title, Button } from 'react-native-paper';
-import { useTheme, ParamListBase } from '@react-navigation/native';
+import { HeaderBackButton } from '@react-navigation/elements';
+import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
 } from '@react-navigation/stack';
-import { HeaderBackButton } from '@react-navigation/elements';
+import * as React from 'react';
+import { ActivityIndicator, StyleSheet, TextInput, View } from 'react-native';
+import { Button, Title } from 'react-native-paper';
 
 type AuthStackParams = {
   Splash: undefined;

example/src/Screens/BottomTabs.tsx

@@ -1,21 +1,22 @@
-import * as React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { BlurView } from 'expo-blur';
-import {
-  getFocusedRouteNameFromRoute,
-  ParamListBase,
-  NavigatorScreenParams,
-} from '@react-navigation/native';
-import type { StackScreenProps } from '@react-navigation/stack';
 import {
   createBottomTabNavigator,
   useBottomTabBarHeight,
 } from '@react-navigation/bottom-tabs';
 import { HeaderBackButton } from '@react-navigation/elements';
+import {
+  getFocusedRouteNameFromRoute,
+  NavigatorScreenParams,
+  ParamListBase,
+} from '@react-navigation/native';
+import type { StackScreenProps } from '@react-navigation/stack';
+import { BlurView } from 'expo-blur';
+import * as React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
 import Albums from '../Shared/Albums';
-import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
+import Contacts from '../Shared/Contacts';
 import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({

example/src/Screens/DynamicTabs.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Title, Button } from 'react-native-paper';
-import Feather from 'react-native-vector-icons/Feather';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button, Title } from 'react-native-paper';
+import Feather from 'react-native-vector-icons/Feather';
 
 type BottomTabParams = {
   [key: string]: undefined;

example/src/Screens/LinkComponent.tsx

@@ -1,18 +1,19 @@
-import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
-import { Button } from 'react-native-paper';
 import {
   Link,
-  StackActions,
   ParamListBase,
+  StackActions,
   useLinkProps,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
 } from '@react-navigation/stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 
 type SimpleStackParams = {
   Article: { author: string };

example/src/Screens/MasterDetail.tsx

@@ -1,20 +1,21 @@
+import {
+  createDrawerNavigator,
+  DrawerContent,
+  DrawerContentComponentProps,
+  DrawerScreenProps,
+} from '@react-navigation/drawer';
+import {
+  ParamListBase,
+  useNavigation,
+  useTheme,
+} from '@react-navigation/native';
+import type { StackScreenProps } from '@react-navigation/stack';
 import * as React from 'react';
 import { Dimensions, ScaledSize } from 'react-native';
 import { Appbar } from 'react-native-paper';
-import {
-  useTheme,
-  useNavigation,
-  ParamListBase,
-} from '@react-navigation/native';
-import {
-  createDrawerNavigator,
-  DrawerScreenProps,
-  DrawerContent,
-  DrawerContentComponentProps,
-} from '@react-navigation/drawer';
-import type { StackScreenProps } from '@react-navigation/stack';
-import Article from '../Shared/Article';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 import NewsFeed from '../Shared/NewsFeed';
 
 type DrawerParams = {

example/src/Screens/MaterialBottomTabs.tsx

@@ -1,10 +1,11 @@
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import type { NavigatorScreenParams } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import type { NavigatorScreenParams } from '@react-navigation/native';
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+
 import Albums from '../Shared/Albums';
-import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
+import Contacts from '../Shared/Contacts';
 import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
 type MaterialBottomTabParams = {

example/src/Screens/MaterialTopTabs.tsx

@@ -1,10 +1,11 @@
-import * as React from 'react';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import type { ParamListBase } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import * as React from 'react';
+
 import Albums from '../Shared/Albums';
-import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
+import Contacts from '../Shared/Contacts';
 
 type MaterialTopTabParams = {
   Albums: undefined;

example/src/Screens/MixedHeaderMode.tsx

@@ -1,15 +1,16 @@
-import * as React from 'react';
-import { View, Platform, StyleSheet, ScrollView } from 'react-native';
-import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
+  HeaderStyleInterpolators,
   StackScreenProps,
   TransitionPresets,
-  HeaderStyleInterpolators,
 } from '@react-navigation/stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 import NewsFeed from '../Shared/NewsFeed';
 
 export type SimpleStackParams = {

example/src/Screens/MixedStack.tsx

@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
-import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
 } from '@react-navigation/stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 
 type MixedStackParams = {
   Article: { author: string };

example/src/Screens/ModalStack.tsx

@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
-import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
 } from '@react-navigation/stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 
 type ModalStackParams = {
   Article: { author: string };

example/src/Screens/NativeStack.tsx

@@ -1,14 +1,15 @@
-import * as React from 'react';
-import { View, Platform, StyleSheet, ScrollView } from 'react-native';
-import { Button } from 'react-native-paper';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 import NewsFeed from '../Shared/NewsFeed';
 
 export type NativeStackParams = {

example/src/Screens/NativeStackHeaderCustomization.tsx

@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { View, Platform, StyleSheet, ScrollView, Alert } from 'react-native';
-import { Appbar, Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Alert, Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Appbar, Button } from 'react-native-paper';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 import NewsFeed from '../Shared/NewsFeed';
 
 export type NativeStackParams = {

example/src/Screens/NotFound.tsx

@@ -1,7 +1,7 @@
+import type { StackScreenProps } from '@react-navigation/stack';
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import type { StackScreenProps } from '@react-navigation/stack';
 
 const NotFoundScreen = ({
   route,

example/src/Screens/PreventRemove.tsx

@@ -1,23 +1,24 @@
-import * as React from 'react';
 import {
-  Alert,
-  View,
-  TextInput,
-  ScrollView,
-  StyleSheet,
-  Platform,
-} from 'react-native';
-import { Button } from 'react-native-paper';
-import {
-  useTheme,
   CommonActions,
-  ParamListBase,
   NavigationAction,
+  ParamListBase,
+  useTheme,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
 } from '@react-navigation/stack';
+import * as React from 'react';
+import {
+  Alert,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  TextInput,
+  View,
+} from 'react-native';
+import { Button } from 'react-native-paper';
+
 import Article from '../Shared/Article';
 
 type PreventRemoveParams = {

example/src/Screens/SimpleStack.tsx

@@ -1,14 +1,15 @@
-import * as React from 'react';
-import { View, Platform, StyleSheet, ScrollView } from 'react-native';
-import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationOptions,
   StackScreenProps,
 } from '@react-navigation/stack';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
 import NewsFeed from '../Shared/NewsFeed';
 
 export type SimpleStackParams = {

example/src/Screens/StackHeaderCustomization.tsx

@@ -1,25 +1,26 @@
-import * as React from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  ScrollView,
-  Alert,
-  Platform,
-} from 'react-native';
-import { Button, Appbar } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTheme, ParamListBase } from '@react-navigation/native';
+import { HeaderBackground, useHeaderHeight } from '@react-navigation/elements';
+import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
   Header,
   StackHeaderProps,
+  StackScreenProps,
 } from '@react-navigation/stack';
-import { HeaderBackground, useHeaderHeight } from '@react-navigation/elements';
-import BlurView from '../Shared/BlurView';
-import Article from '../Shared/Article';
+import * as React from 'react';
+import {
+  Alert,
+  Animated,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { Appbar, Button } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
 import Albums from '../Shared/Albums';
+import Article from '../Shared/Article';
+import BlurView from '../Shared/BlurView';
 
 type SimpleStackParams = {
   Article: { author: string };

example/src/Screens/StackTransparent.tsx

@@ -1,19 +1,20 @@
-import * as React from 'react';
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-  Platform,
-  Pressable,
-  Animated,
-} from 'react-native';
-import { Button, Paragraph } from 'react-native-paper';
 import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
   useCardAnimation,
 } from '@react-navigation/stack';
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { Button, Paragraph } from 'react-native-paper';
+
 import Article from '../Shared/Article';
 import NewsFeed from '../Shared/NewsFeed';
 

example/src/Shared/Albums.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable import/no-commonjs */
 
+import { useScrollToTop } from '@react-navigation/native';
 import * as React from 'react';
 import {
-  View,
-  Image,
-  ScrollView,
-  StyleSheet,
-  ScrollViewProps,
   Dimensions,
+  Image,
   Platform,
   ScaledSize,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+  View,
 } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
 
 const COVERS = [
   require('../../assets/album-art-01.jpg'),

example/src/Shared/Article.tsx

@@ -1,14 +1,14 @@
+import { useScrollToTop, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
-  View,
-  Text,
   Image,
   ScrollView,
-  StyleSheet,
   ScrollViewProps,
+  StyleSheet,
+  Text,
   TextProps,
+  View,
 } from 'react-native';
-import { useScrollToTop, useTheme } from '@react-navigation/native';
 
 type Props = Partial<ScrollViewProps> & {
   date?: string;

example/src/Shared/Chat.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import {
-  View,
-  Image,
-  Text,
-  TextInput,
-  ScrollView,
-  StyleSheet,
-  ScrollViewProps,
-} from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';
 import Color from 'color';
+import * as React from 'react';
+import {
+  Image,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
 
 const MESSAGES = [
   'okay',

example/src/Shared/Contacts.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { View, Text, FlatList, StyleSheet } from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
 
 type Item = { name: string; number: number };
 

example/src/Shared/NewsFeed.tsx

@@ -1,22 +1,22 @@
+import { useScrollToTop, useTheme } from '@react-navigation/native';
+import Color from 'color';
 import * as React from 'react';
 import {
-  View,
-  TextInput,
   Image,
   ScrollView,
-  StyleSheet,
   ScrollViewProps,
+  StyleSheet,
+  TextInput,
+  View,
 } from 'react-native';
-import { useScrollToTop, useTheme } from '@react-navigation/native';
 import {
-  Card,
-  Text,
   Avatar,
-  Subheading,
-  IconButton,
+  Card,
   Divider,
+  IconButton,
+  Subheading,
+  Text,
 } from 'react-native-paper';
-import Color from 'color';
 
 type Props = Partial<ScrollViewProps> & {
   date?: number;

example/src/index.tsx

@@ -1,65 +1,68 @@
-import * as React from 'react';
-import {
-  ScrollView,
-  Platform,
-  StatusBar,
-  I18nManager,
-  Dimensions,
-  ScaledSize,
-  Linking,
-  LogBox,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import {
-  Provider as PaperProvider,
-  DefaultTheme as PaperLightTheme,
-  DarkTheme as PaperDarkTheme,
-  List,
-  Divider,
-  Text,
-} from 'react-native-paper';
-import { createURL } from 'expo-linking';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {
+  useFlipper,
+  useReduxDevToolsExtension,
+} from '@react-navigation/devtools';
+import {
+  createDrawerNavigator,
+  DrawerScreenProps,
+} from '@react-navigation/drawer';
+import {
+  CompositeScreenProps,
+  DarkTheme,
+  DefaultTheme,
   InitialState,
   NavigationContainer,
-  DefaultTheme,
-  DarkTheme,
+  NavigatorScreenParams,
   PathConfigMap,
   useNavigationContainerRef,
-  NavigatorScreenParams,
 } from '@react-navigation/native';
-import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStackNavigator,
   HeaderStyleInterpolators,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
+import { createURL } from 'expo-linking';
+import * as React from 'react';
 import {
-  useReduxDevToolsExtension,
-  useFlipper,
-} from '@react-navigation/devtools';
+  Dimensions,
+  I18nManager,
+  Linking,
+  LogBox,
+  Platform,
+  ScaledSize,
+  ScrollView,
+} from 'react-native';
+import {
+  DarkTheme as PaperDarkTheme,
+  DefaultTheme as PaperLightTheme,
+  Divider,
+  List,
+  Provider as PaperProvider,
+  Text,
+} from 'react-native-paper';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { restartApp } from './Restart';
-import SettingsItem from './Shared/SettingsItem';
-import NativeStack from './Screens/NativeStack';
-import SimpleStack from './Screens/SimpleStack';
-import ModalStack from './Screens/ModalStack';
-import MixedStack from './Screens/MixedStack';
-import MixedHeaderMode from './Screens/MixedHeaderMode';
-import StackTransparent from './Screens/StackTransparent';
-import StackHeaderCustomization from './Screens/StackHeaderCustomization';
-import NativeStackHeaderCustomization from './Screens/NativeStackHeaderCustomization';
-import BottomTabs from './Screens/BottomTabs';
-import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
-import MaterialBottomTabs from './Screens/MaterialBottomTabs';
-import NotFound from './Screens/NotFound';
-import DynamicTabs from './Screens/DynamicTabs';
-import MasterDetail from './Screens/MasterDetail';
 import AuthFlow from './Screens/AuthFlow';
-import PreventRemove from './Screens/PreventRemove';
+import BottomTabs from './Screens/BottomTabs';
+import DynamicTabs from './Screens/DynamicTabs';
 import LinkComponent from './Screens/LinkComponent';
+import MasterDetail from './Screens/MasterDetail';
+import MaterialBottomTabs from './Screens/MaterialBottomTabs';
+import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
+import MixedHeaderMode from './Screens/MixedHeaderMode';
+import MixedStack from './Screens/MixedStack';
+import ModalStack from './Screens/ModalStack';
+import NativeStack from './Screens/NativeStack';
+import NativeStackHeaderCustomization from './Screens/NativeStackHeaderCustomization';
+import NotFound from './Screens/NotFound';
+import PreventRemove from './Screens/PreventRemove';
+import SimpleStack from './Screens/SimpleStack';
+import StackHeaderCustomization from './Screens/StackHeaderCustomization';
+import StackTransparent from './Screens/StackTransparent';
+import SettingsItem from './Shared/SettingsItem';
 
 if (Platform.OS !== 'web') {
   LogBox.ignoreLogs(['Require cycle:']);
@@ -226,11 +229,6 @@ export default function App() {
 
   return (
     <PaperProvider theme={paperTheme}>
-      <StatusBar
-        translucent
-        barStyle={theme.dark ? 'light-content' : 'dark-content'}
-        backgroundColor="rgba(0, 0, 0, 0.24)"
-      />
       <NavigationContainer
         ref={navigationRef}
         initialState={initialState}
@@ -308,6 +306,9 @@ export default function App() {
         <Stack.Navigator
           screenOptions={{
             headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+            statusBarStyle: theme.dark ? 'light' : 'dark',
+            statusBarTranslucent: true,
+            statusBarColor: 'rgba(0, 0, 0, 0.24)',
           }}
         >
           <Stack.Screen
@@ -333,9 +334,10 @@ export default function App() {
                 >
                   {({
                     navigation,
-                  }: {
-                    navigation: StackNavigationProp<RootStackParamList>;
-                  }) => (
+                  }: CompositeScreenProps<
+                    DrawerScreenProps<RootDrawerParamList, 'Examples'>,
+                    StackScreenProps<RootStackParamList>
+                  >) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >

example/webpack.config.js

@@ -8,8 +8,6 @@ const packages = path.resolve(__dirname, '..', 'packages');
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
-  config.context = path.resolve(__dirname, '..');
-
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /(packages|example)\/.+/,
@@ -19,19 +17,25 @@ module.exports = async function (env, argv) {
 
   Object.assign(config.resolve.alias, {
     'react': path.resolve(node_modules, 'react'),
-    'react-native': path.resolve(node_modules, 'react-native-web'),
-    'react-native-web': path.resolve(node_modules, 'react-native-web'),
+    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
+    'react-native-web': path.resolve(
+      __dirname,
+      'node_modules',
+      'react-native-web'
+    ),
     '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
   });
 
   fs.readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
     .forEach((name) => {
-      config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-        packages,
-        name,
-        require(`../packages/${name}/package.json`).source
-      );
+      const pak = require(`../packages/${name}/package.json`);
+
+      if (pak.source == null) {
+        return;
+      }
+
+      config.resolve.alias[pak.name] = path.resolve(packages, name, pak.source);
     });
 
   return config;

package.json

@@ -37,6 +37,7 @@
     "commitlint": "^12.1.1",
     "eslint": "^7.23.0",
     "eslint-config-satya164": "^3.1.10",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "lerna": "^4.0.0",

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.16...@react-navigation/bottom-tabs@6.0.0-next.17) (2021-05-29)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.15...@react-navigation/bottom-tabs@6.0.0-next.16) (2021-05-29)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.14...@react-navigation/bottom-tabs@6.0.0-next.15) (2021-05-27)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.13...@react-navigation/bottom-tabs@6.0.0-next.14) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.12...@react-navigation/bottom-tabs@6.0.0-next.13) (2021-05-25)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

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.13",
+  "version": "6.0.0-next.17",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.12",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -51,7 +51,7 @@
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

packages/bottom-tabs/src/__tests__/index.test.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
-import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import { createBottomTabNavigator, BottomTabScreenProps } from '../index';
+import { fireEvent, render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
+
+import { BottomTabScreenProps, createBottomTabNavigator } from '../index';
 
 it('renders a bottom tab navigator with screens', async () => {
   const Test = ({ route, navigation }: BottomTabScreenProps<ParamListBase>) => (

packages/bottom-tabs/src/index.tsx

@@ -6,23 +6,22 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
 /**
  * Views
  */
-export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';
+export { default as BottomTabView } from './views/BottomTabView';
 
 /**
  * Utilities
  */
 export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
-
 export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
 
 /**
  * Types
  */
 export type {
+  BottomTabBarButtonProps,
+  BottomTabBarProps,
   BottomTabNavigationOptions,
   BottomTabNavigationProp,
   BottomTabScreenProps,
-  BottomTabBarProps,
-  BottomTabBarButtonProps,
 } from './types';

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

@@ -1,23 +1,29 @@
-import * as React from 'react';
-import warnOnce from 'warn-once';
 import {
-  useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
+  ParamListBase,
+  TabActionHelpers,
+  TabNavigationState,
   TabRouter,
   TabRouterOptions,
-  TabNavigationState,
-  TabActionHelpers,
-  ParamListBase,
+  useNavigationBuilder,
 } from '@react-navigation/native';
-import BottomTabView from '../views/BottomTabView';
+import * as React from 'react';
+import warnOnce from 'warn-once';
+
 import type {
   BottomTabNavigationConfig,
-  BottomTabNavigationOptions,
   BottomTabNavigationEventMap,
+  BottomTabNavigationOptions,
 } from '../types';
+import BottomTabView from '../views/BottomTabView';
 
-type Props = DefaultNavigatorOptions<BottomTabNavigationOptions> &
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap
+> &
   TabRouterOptions &
   BottomTabNavigationConfig;
 
@@ -25,6 +31,7 @@ function BottomTabNavigator({
   initialRouteName,
   backBehavior,
   children,
+  screenListeners,
   screenOptions,
   sceneContainerStyle,
   // @ts-expect-error: lazy is deprecated
@@ -85,6 +92,7 @@ function BottomTabNavigator({
     initialRouteName,
     backBehavior,
     children,
+    screenListeners,
     screenOptions,
     defaultScreenOptions,
   });

packages/bottom-tabs/src/types.tsx

@@ -1,23 +1,23 @@
-import type * as React from 'react';
-import type {
-  Animated,
-  TouchableWithoutFeedbackProps,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-  GestureResponderEvent,
-} from 'react-native';
+import type { HeaderOptions } from '@react-navigation/elements';
 import type {
+  Descriptor,
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
-  Descriptor,
-  TabNavigationState,
-  TabActionHelpers,
   RouteProp,
+  TabActionHelpers,
+  TabNavigationState,
 } from '@react-navigation/native';
+import type * as React from 'react';
+import type {
+  Animated,
+  GestureResponderEvent,
+  StyleProp,
+  TextStyle,
+  TouchableWithoutFeedbackProps,
+  ViewStyle,
+} from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
-import type { HeaderOptions } from '@react-navigation/elements';
 
 export type Layout = { width: number; height: number };
 
@@ -80,171 +80,228 @@ export type TabBarVisibilityAnimationConfig =
   | TimingKeyboardAnimationConfig
   | SpringKeyboardAnimationConfig;
 
-export type BottomTabNavigationOptions = HeaderOptions & {
+export type NativeScreenTraitsProps = {
   /**
-   * Title text for the screen.
+   * In which orientation should the screen appear. It requires having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   * The following values are currently supported:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all" – all orientations are permitted
+   * - "portrait" – portrait orientations are permitted
+   * - "portrait_up" – right-side portrait orientation is permitted
+   * - "portrait_down" – upside-down portrait orientation is permitted
+   * - "landscape" – landscape orientations are permitted
+   * - "landscape_left" – landscape-left orientation is permitted
+   * - "landscape_right" – landscape-right orientation is permitted
    */
-  title?: string;
-
+  orientation?:
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
-   * Set it to `false` if you want to render the screen on initial render.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  lazy?: boolean;
-
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
   /**
-   * Function that given returns a React Element to display as a header.
-   */
-  header?: (props: BottomTabHeaderProps) => React.ReactNode;
-
-  /**
-   * Whether to show the header. Setting this to `false` hides the header.
-   * Defaults to `true`.
-   */
-  headerShown?: boolean;
-
-  /**
-   * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires enabled `react-native-screens` version >=3.3.0.
    *
-   * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+   * @platform android
    */
-  tabBarLabel?:
-    | string
-    | ((props: {
-        focused: boolean;
-        color: string;
-        position: LabelPosition;
-      }) => React.ReactNode);
-
+  statusBarColor?: string;
   /**
-   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  tabBarIcon?: (props: {
-    focused: boolean;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-
+  statusBarHidden?: boolean;
   /**
-   * Text to show in a badge on the tab icon.
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  tabBarBadge?: number | string;
-
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
   /**
-   * Custom style for the tab bar badge.
-   * You can specify a background color or text color here.
-   */
-  tabBarBadgeStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * It's recommended to set this if you don't have a label for the tab.
-   */
-  tabBarAccessibilityLabel?: string;
-
-  /**
-   * ID to locate this tab button in tests.
-   */
-  tabBarTestID?: string;
-
-  /**
-   * Animation config for showing and hiding the tab bar.
-   */
-  tabBarVisibilityAnimationConfig?: {
-    show?: TabBarVisibilityAnimationConfig;
-    hide?: TabBarVisibilityAnimationConfig;
-  };
-
-  /**
-   * Function which returns a React element to render as the tab bar button.
-   * Renders `TouchableWithoutFeedback` by default.
-   */
-  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
-
-  /**
-   * Color for the icon and label in the active tab.
-   */
-  tabBarActiveTintColor?: string;
-
-  /**
-   * Color for the icon and label in the inactive tabs.
-   */
-  tabBarInactiveTintColor?: string;
-
-  /**
-   * Background color for the active tab.
-   */
-  tabBarActiveBackgroundColor?: string;
-
-  /**
-   * background color for the inactive tabs.
-   */
-  tabBarInactiveBackgroundColor?: string;
-
-  /**
-   * Whether label font should scale to respect Text Size accessibility settings.
-   */
-  tabBarAllowFontScaling?: boolean;
-
-  /**
-   * Whether the tab label should be visible. Defaults to `true`.
-   */
-  tabBarShowLabel?: boolean;
-
-  /**
-   * Style object for the tab label.
-   */
-  tabBarLabelStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab icon.
-   */
-  tabBarIconStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab item container.
-   */
-  tabBarItemStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Whether the label is rendered below the icon or beside the icon.
-   * By default, the position is chosen automatically based on device width.
-   * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
-   */
-  tabBarLabelPosition?: LabelPosition;
-
-  /**
-   * Whether the label position should adapt to the orientation.
-   */
-  tabBarAdaptive?: boolean;
-
-  /**
-   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
-   */
-  tabBarHideOnKeyboard?: boolean;
-
-  /**
-   * Style object for the tab bar container.
-   */
-  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-
-  /**
-   * Component to use as background for the tab bar.
-   * You could render an image, a gradient, blur view etc.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
    *
-   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
-   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+   * @platform android
    */
-  tabBarBackground?: () => React.ReactNode;
-
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: boolean;
+  statusBarTranslucent?: boolean;
 };
 
+export type BottomTabNavigationOptions = HeaderOptions &
+  NativeScreenTraitsProps & {
+    /**
+     * Title text for the screen.
+     */
+    title?: string;
+
+    /**
+     * Whether this screens should render the first time it's accessed. Defaults to `true`.
+     * Set it to `false` if you want to render the screen on initial render.
+     */
+    lazy?: boolean;
+
+    /**
+     * Function that given returns a React Element to display as a header.
+     */
+    header?: (props: BottomTabHeaderProps) => React.ReactNode;
+
+    /**
+     * Whether to show the header. Setting this to `false` hides the header.
+     * Defaults to `true`.
+     */
+    headerShown?: boolean;
+
+    /**
+     * Title string of a tab displayed in the tab bar
+     * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
+     *
+     * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+     */
+    tabBarLabel?:
+      | string
+      | ((props: {
+          focused: boolean;
+          color: string;
+          position: LabelPosition;
+        }) => React.ReactNode);
+
+    /**
+     * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+     */
+    tabBarIcon?: (props: {
+      focused: boolean;
+      color: string;
+      size: number;
+    }) => React.ReactNode;
+
+    /**
+     * Text to show in a badge on the tab icon.
+     */
+    tabBarBadge?: number | string;
+
+    /**
+     * Custom style for the tab bar badge.
+     * You can specify a background color or text color here.
+     */
+    tabBarBadgeStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+     * It's recommended to set this if you don't have a label for the tab.
+     */
+    tabBarAccessibilityLabel?: string;
+
+    /**
+     * ID to locate this tab button in tests.
+     */
+    tabBarTestID?: string;
+
+    /**
+     * Animation config for showing and hiding the tab bar.
+     */
+    tabBarVisibilityAnimationConfig?: {
+      show?: TabBarVisibilityAnimationConfig;
+      hide?: TabBarVisibilityAnimationConfig;
+    };
+
+    /**
+     * Function which returns a React element to render as the tab bar button.
+     * Renders `TouchableWithoutFeedback` by default.
+     */
+    tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+
+    /**
+     * Color for the icon and label in the active tab.
+     */
+    tabBarActiveTintColor?: string;
+
+    /**
+     * Color for the icon and label in the inactive tabs.
+     */
+    tabBarInactiveTintColor?: string;
+
+    /**
+     * Background color for the active tab.
+     */
+    tabBarActiveBackgroundColor?: string;
+
+    /**
+     * background color for the inactive tabs.
+     */
+    tabBarInactiveBackgroundColor?: string;
+
+    /**
+     * Whether label font should scale to respect Text Size accessibility settings.
+     */
+    tabBarAllowFontScaling?: boolean;
+
+    /**
+     * Whether the tab label should be visible. Defaults to `true`.
+     */
+    tabBarShowLabel?: boolean;
+
+    /**
+     * Style object for the tab label.
+     */
+    tabBarLabelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the tab icon.
+     */
+    tabBarIconStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the tab item container.
+     */
+    tabBarItemStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether the label is rendered below the icon or beside the icon.
+     * By default, the position is chosen automatically based on device width.
+     * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
+     */
+    tabBarLabelPosition?: LabelPosition;
+
+    /**
+     * Whether the label position should adapt to the orientation.
+     */
+    tabBarAdaptive?: boolean;
+
+    /**
+     * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+     */
+    tabBarHideOnKeyboard?: boolean;
+
+    /**
+     * Style object for the tab bar container.
+     */
+    tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+
+    /**
+     * Component to use as background for the tab bar.
+     * You could render an image, a gradient, blur view etc.
+     *
+     * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+     * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+     */
+    tabBarBackground?: () => React.ReactNode;
+
+    /**
+     * Whether this screen should be unmounted when navigating away from it.
+     * Defaults to `false`.
+     */
+    unmountOnBlur?: boolean;
+  };
+
 export type BottomTabDescriptor = Descriptor<
   BottomTabNavigationOptions,
   BottomTabNavigationProp<ParamListBase>,

packages/bottom-tabs/src/utils/useBottomTabBarHeight.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import BottomTabBarHeightContext from './BottomTabBarHeightContext';
 
 export default function useFloatingBottomTabBarHeight() {

packages/bottom-tabs/src/utils/useIsKeyboardShown.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Keyboard, Platform, EmitterSubscription } from 'react-native';
+import { EmitterSubscription, Keyboard, Platform } from 'react-native';
 
 export default function useIsKeyboardShown() {
   const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';
-import color from 'color';
 import { useTheme } from '@react-navigation/native';
+import color from 'color';
+import * as React from 'react';
+import { Animated, StyleProp, StyleSheet, TextStyle } from 'react-native';
 
 type Props = {
   /**

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

@@ -1,29 +1,29 @@
-import React from 'react';
-import {
-  View,
-  Animated,
-  StyleSheet,
-  Platform,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { MissingIcon } from '@react-navigation/elements';
 import {
+  CommonActions,
   NavigationContext,
   NavigationRouteContext,
-  TabNavigationState,
   ParamListBase,
-  CommonActions,
-  useTheme,
+  TabNavigationState,
   useLinkBuilder,
+  useTheme,
 } from '@react-navigation/native';
-import { MissingIcon } from '@react-navigation/elements';
+import React from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { EdgeInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
 
-import BottomTabItem from './BottomTabItem';
+import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
 import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
 import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
+import BottomTabItem from './BottomTabItem';
 
 type Props = BottomTabBarProps & {
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;

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

@@ -1,19 +1,19 @@
-import React from 'react';
-import {
-  Text,
-  Pressable,
-  StyleSheet,
-  Platform,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  GestureResponderEvent,
-} from 'react-native';
 import { Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
+import React from 'react';
+import {
+  GestureResponderEvent,
+  Platform,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 
-import TabBarIcon from './TabBarIcon';
 import type { BottomTabBarButtonProps, LabelPosition } from '../types';
+import TabBarIcon from './TabBarIcon';
 
 type Props = {
   /**

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

@@ -1,28 +1,29 @@
-import * as React from 'react';
-import { StyleSheet, Platform } from 'react-native';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import {
+  getHeaderTitle,
+  Header,
+  SafeAreaProviderCompat,
+  Screen,
+} from '@react-navigation/elements';
 import type {
   ParamListBase,
   TabNavigationState,
 } from '@react-navigation/native';
-import {
-  Header,
-  Screen,
-  SafeAreaProviderCompat,
-  getHeaderTitle,
-} from '@react-navigation/elements';
-import { MaybeScreenContainer, MaybeScreen } from './ScreenFallback';
-import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
-import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
-import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+
 import type {
-  BottomTabNavigationConfig,
-  BottomTabDescriptorMap,
-  BottomTabNavigationHelpers,
   BottomTabBarProps,
+  BottomTabDescriptorMap,
   BottomTabHeaderProps,
+  BottomTabNavigationConfig,
+  BottomTabNavigationHelpers,
   BottomTabNavigationProp,
 } from '../types';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
+import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
+import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
 
 type Props = BottomTabNavigationConfig & {
   state: TabNavigationState<ParamListBase>;
@@ -95,7 +96,16 @@ export default function BottomTabView(props: Props) {
       >
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const {
+            lazy = true,
+            unmountOnBlur,
+            orientation,
+            statusBarAnimation,
+            statusBarColor,
+            statusBarHidden,
+            statusBarStyle,
+            statusBarTranslucent,
+          } = descriptor.options;
           const isFocused = state.index === index;
 
           if (unmountOnBlur && !isFocused) {
@@ -123,6 +133,12 @@ export default function BottomTabView(props: Props) {
               style={StyleSheet.absoluteFill}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              orientation={orientation}
+              statusBarAnimation={statusBarAnimation}
+              statusBarColor={statusBarColor}
+              statusBarHidden={statusBarHidden}
+              statusBarStyle={statusBarStyle}
+              statusBarTranslucent={statusBarTranslucent}
             >
               <BottomTabBarHeightContext.Provider value={tabBarHeight}>
                 <Screen

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

@@ -1,8 +1,10 @@
+import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
 import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
-import { ResourceSavingView } from '@react-navigation/elements';
 
-type Props = {
+import type { NativeScreenTraitsProps } from '../types';
+
+type Props = NativeScreenTraitsProps & {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;

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

@@ -1,12 +1,13 @@
+import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
-  View,
-  StyleSheet,
   StyleProp,
+  StyleSheet,
   TextStyle,
+  View,
   ViewStyle,
 } from 'react-native';
-import type { Route } from '@react-navigation/native';
+
 import Badge from './Badge';
 
 type Props = {
@@ -27,6 +28,7 @@ type Props = {
 };
 
 export default function TabBarIcon({
+  route: _,
   horizontal,
   badge,
   badgeStyle,

packages/core/CHANGELOG.md

@@ -3,6 +3,48 @@
 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.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.12...@react-navigation/core@6.0.0-next.13) (2021-05-29)
+
+
+### Bug Fixes
+
+* validate property names in linking config ([324ea71](https://github.com/react-navigation/react-navigation/commit/324ea7181db6b743f512854be267cc9d65975b6f))
+
+
+
+
+
+# [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.11...@react-navigation/core@6.0.0-next.12) (2021-05-29)
+
+
+### Bug Fixes
+
+* try to fix [#9631](https://github.com/react-navigation/react-navigation/issues/9631) ([b4d7b0e](https://github.com/react-navigation/react-navigation/commit/b4d7b0ee86c09419a18357867a0a25bb90d960c0))
+
+
+
+
+
+# [6.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.10...@react-navigation/core@6.0.0-next.11) (2021-05-27)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.9...@react-navigation/core@6.0.0-next.10) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+* expose container ref in useNavigation ([1d40279](https://github.com/react-navigation/react-navigation/commit/1d40279db18ab2aed12517ed3ca6af6d509477d2))
+
+
+
+
+
 # [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.8...@react-navigation/core@6.0.0-next.9) (2021-05-23)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react",
     "react-native",
@@ -35,7 +35,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.0.0-next.3",
+    "@react-navigation/routers": "^6.0.0-next.4",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.22",
     "query-string": "^7.0.0",

packages/core/src/BaseNavigationContainer.tsx

@@ -1,59 +1,42 @@
-import * as React from 'react';
 import {
   CommonActions,
-  Route,
-  NavigationState,
   InitialState,
-  PartialState,
   NavigationAction,
+  NavigationState,
   ParamListBase,
+  PartialState,
+  Route,
 } from '@react-navigation/routers';
-import EnsureSingleNavigator from './EnsureSingleNavigator';
-import UnhandledActionContext from './UnhandledActionContext';
-import NavigationBuilderContext from './NavigationBuilderContext';
-import NavigationStateContext from './NavigationStateContext';
-import NavigationRouteContext from './NavigationRouteContext';
-import NavigationContext from './NavigationContext';
-import { ScheduleUpdateContext } from './useScheduleUpdate';
-import useChildListeners from './useChildListeners';
-import useKeyedChildListeners from './useKeyedChildListeners';
-import useOptionsGetters from './useOptionsGetters';
-import useEventEmitter from './useEventEmitter';
-import useSyncState from './useSyncState';
-import checkSerializable from './checkSerializable';
+import * as React from 'react';
+
 import checkDuplicateRouteNames from './checkDuplicateRouteNames';
-import findFocusedRoute from './findFocusedRoute';
+import checkSerializable from './checkSerializable';
 import { NOT_INITIALIZED_ERROR } from './createNavigationContainerRef';
+import EnsureSingleNavigator from './EnsureSingleNavigator';
+import findFocusedRoute from './findFocusedRoute';
+import NavigationBuilderContext from './NavigationBuilderContext';
+import NavigationContainerRefContext from './NavigationContainerRefContext';
+import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import NavigationStateContext from './NavigationStateContext';
 import type {
   NavigationContainerEventMap,
-  NavigationContainerRef,
   NavigationContainerProps,
+  NavigationContainerRef,
 } from './types';
+import UnhandledActionContext from './UnhandledActionContext';
+import useChildListeners from './useChildListeners';
+import useEventEmitter from './useEventEmitter';
+import useKeyedChildListeners from './useKeyedChildListeners';
+import useOptionsGetters from './useOptionsGetters';
+import { ScheduleUpdateContext } from './useScheduleUpdate';
+import useSyncState from './useSyncState';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
 const serializableWarnings: string[] = [];
 const duplicateNameWarnings: string[] = [];
 
-try {
-  /**
-   * Migration instructions for removal of devtools from core
-   */
-  Object.defineProperty(
-    global,
-    'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED',
-    {
-      set(_) {
-        console.warn(
-          "Redux devtools extension integration can be enabled with the '@react-navigation/devtools' package. For more details, see https://reactnavigation.org/docs/devtools"
-        );
-      },
-    }
-  );
-} catch (e) {
-  // Ignore
-}
-
 /**
  * Remove `key` and `routeNames` from the state objects recursively to get partial state.
  *
@@ -136,17 +119,22 @@ const BaseNavigationContainer = React.forwardRef(
 
     const { keyedListeners, addKeyedListener } = useKeyedChildListeners();
 
-    const dispatch = (
-      action: NavigationAction | ((state: NavigationState) => NavigationAction)
-    ) => {
-      if (listeners.focus[0] == null) {
-        console.error(NOT_INITIALIZED_ERROR);
-      } else {
-        listeners.focus[0]((navigation) => navigation.dispatch(action));
-      }
-    };
+    const dispatch = React.useCallback(
+      (
+        action:
+          | NavigationAction
+          | ((state: NavigationState) => NavigationAction)
+      ) => {
+        if (listeners.focus[0] == null) {
+          console.error(NOT_INITIALIZED_ERROR);
+        } else {
+          listeners.focus[0]((navigation) => navigation.dispatch(action));
+        }
+      },
+      [listeners.focus]
+    );
 
-    const canGoBack = () => {
+    const canGoBack = React.useCallback(() => {
       if (listeners.focus[0] == null) {
         return false;
       }
@@ -160,7 +148,7 @@ const BaseNavigationContainer = React.forwardRef(
       } else {
         return false;
       }
-    };
+    }, [listeners.focus]);
 
     const resetRoot = React.useCallback(
       (state?: PartialState<NavigationState> | NavigationState) => {
@@ -200,24 +188,38 @@ const BaseNavigationContainer = React.forwardRef(
 
     const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({});
 
-    React.useImperativeHandle(ref, () => ({
-      ...Object.keys(CommonActions).reduce<any>((acc, name) => {
-        acc[name] = (...args: any[]) =>
-          // @ts-expect-error: this is ok
-          dispatch(CommonActions[name](...args));
-        return acc;
-      }, {}),
-      ...emitter.create('root'),
-      resetRoot,
-      dispatch,
-      canGoBack,
-      getRootState,
-      getState: () => state,
-      getParent: () => undefined,
-      getCurrentRoute,
-      getCurrentOptions,
-      isReady: () => listeners.focus[0] != null,
-    }));
+    const navigation: NavigationContainerRef<ParamListBase> = React.useMemo(
+      () => ({
+        ...Object.keys(CommonActions).reduce<any>((acc, name) => {
+          acc[name] = (...args: any[]) =>
+            // @ts-expect-error: this is ok
+            dispatch(CommonActions[name](...args));
+          return acc;
+        }, {}),
+        ...emitter.create('root'),
+        resetRoot,
+        dispatch,
+        canGoBack,
+        getRootState,
+        getState: () => stateRef.current,
+        getParent: () => undefined,
+        getCurrentRoute,
+        getCurrentOptions,
+        isReady: () => listeners.focus[0] != null,
+      }),
+      [
+        canGoBack,
+        dispatch,
+        emitter,
+        getCurrentOptions,
+        getCurrentRoute,
+        getRootState,
+        listeners.focus,
+        resetRoot,
+      ]
+    );
+
+    React.useImperativeHandle(ref, () => navigation, [navigation]);
 
     const onDispatchAction = React.useCallback(
       (action: NavigationAction, noop: boolean) => {
@@ -285,10 +287,12 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     const onStateChangeRef = React.useRef(onStateChange);
+    const stateRef = React.useRef(state);
 
     React.useEffect(() => {
       isInitialRef.current = false;
       onStateChangeRef.current = onStateChange;
+      stateRef.current = state;
     });
 
     React.useEffect(() => {
@@ -415,17 +419,19 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     let element = (
-      <ScheduleUpdateContext.Provider value={scheduleContext}>
-        <NavigationBuilderContext.Provider value={builderContext}>
-          <NavigationStateContext.Provider value={context}>
-            <UnhandledActionContext.Provider
-              value={onUnhandledAction ?? defaultOnUnhandledAction}
-            >
-              <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-            </UnhandledActionContext.Provider>
-          </NavigationStateContext.Provider>
-        </NavigationBuilderContext.Provider>
-      </ScheduleUpdateContext.Provider>
+      <NavigationContainerRefContext.Provider value={navigation}>
+        <ScheduleUpdateContext.Provider value={scheduleContext}>
+          <NavigationBuilderContext.Provider value={builderContext}>
+            <NavigationStateContext.Provider value={context}>
+              <UnhandledActionContext.Provider
+                value={onUnhandledAction ?? defaultOnUnhandledAction}
+              >
+                <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+              </UnhandledActionContext.Provider>
+            </NavigationStateContext.Provider>
+          </NavigationBuilderContext.Provider>
+        </ScheduleUpdateContext.Provider>
+      </NavigationContainerRefContext.Provider>
     );
 
     if (independent) {

packages/core/src/Group.tsx

@@ -1,4 +1,5 @@
 import type { ParamListBase } from '@react-navigation/routers';
+
 import type { RouteGroupConfig } from './types';
 
 /**

packages/core/src/NavigationBuilderContext.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react';
 import type {
   NavigationAction,
   NavigationState,
   ParamListBase,
 } from '@react-navigation/routers';
+import * as React from 'react';
+
 import type { NavigationHelpers } from './types';
 
 export type ListenerMap = {

packages/core/src/NavigationContainerRefContext.tsx

@@ -0,0 +1,13 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import type { NavigationContainerRef } from './types';
+
+/**
+ * Context which holds the route prop for a screen.
+ */
+const NavigationContainerRefContext = React.createContext<
+  NavigationContainerRef<ParamListBase> | undefined
+>(undefined);
+
+export default NavigationContainerRefContext;

packages/core/src/NavigationContext.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
 import type { NavigationProp } from './types';
 
 /**

packages/core/src/NavigationHelpersContext.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
 import type { NavigationHelpers } from './types';
 
 /**

packages/core/src/NavigationRouteContext.tsx

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

packages/core/src/NavigationStateContext.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { NavigationState, PartialState } from '@react-navigation/routers';
+import * as React from 'react';
 
 const MISSING_CONTEXT_ERROR =
   "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";

packages/core/src/SceneView.tsx

@@ -1,15 +1,16 @@
-import * as React from 'react';
 import type {
-  Route,
-  ParamListBase,
   NavigationState,
+  ParamListBase,
   PartialState,
+  Route,
 } from '@react-navigation/routers';
+import * as React from 'react';
+
+import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationStateContext from './NavigationStateContext';
 import StaticContainer from './StaticContainer';
-import EnsureSingleNavigator from './EnsureSingleNavigator';
-import useOptionsGetters from './useOptionsGetters';
 import type { NavigationProp, RouteConfigComponent } from './types';
+import useOptionsGetters from './useOptionsGetters';
 
 type Props<State extends NavigationState, ScreenOptions extends {}> = {
   screen: RouteConfigComponent<ParamListBase, string> & { name: string };

packages/core/src/Screen.tsx

@@ -1,5 +1,6 @@
-import type { ParamListBase, NavigationState } from '@react-navigation/routers';
-import type { RouteConfig, EventMapBase } from './types';
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+
+import type { EventMapBase, RouteConfig } from './types';
 
 /**
  * Empty component used for specifying route configuration.

packages/core/src/UnhandledActionContext.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { NavigationAction } from '@react-navigation/routers';
+import * as React from 'react';
 
 const UnhandledActionContext = React.createContext<
   ((action: NavigationAction) => void) | undefined

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-import { act, render } from '@testing-library/react-native';
 import {
   DefaultRouterOptions,
   NavigationState,
@@ -8,12 +6,15 @@ import {
   StackRouter,
   TabRouter,
 } from '@react-navigation/routers';
+import { act, render } from '@testing-library/react-native';
+import * as React from 'react';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
-import NavigationStateContext from '../NavigationStateContext';
 import createNavigationContainerRef from '../createNavigationContainerRef';
-import MockRouter, { MockActions } from './__fixtures__/MockRouter';
-import useNavigationBuilder from '../useNavigationBuilder';
+import NavigationStateContext from '../NavigationStateContext';
 import Screen from '../Screen';
+import useNavigationBuilder from '../useNavigationBuilder';
+import MockRouter, { MockActions } from './__fixtures__/MockRouter';
 
 it('throws when getState is accessed without a container', () => {
   expect.assertions(1);

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

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
 import StaticContainer from '../StaticContainer';
 
 it("doesn't update element if no props changed", () => {

packages/core/src/__tests__/__fixtures__/MockRouter.tsx

@@ -1,10 +1,10 @@
 import {
   BaseRouter,
-  Router,
   CommonNavigationAction,
+  DefaultRouterOptions,
   NavigationState,
   Route,
-  DefaultRouterOptions,
+  Router,
 } from '@react-navigation/routers';
 
 export type MockActions = CommonNavigationAction | { type: 'NOOP' | 'UPDATE' };

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

@@ -1,4 +1,5 @@
 import type { NavigationState, PartialState } from '@react-navigation/routers';
+
 import getPathFromState from '../getPathFromState';
 import getStateFromPath from '../getStateFromPath';
 

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

@@ -1,8 +1,9 @@
 import type { InitialState } from '@react-navigation/routers';
 import produce from 'immer';
-import getStateFromPath from '../getStateFromPath';
-import getPathFromState from '../getPathFromState';
+
 import findFocusedRoute from '../findFocusedRoute';
+import getPathFromState from '../getPathFromState';
+import getStateFromPath from '../getStateFromPath';
 
 const changePath = <T extends InitialState>(state: T, path: string): T =>
   produce(state, (draftState) => {
@@ -2419,3 +2420,57 @@ it('correctly applies initialRouteName for config with similar route names v2',
     getStateFromPath<object>(getPathFromState<object>(state, config), config)
   ).toEqual(state);
 });
+
+it('throws when invalid properties are specified in the config', () => {
+  expect(() =>
+    getStateFromPath<object>('', {
+      Foo: 'foo',
+      Bar: {
+        path: 'bar',
+      },
+    } as any)
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "Found invalid properties in the configuration:
+    - Foo
+    - Bar
+
+    Did you forget to specify them under a 'screens' property?
+
+    You can only specify the following properties:
+    - initialRouteName
+    - screens
+
+    See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+  `);
+
+  expect(() =>
+    getStateFromPath<object>('', {
+      screens: {
+        Foo: 'foo',
+        Bar: {
+          path: 'bar',
+        },
+        Baz: {
+          Qux: {
+            path: 'qux',
+          },
+        },
+      },
+    } as any)
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "Found invalid properties in the configuration:
+    - Qux
+
+    Did you forget to specify them under a 'screens' property?
+
+    You can only specify the following properties:
+    - initialRouteName
+    - screens
+    - path
+    - exact
+    - stringify
+    - parse
+
+    See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+  `);
+});

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

@@ -1,12 +1,13 @@
-import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+import { act, render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import BaseNavigationContainer from '../BaseNavigationContainer';
+import createNavigationContainerRef from '../createNavigationContainerRef';
 import Group from '../Group';
 import Screen from '../Screen';
-import BaseNavigationContainer from '../BaseNavigationContainer';
-import useNavigationBuilder from '../useNavigationBuilder';
-import createNavigationContainerRef from '../createNavigationContainerRef';
 import useNavigation from '../useNavigation';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
 
 beforeEach(() => (MockRouterKey.current = 0));

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

@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
 import type {
   DefaultRouterOptions,
   NavigationState,
   Router,
 } from '@react-navigation/routers';
-import useNavigationBuilder from '../useNavigationBuilder';
+import { act, render } from '@testing-library/react-native';
+import * as React from 'react';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter, {
   MockActions,
   MockRouterKey,

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

@@ -1,9 +1,10 @@
+import type { NavigationState, Router } from '@react-navigation/routers';
+import { act, render } from '@testing-library/react-native';
 import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
-import type { Router, NavigationState } from '@react-navigation/routers';
-import useNavigationBuilder from '../useNavigationBuilder';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter from './__fixtures__/MockRouter';
 
 it('fires focus and blur events in root navigator', () => {

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

@@ -1,9 +1,10 @@
+import { act, render } from '@testing-library/react-native';
 import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
-import useNavigationBuilder from '../useNavigationBuilder';
-import useFocusEffect from '../useFocusEffect';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useFocusEffect from '../useFocusEffect';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter from './__fixtures__/MockRouter';
 
 it('runs focus effect on focus change', () => {

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

@@ -1,9 +1,10 @@
+import { act, render } from '@testing-library/react-native';
 import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
-import useNavigationBuilder from '../useNavigationBuilder';
-import useIsFocused from '../useIsFocused';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useIsFocused from '../useIsFocused';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter from './__fixtures__/MockRouter';
 
 it('renders correct focus state', () => {

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

@@ -1,9 +1,10 @@
-import * as React from 'react';
 import { render } from '@testing-library/react-native';
-import useNavigationBuilder from '../useNavigationBuilder';
-import useNavigation from '../useNavigation';
+import * as React from 'react';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useNavigation from '../useNavigation';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter from './__fixtures__/MockRouter';
 
 it('gets navigation prop from context', () => {
@@ -106,13 +107,40 @@ it("gets navigation's parent's parent from context", () => {
   );
 });
 
+it('gets navigation from container 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 navigation = useNavigation();
+
+    expect(navigation.navigate).toBeDefined();
+
+    return null;
+  };
+
+  render(
+    <BaseNavigationContainer>
+      <Test />
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+});
+
 it('throws if called outside a navigation context', () => {
   expect.assertions(1);
 
   const Test = () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     expect(() => useNavigation()).toThrow(
-      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
     );
 
     return null;

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

@@ -1,10 +1,11 @@
+import { act, render } from '@testing-library/react-native';
 import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
-import useEventEmitter from '../useEventEmitter';
-import useNavigationCache from '../useNavigationCache';
-import useNavigationBuilder from '../useNavigationBuilder';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useEventEmitter from '../useEventEmitter';
+import useNavigationBuilder from '../useNavigationBuilder';
+import useNavigationCache from '../useNavigationCache';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
 
 beforeEach(() => (MockRouterKey.current = 0));

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

@@ -1,10 +1,11 @@
-import * as React from 'react';
-import { render, act } from '@testing-library/react-native';
 import type { NavigationState } from '@react-navigation/routers';
-import useNavigationBuilder from '../useNavigationBuilder';
-import useNavigationState from '../useNavigationState';
+import { act, render } from '@testing-library/react-native';
+import * as React from 'react';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
+import useNavigationBuilder from '../useNavigationBuilder';
+import useNavigationState from '../useNavigationState';
 import MockRouter from './__fixtures__/MockRouter';
 
 it('gets the current navigation state', () => {

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

@@ -1,16 +1,17 @@
-import * as React from 'react';
-import { act, render } from '@testing-library/react-native';
 import {
-  Router,
   DefaultRouterOptions,
   NavigationState,
-  StackRouter,
   ParamListBase,
+  Router,
+  StackRouter,
 } from '@react-navigation/routers';
-import useNavigationBuilder from '../useNavigationBuilder';
+import { act, render } from '@testing-library/react-native';
+import * as React from 'react';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
-import Screen from '../Screen';
 import createNavigationContainerRef from '../createNavigationContainerRef';
+import Screen from '../Screen';
+import useNavigationBuilder from '../useNavigationBuilder';
 import MockRouter, {
   MockActions,
   MockRouterKey,

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

@@ -1,11 +1,12 @@
-import * as React from 'react';
 import { render } from '@testing-library/react-native';
-import useNavigationBuilder from '../useNavigationBuilder';
-import useRoute from '../useRoute';
+import * as React from 'react';
+
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
-import MockRouter from './__fixtures__/MockRouter';
 import type { RouteProp } from '../types';
+import useNavigationBuilder from '../useNavigationBuilder';
+import useRoute from '../useRoute';
+import MockRouter from './__fixtures__/MockRouter';
 
 it('gets route prop from context', () => {
   expect.assertions(1);

packages/core/src/createNavigationContainerRef.tsx

@@ -1,4 +1,5 @@
 import { CommonActions } from '@react-navigation/routers';
+
 import type { NavigationContainerRefWithCurrent } from './types';
 
 export const NOT_INITIALIZED_ERROR =

packages/core/src/createNavigatorFactory.tsx

@@ -1,8 +1,9 @@
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import type * as React from 'react';
-import type { ParamListBase, NavigationState } from '@react-navigation/routers';
+
 import Group from './Group';
 import Screen from './Screen';
-import type { TypedNavigator, EventMapBase } from './types';
+import type { EventMapBase, TypedNavigator } from './types';
 
 /**
  * Higher order component to create a `Navigator` and `Screen` pair.

packages/core/src/getActionFromState.tsx

@@ -1,12 +1,13 @@
 import type {
-  Route,
-  PartialRoute,
-  ParamListBase,
-  NavigationState,
-  PartialState,
   CommonActions,
+  NavigationState,
+  ParamListBase,
+  PartialRoute,
+  PartialState,
+  Route,
 } from '@react-navigation/routers';
-import type { PathConfig, PathConfigMap, NavigatorScreenParams } from './types';
+
+import type { NavigatorScreenParams, PathConfig, PathConfigMap } from './types';
 
 type ConfigItem = {
   initialRouteName?: string;

packages/core/src/getFocusedRouteNameFromRoute.tsx

@@ -1,4 +1,5 @@
 import type { Route } from '@react-navigation/routers';
+
 import { CHILD_STATE } from './useRouteCache';
 
 export default function getFocusedRouteNameFromRoute(

packages/core/src/getPathFromState.tsx

@@ -1,11 +1,13 @@
-import * as queryString from 'query-string';
 import type {
   NavigationState,
   PartialState,
   Route,
 } from '@react-navigation/routers';
+import * as queryString from 'query-string';
+
 import fromEntries from './fromEntries';
 import type { PathConfig, PathConfigMap } from './types';
+import validatePathConfig from './validatePathConfig';
 
 type Options<ParamList> = {
   initialRouteName?: string;
@@ -74,6 +76,10 @@ export default function getPathFromState<ParamList extends {}>(
     );
   }
 
+  if (options) {
+    validatePathConfig(options);
+  }
+
   // Create a normalized configs object which will be easier to use
   const configs: Record<string, ConfigItem> = options?.screens
     ? createNormalizedConfigs(options?.screens)

packages/core/src/getStateFromPath.tsx

@@ -1,12 +1,14 @@
-import escape from 'escape-string-regexp';
-import * as queryString from 'query-string';
 import type {
+  InitialState,
   NavigationState,
   PartialState,
-  InitialState,
 } from '@react-navigation/routers';
+import escape from 'escape-string-regexp';
+import * as queryString from 'query-string';
+
 import findFocusedRoute from './findFocusedRoute';
 import type { PathConfigMap } from './types';
+import validatePathConfig from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
   initialRouteName?: string;
@@ -64,6 +66,10 @@ export default function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
+  if (options) {
+    validatePathConfig(options);
+  }
+
   let initialRoutes: InitialRouteConfig[] = [];
 
   if (options?.initialRouteName) {

packages/core/src/index.tsx

@@ -1,30 +1,23 @@
-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';
-
+export { default as createNavigatorFactory } from './createNavigatorFactory';
 export { default as CurrentRenderContext } from './CurrentRenderContext';
-
-export { default as useNavigationBuilder } from './useNavigationBuilder';
-export { default as useNavigation } from './useNavigation';
-export { default as useRoute } from './useRoute';
+export { default as findFocusedRoute } from './findFocusedRoute';
+export { default as getActionFromState } from './getActionFromState';
+export { default as getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
+export { default as getPathFromState } from './getPathFromState';
+export { default as getStateFromPath } from './getStateFromPath';
+export { default as NavigationContainerRefContext } from './NavigationContainerRefContext';
+export { default as NavigationContext } from './NavigationContext';
+export { default as NavigationHelpersContext } from './NavigationHelpersContext';
+export { default as NavigationRouteContext } from './NavigationRouteContext';
+export * from './types';
 export { default as useFocusEffect } from './useFocusEffect';
 export { default as useIsFocused } from './useIsFocused';
+export { default as useNavigation } from './useNavigation';
+export { default as useNavigationBuilder } from './useNavigationBuilder';
+export { default as useNavigationContainerRef } from './useNavigationContainerRef';
 export { default as useNavigationState } from './useNavigationState';
-
-export { default as getStateFromPath } from './getStateFromPath';
-export { default as getPathFromState } from './getPathFromState';
-export { default as getActionFromState } from './getActionFromState';
-
-export { default as findFocusedRoute } from './findFocusedRoute';
-
-export { default as getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
-
-export * from './types';
+export { default as useRoute } from './useRoute';
+export { default as validatePathConfig } from './validatePathConfig';
+export * from '@react-navigation/routers';

packages/core/src/types.tsx

@@ -1,13 +1,13 @@
-import type * as React from 'react';
 import type {
   DefaultRouterOptions,
-  NavigationState,
-  NavigationAction,
   InitialState,
+  NavigationAction,
+  NavigationState,
+  ParamListBase,
   PartialState,
   Route,
-  ParamListBase,
 } from '@react-navigation/routers';
+import type * as React from 'react';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -20,14 +20,25 @@ declare global {
 type Keyof<T extends {}> = Extract<keyof T, string>;
 
 export type DefaultNavigatorOptions<
+  ParamList extends ParamListBase,
+  State extends NavigationState,
   ScreenOptions extends {},
-  ParamList extends ParamListBase = ParamListBase
+  EventMap extends EventMapBase
 > = DefaultRouterOptions<Keyof<ParamList>> & {
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen`, `Group` and `React.Fragment` are supported as children.
    */
   children: React.ReactNode;
+  /**
+   * Event listeners for all the screens in the navigator.
+   */
+  screenListeners?:
+    | ScreenListeners<State, EventMap>
+    | ((props: {
+        route: RouteProp<ParamList>;
+        navigation: any;
+      }) => ScreenListeners<State, EventMap>);
   /**
    * Default options for all screens under this navigator.
    */
@@ -564,9 +575,9 @@ export type TypedNavigator<
   Navigator: React.ComponentType<
     Omit<
       React.ComponentProps<Navigator>,
-      keyof DefaultNavigatorOptions<any, any>
+      keyof DefaultNavigatorOptions<any, any, any, any>
     > &
-      DefaultNavigatorOptions<ScreenOptions, ParamList>
+      DefaultNavigatorOptions<ParamList, State, ScreenOptions, EventMap>
   >;
   /**
    * Component used for grouping multiple route configuration.

packages/core/src/useChildListeners.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import type { ListenerMap } from './NavigationBuilderContext';
 
 /**

packages/core/src/useCurrentRender.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
 import CurrentRenderContext from './CurrentRenderContext';
 import type {
   Descriptor,

packages/core/src/useDescriptors.tsx

@@ -1,28 +1,29 @@
-import * as React from 'react';
 import type {
   NavigationAction,
   NavigationState,
   ParamListBase,
   Router,
 } from '@react-navigation/routers';
-import SceneView from './SceneView';
+import * as React from 'react';
+
 import NavigationBuilderContext, {
-  AddListener,
   AddKeyedListener,
+  AddListener,
 } from './NavigationBuilderContext';
+import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import SceneView from './SceneView';
+import type {
+  Descriptor,
+  EventMapBase,
+  NavigationHelpers,
+  NavigationProp,
+  RouteConfig,
+  RouteProp,
+} from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 import useNavigationCache from './useNavigationCache';
 import useRouteCache from './useRouteCache';
-import NavigationContext from './NavigationContext';
-import NavigationRouteContext from './NavigationRouteContext';
-import type {
-  Descriptor,
-  NavigationHelpers,
-  RouteConfig,
-  RouteProp,
-  EventMapBase,
-  NavigationProp,
-} from './types';
 
 export type ScreenConfigWithParent<
   State extends NavigationState,

packages/core/src/useEventEmitter.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { EventEmitter, EventConsumer, EventArg } from './types';
+
+import type { EventArg, EventConsumer, EventEmitter } from './types';
 
 export type NavigationEventEmitter<
   T extends Record<string, any>

packages/core/src/useFocusEffect.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import useNavigation from './useNavigation';
 
 type EffectCallback = () => undefined | void | (() => void);

packages/core/src/useFocusEvents.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
 import type { NavigationState } from '@react-navigation/routers';
+import * as React from 'react';
+
 import NavigationContext from './NavigationContext';
-import type { NavigationEventEmitter } from './useEventEmitter';
 import type { EventMapCore } from './types';
+import type { NavigationEventEmitter } from './useEventEmitter';
 
 type Options<State extends NavigationState> = {
   state: State;

packages/core/src/useFocusedListenersChildrenAdapter.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
 import NavigationBuilderContext, {
   FocusedNavigationCallback,
   FocusedNavigationListener,

packages/core/src/useIsFocused.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
+
 import useNavigation from './useNavigation';
 
 /**

packages/core/src/useKeyedChildListeners.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import type { KeyedListenerMap } from './NavigationBuilderContext';
 
 /**

packages/core/src/useNavigation.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+
+import NavigationContainerRefContext from './NavigationContainerRefContext';
 import NavigationContext from './NavigationContext';
 import type { NavigationProp } from './types';
 
@@ -10,14 +12,15 @@ import type { NavigationProp } from './types';
 export default function useNavigation<
   T = NavigationProp<ReactNavigation.RootParamList>
 >(): T {
+  const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationContext);
 
-  if (navigation === undefined) {
+  if (navigation === undefined && root === undefined) {
     throw new Error(
-      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
     );
   }
 
   // FIXME: Figure out a better way to do this
-  return (navigation as unknown) as T;
+  return ((navigation ?? root) as unknown) as T;
 }

packages/core/src/useNavigationBuilder.tsx

@@ -1,45 +1,46 @@
-import * as React from 'react';
-import { isValidElementType } from 'react-is';
 import {
   CommonActions,
   DefaultRouterOptions,
+  NavigationAction,
   NavigationState,
   ParamListBase,
-  Router,
-  RouterFactory,
-  RouterConfigOptions,
   PartialState,
-  NavigationAction,
   Route,
+  Router,
+  RouterConfigOptions,
+  RouterFactory,
 } from '@react-navigation/routers';
-import NavigationStateContext from './NavigationStateContext';
-import NavigationRouteContext from './NavigationRouteContext';
-import NavigationHelpersContext from './NavigationHelpersContext';
+import * as React from 'react';
+import { isValidElementType } from 'react-is';
+
 import Group from './Group';
-import Screen from './Screen';
-import useEventEmitter from './useEventEmitter';
-import useRegisterNavigator from './useRegisterNavigator';
-import useDescriptors, { ScreenConfigWithParent } from './useDescriptors';
-import useNavigationHelpers from './useNavigationHelpers';
-import useOnAction from './useOnAction';
-import useFocusEvents from './useFocusEvents';
-import useOnRouteFocus from './useOnRouteFocus';
-import useChildListeners from './useChildListeners';
-import useFocusedListenersChildrenAdapter from './useFocusedListenersChildrenAdapter';
-import useKeyedChildListeners from './useKeyedChildListeners';
-import useOnGetState from './useOnGetState';
-import useScheduleUpdate from './useScheduleUpdate';
-import useCurrentRender from './useCurrentRender';
-import useComponent from './useComponent';
 import isArrayEqual from './isArrayEqual';
+import NavigationHelpersContext from './NavigationHelpersContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import NavigationStateContext from './NavigationStateContext';
+import Screen from './Screen';
 import {
   DefaultNavigatorOptions,
-  RouteConfig,
-  PrivateValueStore,
   EventMapBase,
   EventMapCore,
   NavigatorScreenParams,
+  PrivateValueStore,
+  RouteConfig,
 } from './types';
+import useChildListeners from './useChildListeners';
+import useComponent from './useComponent';
+import useCurrentRender from './useCurrentRender';
+import useDescriptors, { ScreenConfigWithParent } from './useDescriptors';
+import useEventEmitter from './useEventEmitter';
+import useFocusedListenersChildrenAdapter from './useFocusedListenersChildrenAdapter';
+import useFocusEvents from './useFocusEvents';
+import useKeyedChildListeners from './useKeyedChildListeners';
+import useNavigationHelpers from './useNavigationHelpers';
+import useOnAction from './useOnAction';
+import useOnGetState from './useOnGetState';
+import useOnRouteFocus from './useOnRouteFocus';
+import useRegisterNavigator from './useRegisterNavigator';
+import useScheduleUpdate from './useScheduleUpdate';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
@@ -202,7 +203,13 @@ export default function useNavigationBuilder<
   EventMap extends Record<string, any>
 >(
   createRouter: RouterFactory<State, any, RouterOptions>,
-  options: DefaultNavigatorOptions<ScreenOptions> & RouterOptions
+  options: DefaultNavigatorOptions<
+    ParamListBase,
+    State,
+    ScreenOptions,
+    EventMap
+  > &
+    RouterOptions
 ) {
   const navigatorKey = useRegisterNavigator();
 
@@ -210,7 +217,7 @@ export default function useNavigationBuilder<
     | NavigatorRoute<State>
     | undefined;
 
-  const { children, ...rest } = options;
+  const { children, screenListeners, ...rest } = options;
   const { current: router } = React.useRef<Router<State, any>>(
     createRouter({
       ...((rest as unknown) as RouterOptions),
@@ -487,8 +494,14 @@ export default function useNavigationBuilder<
 
     const listeners = ([] as (((e: any) => void) | undefined)[])
       .concat(
-        ...routeNames.map((name) => {
-          const { listeners } = screens[name][1];
+        // Get an array of listeners for all screens + common listeners on navigator
+        ...[
+          screenListeners,
+          ...routeNames.map((name) => {
+            const { listeners } = screens[name][1];
+            return listeners;
+          }),
+        ].map((listeners) => {
           const map =
             typeof listeners === 'function'
               ? listeners({ route: route as any, navigation })
@@ -501,6 +514,8 @@ export default function useNavigationBuilder<
             : undefined;
         })
       )
+      // We don't want same listener to be called multiple times for same event
+      // So we remove any duplicate functions from the array
       .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
 
     listeners.forEach((listener) => listener?.(e));

packages/core/src/useNavigationCache.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
 import {
   CommonActions,
   NavigationAction,
-  ParamListBase,
   NavigationState,
+  ParamListBase,
   Router,
 } from '@react-navigation/routers';
-import type { NavigationEventEmitter } from './useEventEmitter';
+import * as React from 'react';
 
 import type { NavigationHelpers, NavigationProp } from './types';
+import type { NavigationEventEmitter } from './useEventEmitter';
 
 type Options<
   State extends NavigationState,

packages/core/src/useNavigationContainerRef.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import createNavigationContainerRef from './createNavigationContainerRef';
 import type { NavigationContainerRefWithCurrent } from './types';
 

packages/core/src/useNavigationHelpers.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   CommonActions,
   NavigationAction,
@@ -6,10 +5,12 @@ import {
   ParamListBase,
   Router,
 } from '@react-navigation/routers';
+import * as React from 'react';
+
 import NavigationContext from './NavigationContext';
+import { NavigationHelpers, NavigationProp, PrivateValueStore } from './types';
 import UnhandledActionContext from './UnhandledActionContext';
 import type { NavigationEventEmitter } from './useEventEmitter';
-import { NavigationHelpers, NavigationProp, PrivateValueStore } from './types';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions

packages/core/src/useNavigationState.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
-import useNavigation from './useNavigation';
+import * as React from 'react';
+
 import type { NavigationProp } from './types';
+import useNavigation from './useNavigation';
 
 type Selector<ParamList extends ParamListBase, T> = (
   state: NavigationState<ParamList>

packages/core/src/useOnAction.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type {
   NavigationAction,
   NavigationState,
@@ -6,13 +5,15 @@ import type {
   Router,
   RouterConfigOptions,
 } from '@react-navigation/routers';
+import * as React from 'react';
+
 import NavigationBuilderContext, {
   ChildActionListener,
   ChildBeforeRemoveListener,
 } from './NavigationBuilderContext';
-import useOnPreventRemove, { shouldPreventRemove } from './useOnPreventRemove';
-import type { NavigationEventEmitter } from './useEventEmitter';
 import type { EventMapCore } from './types';
+import type { NavigationEventEmitter } from './useEventEmitter';
+import useOnPreventRemove, { shouldPreventRemove } from './useOnPreventRemove';
 
 type Options = {
   router: Router<NavigationState, NavigationAction>;