chore: tweak types in the example

example/src/Screens/AuthFlow.tsx

@@ -5,7 +5,7 @@ import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   HeaderBackButton,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 
 type AuthStackParams = {
@@ -81,10 +81,6 @@ const HomeScreen = () => {
 
 const SimpleStack = createStackNavigator<AuthStackParams>();
 
-type Props = {
-  navigation: StackNavigationProp<ParamListBase>;
-};
-
 type State = {
   isLoading: boolean;
   isSignout: boolean;
@@ -96,7 +92,9 @@ type Action =
   | { type: 'SIGN_IN'; token: string }
   | { type: 'SIGN_OUT' };
 
-export default function SimpleStackScreen({ navigation }: Props) {
+export default function SimpleStackScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
   const [state, dispatch] = React.useReducer<React.Reducer<State, Action>>(
     (prevState, action) => {
       switch (action.type) {
@@ -135,9 +133,11 @@ export default function SimpleStackScreen({ navigation }: Props) {
     return () => clearTimeout(timer);
   }, []);
 
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   const authContext = React.useMemo(
     () => ({

example/src/Screens/BottomTabs.tsx

@@ -9,7 +9,7 @@ import {
 import type { StackScreenProps } from '@react-navigation/stack';
 import {
   createBottomTabNavigator,
-  BottomTabNavigationProp,
+  BottomTabScreenProps,
 } from '@react-navigation/bottom-tabs';
 import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
@@ -36,9 +36,7 @@ const scrollEnabled = Platform.select({ web: true, default: false });
 
 const AlbumsScreen = ({
   navigation,
-}: {
-  navigation: BottomTabNavigationProp<BottomTabParams>;
-}) => {
+}: BottomTabScreenProps<BottomTabParams>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>

example/src/Screens/CompatAPI.tsx

@@ -8,6 +8,7 @@ import {
 import {
   createStackNavigator,
   StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -143,12 +144,12 @@ const CompatStack = createCompatStackNavigator<
 
 export default function CompatStackScreen({
   navigation,
-}: {
-  navigation: StackNavigationProp<{}>;
-}) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+}: StackScreenProps<{}>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return <CompatStack />;
 }

example/src/Screens/LinkComponent.tsx

@@ -4,13 +4,12 @@ import { Button } from 'react-native-paper';
 import {
   Link,
   StackActions,
-  RouteProp,
   ParamListBase,
   useLinkProps,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -20,8 +19,6 @@ type SimpleStackParams = {
   Albums: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const LinkButton = ({
@@ -45,10 +42,7 @@ const LinkButton = ({
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -88,11 +82,7 @@ const ArticleScreen = ({
   );
 };
 
-const AlbumsScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -124,14 +114,15 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <SimpleStack.Navigator {...rest}>

example/src/Screens/MasterDetail.tsx

@@ -8,12 +8,12 @@ import {
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
-  DrawerNavigationProp,
+  DrawerScreenProps,
   DrawerContent,
   DrawerContentComponentProps,
   DrawerContentOptions,
 } from '@react-navigation/drawer';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { StackScreenProps } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import NewsFeed from '../Shared/NewsFeed';
@@ -24,8 +24,6 @@ type DrawerParams = {
   Albums: undefined;
 };
 
-type DrawerNavigation = DrawerNavigationProp<DrawerParams>;
-
 const useIsLargeScreen = () => {
   const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
 
@@ -60,7 +58,9 @@ const Header = ({
   );
 };
 
-const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const ArticleScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'Article'>) => {
   return (
     <>
       <Header title="Article" onGoBack={() => navigation.toggleDrawer()} />
@@ -69,7 +69,9 @@ const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
   );
 };
 
-const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const NewsFeedScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'NewsFeed'>) => {
   return (
     <>
       <Header title="Feed" onGoBack={() => navigation.toggleDrawer()} />
@@ -78,7 +80,9 @@ const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
   );
 };
 
-const AlbumsScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const AlbumsScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'Albums'>) => {
   return (
     <>
       <Header title="Albums" onGoBack={() => navigation.toggleDrawer()} />
@@ -106,15 +110,16 @@ const CustomDrawerContent = (
 
 const Drawer = createDrawerNavigator<DrawerParams>();
 
-type Props = Partial<React.ComponentProps<typeof Drawer.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof Drawer.Navigator>> &
+  StackScreenProps<ParamListBase>;
 
 export default function DrawerScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-    gestureEnabled: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+      gestureEnabled: false,
+    });
+  }, [navigation]);
 
   const isLargeScreen = useIsLargeScreen();
 

example/src/Screens/MaterialTopTabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ParamListBase } from '@react-navigation/native';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { StackScreenProps } from '@react-navigation/stack';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -14,14 +14,14 @@ type MaterialTopTabParams = {
 
 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
-type Props = {
-  navigation: StackNavigationProp<ParamListBase>;
-};
-
-export default function MaterialTopTabsScreen({ navigation }: Props) {
-  navigation.setOptions({
-    cardStyle: { flex: 1 },
-  });
+export default function MaterialTopTabsScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      cardStyle: { flex: 1 },
+    });
+  }, [navigation]);
 
   return (
     <MaterialTopTabs.Navigator>

example/src/Screens/ModalPresentationStack.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import { Button } from 'react-native-paper';
-import type { RouteProp, ParamListBase } from '@react-navigation/native';
+import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
+  StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
@@ -15,17 +16,12 @@ type ModalStackParams = {
   Albums: undefined;
 };
 
-type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: ModalStackNavigation;
-  route: RouteProp<ModalStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<ModalStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -52,7 +48,7 @@ const ArticleScreen = ({
   );
 };
 
-const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<ModalStackParams>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -78,15 +74,16 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
 
 const ModalPresentationStack = createStackNavigator<ModalStackParams>();
 
-type Props = {
-  options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
-  navigation: StackNavigationProp<ParamListBase>;
+type Props = StackScreenProps<ParamListBase> & {
+  options?: StackNavigationOptions;
 };
 
 export default function SimpleStackScreen({ navigation, options }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <ModalPresentationStack.Navigator

example/src/Screens/NotFound.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { StackScreenProps } from '@react-navigation/stack';
 
 const NotFoundScreen = ({
   navigation,
-}: {
-  navigation: StackNavigationProp<{ Home: undefined }>;
-}) => {
+}: StackScreenProps<{ Home: undefined }>) => {
   return (
     <View style={styles.container}>
       <Text style={styles.title}>404 Not Found</Text>

example/src/Screens/PreventRemove.tsx

@@ -134,9 +134,11 @@ const SimpleStack = createStackNavigator<PreventRemoveParams>();
 type Props = StackScreenProps<ParamListBase>;
 
 export default function SimpleStackScreen({ navigation }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <SimpleStack.Navigator>

example/src/Screens/SimpleStack.tsx

@@ -106,9 +106,11 @@ const SimpleStack = createStackNavigator<SimpleStackParams>();
 export default function SimpleStackScreen({
   navigation,
 }: StackScreenProps<ParamListBase>) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <SimpleStack.Navigator>

example/src/Screens/StackHeaderCustomization.tsx

@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import { Button, Appbar } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTheme, RouteProp, ParamListBase } from '@react-navigation/native';
+import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
   HeaderBackground,
   useHeaderHeight,
   Header,
@@ -27,17 +27,12 @@ type SimpleStackParams = {
   Albums: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -64,11 +59,7 @@ const ArticleScreen = ({
   );
 };
 
-const AlbumsScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
   const headerHeight = useHeaderHeight();
 
   return (
@@ -96,9 +87,8 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;
 
 function CustomHeader(props: StackHeaderProps) {
   const { current, next } = props.scene.progress;
@@ -120,9 +110,11 @@ function CustomHeader(props: StackHeaderProps) {
 }
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   const { colors, dark } = useTheme();
 

example/src/Screens/StackTransparent.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import { Button, Paragraph } from 'react-native-paper';
-import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
+import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 
@@ -13,17 +13,12 @@ type SimpleStackParams = {
   Dialog: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -50,11 +45,7 @@ const ArticleScreen = ({
   );
 };
 
-const DialogScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const DialogScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
   const { colors } = useTheme();
 
   return (
@@ -81,14 +72,15 @@ const DialogScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <SimpleStack.Navigator mode="modal" {...rest}>

example/src/index.tsx

@@ -31,11 +31,11 @@ import {
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
-  DrawerNavigationProp,
+  DrawerScreenProps,
 } from '@react-navigation/drawer';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
@@ -288,11 +288,7 @@ export default function App() {
               ),
             }}
           >
-            {({
-              navigation,
-            }: {
-              navigation: DrawerNavigationProp<RootDrawerParamList>;
-            }) => (
+            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
               <Stack.Navigator
                 screenOptions={{
                   headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
@@ -313,11 +309,7 @@ export default function App() {
                         ),
                   }}
                 >
-                  {({
-                    navigation,
-                  }: {
-                    navigation: StackNavigationProp<RootStackParamList>;
-                  }) => (
+                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >