From 83a235900f721a4a9af29630b48931ac8a156247 Mon Sep 17 00:00:00 2001
From: Artur Burlak <artur.burlak@apicodo.de>
Date: Sat, 21 Jun 2025 18:33:33 +0200
Subject: [PATCH] Fix TS issues for Screens and withProvider

---
 .../ReactNavigationDetailScreen.tsx           | 26 +++++++++----------
 .../components/ReactNavigationHomeScreen.tsx  | 17 ++++++------
 .../ReactNavigationModalDetailScreen.tsx      | 20 +++++++-------
 .../ReactNavigationSettingsScreen.tsx         | 17 ++++++------
 example/src/components/withProvider.tsx       |  4 ++-
 example/src/types/Navigation.tsx              |  4 ---
 6 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/example/src/components/ReactNavigationDetailScreen.tsx b/example/src/components/ReactNavigationDetailScreen.tsx
index d77936d7..dcfcea37 100644
--- a/example/src/components/ReactNavigationDetailScreen.tsx
+++ b/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"
diff --git a/example/src/components/ReactNavigationHomeScreen.tsx b/example/src/components/ReactNavigationHomeScreen.tsx
index 055cc2de..2df3e7ce 100644
--- a/example/src/components/ReactNavigationHomeScreen.tsx
+++ b/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>
   );
diff --git a/example/src/components/ReactNavigationModalDetailScreen.tsx b/example/src/components/ReactNavigationModalDetailScreen.tsx
index 85d988af..589423e3 100644
--- a/example/src/components/ReactNavigationModalDetailScreen.tsx
+++ b/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={() => {
diff --git a/example/src/components/ReactNavigationSettingsScreen.tsx b/example/src/components/ReactNavigationSettingsScreen.tsx
index 6eb1fc7e..f3c43912 100644
--- a/example/src/components/ReactNavigationSettingsScreen.tsx
+++ b/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>
   );
diff --git a/example/src/components/withProvider.tsx b/example/src/components/withProvider.tsx
index 96f9b3d5..d87a0441 100644
--- a/example/src/components/withProvider.tsx
+++ b/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>
diff --git a/example/src/types/Navigation.tsx b/example/src/types/Navigation.tsx
index 47b77f13..8297e2b0 100644
--- a/example/src/types/Navigation.tsx
+++ b/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>;