Fix TS issues for Screens and withProvider

Author: Artur Burlak

example/src/components/ReactNavigationDetailScreen.tsx

@@ -1,29 +1,29 @@
 import * as React from 'react';
 import { Button, Text } from 'react-native';
-import type { ScreenProps } from '../types/Navigation';
+import type { Routes } from '../types/Navigation';
 import { SafeAreaViewVisualizer } from './SafeAreaViewVisualizer';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
-export default function ReactNavigationDetailScreen({
-  navigation,
-}: ScreenProps<'Details'>) {
-  const isV5 = typeof navigation.setOptions === 'function';
+export default function ReactNavigationDetailScreen() {
   const [headerShown, setHeaderShown] = React.useState(true);
+  const { navigate, goBack, setOptions, push } =
+    useNavigation<NativeStackNavigationProp<Routes>>();
+
+  const isV5 = typeof setOptions === 'function';
 
   React.useLayoutEffect(() => {
     if (isV5) {
-      navigation.setOptions({ headerShown });
+      setOptions({ headerShown });
     }
-  }, [navigation, isV5, headerShown]);
+  }, [setOptions, isV5, headerShown]);
 
   return (
     <SafeAreaViewVisualizer>
       <Text>Details Screen</Text>
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.push('Details')}
-      />
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button title="Go to Details... again" onPress={() => push('Details')} />
+      <Button title="Go to Home" onPress={() => navigate('Home')} />
+      <Button title="Go back" onPress={() => goBack()} />
       {isV5 && (
         <Button
           title="Toggle header"

example/src/components/ReactNavigationHomeScreen.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { Button, Text } from 'react-native';
-import type { ScreenProps } from '../types/Navigation';
+import type { Routes } from '../types/Navigation';
 import { SafeAreaViewVisualizer } from './SafeAreaViewVisualizer';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+export default function ReactNavigationHomeScreen() {
+  const { navigate, push } = useNavigation<NativeStackNavigationProp<Routes>>();
 
-export default function ReactNavigationHomeScreen({
-  navigation,
-}: ScreenProps<'Home'>) {
   return (
     <SafeAreaViewVisualizer>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button title="Go to Details" onPress={() => navigate('Details')} />
       <Button
         title="Go to Modal Details"
-        onPress={() => navigation.push('ModalDetails')}
+        onPress={() => push('ModalDetails')}
       />
     </SafeAreaViewVisualizer>
   );

example/src/components/ReactNavigationModalDetailScreen.tsx

@@ -1,26 +1,28 @@
 import * as React from 'react';
 import { Button, Text } from 'react-native';
-import type { ScreenProps } from '../types/Navigation';
+import type { Routes } from '../types/Navigation';
 import { SafeAreaViewVisualizer } from './SafeAreaViewVisualizer';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
-export default function ReactNavigationModalDetailScreen({
-  navigation,
-}: ScreenProps<'ModalDetails'>) {
+export default function ReactNavigationModalDetailScreen() {
   const [headerShown, setHeaderShown] = React.useState(false);
+  const { navigate, goBack, setOptions, push } =
+    useNavigation<NativeStackNavigationProp<Routes>>();
 
   React.useLayoutEffect(() => {
-    navigation.setOptions({ headerShown });
-  }, [navigation, headerShown]);
+    setOptions({ headerShown });
+  }, [setOptions, headerShown]);
 
   return (
     <SafeAreaViewVisualizer>
       <Text>Modal Details Screen</Text>
       <Button
         title="Go to Modal Details... again"
-        onPress={() => navigation.push('ModalDetails')}
+        onPress={() => push('ModalDetails')}
       />
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button title="Go to Home" onPress={() => navigate('Home')} />
+      <Button title="Go back" onPress={() => goBack()} />
       <Button
         title="Toggle header"
         onPress={() => {

example/src/components/ReactNavigationSettingsScreen.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { Button, Text } from 'react-native';
-import type { ScreenProps } from '../types/Navigation';
+import type { Routes } from '../types/Navigation';
 import { SafeAreaViewVisualizer } from './SafeAreaViewVisualizer';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
+
+export default function ReactNavigationSettingsScreen() {
+  const { navigate, push } = useNavigation<NativeStackNavigationProp<Routes>>();
 
-export default function ReactNavigationSettingsScreen({
-  navigation,
-}: ScreenProps<'Settings'>) {
   return (
     <SafeAreaViewVisualizer>
       <Text>Settings Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button title="Go to Details" onPress={() => navigate('Details')} />
       <Button
         title="Go to Modal Details"
-        onPress={() => navigation.push('ModalDetails')}
+        onPress={() => push('ModalDetails')}
       />
     </SafeAreaViewVisualizer>
   );

example/src/components/withProvider.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-export function withProvider<T>(Component: React.ComponentType<T>) {
+export function withProvider<T extends object>(
+  Component: React.ComponentType<T>,
+) {
   return function WrappedScreen(props: T) {
     return (
       <SafeAreaProvider>

example/src/types/Navigation.tsx

@@ -1,10 +1,6 @@
-import type { StackScreenProps } from '@react-navigation/stack';
-
 export type Routes = {
   Home: undefined;
   Details: undefined;
   ModalDetails: undefined;
   Settings: undefined;
 };
-
-export type ScreenProps<T extends keyof Routes> = StackScreenProps<Routes, T>;