chore: publish

- @react-navigation/bottom-tabs@6.0.0-next.16
 - @react-navigation/core@6.0.0-next.12
 - @react-navigation/devtools@6.0.0-next.13
 - @react-navigation/drawer@6.0.0-next.15
 - @react-navigation/elements@1.0.0-next.15
 - flipper-plugin-react-navigation@1.1.3
 - @react-navigation/material-bottom-tabs@6.0.0-next.12
 - @react-navigation/material-top-tabs@6.0.0-next.13
 - @react-navigation/native-stack@6.0.0-next.5
 - @react-navigation/native@6.0.0-next.12
 - @react-navigation/stack@6.0.0-next.23

.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/package.json

@@ -32,7 +32,7 @@
     "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.0",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
     "react-native-screens": "~3.0.0",

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 { HeaderBackButton } from '@react-navigation/elements';
-import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
+import { ParamListBase, useTheme } from '@react-navigation/native';
-import { Title, Button } from 'react-native-paper';
-import { useTheme, ParamListBase } 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 { HeaderBackground, useHeaderHeight } from '@react-navigation/elements';
-import {
+import { ParamListBase, useTheme } from '@react-navigation/native';
-  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 {
   createStackNavigator,
-  StackScreenProps,
   Header,
   StackHeaderProps,
+  StackScreenProps,
 } from '@react-navigation/stack';
-import { HeaderBackground, useHeaderHeight } from '@react-navigation/elements';
+import * as React from 'react';
-import BlurView from '../Shared/BlurView';
+import {
-import Article from '../Shared/Article';
+  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,23 +1,26 @@
-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';
 
 type TransparentStackParams = {
   Article: { author: string };
+  NewsFeed: undefined;
   Dialog: undefined;
 };
 
@@ -37,6 +40,13 @@ const ArticleScreen = ({
         >
           Show Dialog
         </Button>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('NewsFeed')}
+          style={styles.button}
+        >
+          Push NewsFeed
+        </Button>
         <Button
           mode="outlined"
           onPress={() => navigation.goBack()}
@@ -53,6 +63,32 @@ const ArticleScreen = ({
   );
 };
 
+const NewsFeedScreen = ({
+  navigation,
+}: StackScreenProps<TransparentStackParams, 'NewsFeed'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Dialog')}
+          style={styles.button}
+        >
+          Show Dialog
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <NewsFeed scrollEnabled={scrollEnabled} />
+    </ScrollView>
+  );
+};
+
 const DialogScreen = ({
   navigation,
 }: StackScreenProps<TransparentStackParams>) => {
@@ -116,6 +152,11 @@ export default function TransparentStackScreen({ navigation }: Props) {
         component={ArticleScreen}
         initialParams={{ author: 'Gandalf' }}
       />
+      <TransparentStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ presentation: 'modal' }}
+      />
       <TransparentStack.Screen
         name="Dialog"
         component={DialogScreen}
@@ -131,6 +172,7 @@ export default function TransparentStackScreen({ navigation }: Props) {
 const styles = StyleSheet.create({
   buttons: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     padding: 8,
   },
   button: {

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,
+  Card,
-  IconButton,
   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,69 @@
-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,
+  NavigatorScreenParams,
-  DarkTheme,
   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,
+  Dimensions,
-  useFlipper,
+  I18nManager,
-} from '@react-navigation/devtools';
+  Linking,
+  LogBox,
+  Platform,
+  ScaledSize,
+  ScrollView,
+  StatusBar,
+} 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:']);
@@ -333,9 +337,10 @@ export default function App() {
                 >
                   {({
                     navigation,
-                  }: {
+                  }: CompositeScreenProps<
-                    navigation: StackNavigationProp<RootStackParamList>;
+                    DrawerScreenProps<RootDrawerParamList, 'Examples'>,
-                  }) => (
+                    StackScreenProps<RootStackParamList>
+                  >) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >

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.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
+
+
+
+
+
 # [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.11...@react-navigation/bottom-tabs@6.0.0-next.12) (2021-05-23)
 
 **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.12",
+  "version": "6.0.0-next.16",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.15",
     "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.12",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",

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,
+  useNavigationBuilder,
-  TabActionHelpers,
-  ParamListBase,
 } 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 { HeaderOptions } from '@react-navigation/elements';
-import type {
-  Animated,
-  TouchableWithoutFeedbackProps,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-  GestureResponderEvent,
-} from 'react-native';
 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 };
 

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 { MissingIcon } from '@react-navigation/elements';
-import {
-  View,
-  Animated,
-  StyleSheet,
-  Platform,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
 import {
+  CommonActions,
   NavigationContext,
   NavigationRouteContext,
-  TabNavigationState,
   ParamListBase,
-  CommonActions,
+  TabNavigationState,
-  useTheme,
   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 {
-import { StyleSheet, Platform } from 'react-native';
+  getHeaderTitle,
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+  Header,
+  SafeAreaProviderCompat,
+  Screen,
+} from '@react-navigation/elements';
 import type {
   ParamListBase,
   TabNavigationState,
 } from '@react-navigation/native';
-import {
+import * as React from 'react';
-  Header,
+import { Platform, StyleSheet } from 'react-native';
-  Screen,
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
-  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 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>;

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

@@ -1,6 +1,6 @@
+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 = {
   visible: 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,37 @@
 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.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.12",
   "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 * as React from 'react';
-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 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 = (
+    const dispatch = React.useCallback(
-      action: NavigationAction | ((state: NavigationState) => NavigationAction)
+      (
-    ) => {
+        action:
-      if (listeners.focus[0] == null) {
+          | NavigationAction
-        console.error(NOT_INITIALIZED_ERROR);
+          | ((state: NavigationState) => NavigationAction)
-      } else {
+      ) => {
-        listeners.focus[0]((navigation) => navigation.dispatch(action));
+        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, () => ({
+    const navigation: NavigationContainerRef<ParamListBase> = React.useMemo(
-      ...Object.keys(CommonActions).reduce<any>((acc, name) => {
+      () => ({
-        acc[name] = (...args: any[]) =>
+        ...Object.keys(CommonActions).reduce<any>((acc, name) => {
-          // @ts-expect-error: this is ok
+          acc[name] = (...args: any[]) =>
-          dispatch(CommonActions[name](...args));
+            // @ts-expect-error: this is ok
-        return acc;
+            dispatch(CommonActions[name](...args));
-      }, {}),
+          return acc;
-      ...emitter.create('root'),
+        }, {}),
-      resetRoot,
+        ...emitter.create('root'),
-      dispatch,
+        resetRoot,
-      canGoBack,
+        dispatch,
-      getRootState,
+        canGoBack,
-      getState: () => state,
+        getRootState,
-      getParent: () => undefined,
+        getState: () => stateRef.current,
-      getCurrentRoute,
+        getParent: () => undefined,
-      getCurrentOptions,
+        getCurrentRoute,
-      isReady: () => listeners.focus[0] != null,
+        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}>
+      <NavigationContainerRefContext.Provider value={navigation}>
-        <NavigationBuilderContext.Provider value={builderContext}>
+        <ScheduleUpdateContext.Provider value={scheduleContext}>
-          <NavigationStateContext.Provider value={context}>
+          <NavigationBuilderContext.Provider value={builderContext}>
-            <UnhandledActionContext.Provider
+            <NavigationStateContext.Provider value={context}>
-              value={onUnhandledAction ?? defaultOnUnhandledAction}
+              <UnhandledActionContext.Provider
-            >
+                value={onUnhandledAction ?? defaultOnUnhandledAction}
-              <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+              >
-            </UnhandledActionContext.Provider>
+                <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-          </NavigationStateContext.Provider>
+              </UnhandledActionContext.Provider>
-        </NavigationBuilderContext.Provider>
+            </NavigationStateContext.Provider>
-      </ScheduleUpdateContext.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 { NavigationState, ParamListBase } from '@react-navigation/routers';
-import type { RouteConfig, EventMapBase } from './types';
+
+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 NavigationStateContext from '../NavigationStateContext';
-import useNavigationBuilder from '../useNavigationBuilder';
 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) => {

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 * as React from 'react';
-import useNavigation from '../useNavigation';
+
 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 { act, render } from '@testing-library/react-native';
-import useNavigationState from '../useNavigationState';
+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 * as React from 'react';
-import useRoute from '../useRoute';
+
 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,9 +1,10 @@
-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';
 

packages/core/src/getStateFromPath.tsx

@@ -1,10 +1,11 @@
-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';
 

packages/core/src/index.tsx

@@ -1,30 +1,22 @@
-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 createNavigatorFactory } from './createNavigatorFactory';
-
-export { default as NavigationHelpersContext } from './NavigationHelpersContext';
-export { default as NavigationContext } from './NavigationContext';
-export { default as NavigationRouteContext } from './NavigationRouteContext';
-
 export { default as CurrentRenderContext } from './CurrentRenderContext';
-
+export { default as findFocusedRoute } from './findFocusedRoute';
-export { default as useNavigationBuilder } from './useNavigationBuilder';
+export { default as getActionFromState } from './getActionFromState';
-export { default as useNavigation } from './useNavigation';
+export { default as getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
-export { default as useRoute } from './useRoute';
+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 useRoute } from './useRoute';
-export { default as getStateFromPath } from './getStateFromPath';
+export * from '@react-navigation/routers';
-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';

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 * as React from 'react';
-import NavigationRouteContext from './NavigationRouteContext';
+import { isValidElementType } from 'react-is';
-import NavigationHelpersContext from './NavigationHelpersContext';
+
 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) => {
+        // Get an array of listeners for all screens + common listeners on navigator
-          const { listeners } = screens[name][1];
+        ...[
+          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>;

packages/core/src/useOnGetState.tsx

@@ -1,10 +1,11 @@
-import * as React from 'react';
 import type { NavigationState } from '@react-navigation/routers';
+import * as React from 'react';
+
+import isArrayEqual from './isArrayEqual';
 import NavigationBuilderContext, {
   GetStateListener,
 } from './NavigationBuilderContext';
 import NavigationRouteContext from './NavigationRouteContext';
-import isArrayEqual from './isArrayEqual';
 
 type Options = {
   getState: () => NavigationState;

packages/core/src/useOnPreventRemove.tsx

@@ -1,14 +1,15 @@
-import * as React from 'react';
 import type {
-  NavigationState,
   NavigationAction,
+  NavigationState,
 } from '@react-navigation/routers';
+import * as React from 'react';
+
 import NavigationBuilderContext, {
   ChildBeforeRemoveListener,
 } from './NavigationBuilderContext';
 import NavigationRouteContext from './NavigationRouteContext';
-import type { NavigationEventEmitter } from './useEventEmitter';
 import type { EventMapCore } from './types';
+import type { NavigationEventEmitter } from './useEventEmitter';
 
 type Options = {
   getState: () => NavigationState;

packages/core/src/useOnRouteFocus.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react';
 import type {
   NavigationAction,
   NavigationState,
   Router,
 } from '@react-navigation/routers';
+import * as React from 'react';
+
 import NavigationBuilderContext from './NavigationBuilderContext';
 
 type Options<Action extends NavigationAction> = {

packages/core/src/useOptionsGetters.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import type { ParamListBase } from '@react-navigation/routers';
-import NavigationStateContext from './NavigationStateContext';
+import * as React from 'react';
+
 import NavigationBuilderContext from './NavigationBuilderContext';
+import NavigationStateContext from './NavigationStateContext';
 import type { NavigationProp } from './types';
 
 type Options = {