fix: RNS, React Navigation and SafeAreaContext

Author: chrispader

bun.lockb

@@ -1261,7 +1261,7 @@ PODS:
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-  - react-native-safe-area-context (4.14.0):
+  - react-native-safe-area-context (5.2.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1274,8 +1274,8 @@ PODS:
     - React-featureflags
     - React-graphics
     - React-ImageManager
-    - react-native-safe-area-context/common (= 4.14.0)
-    - react-native-safe-area-context/fabric (= 4.14.0)
+    - react-native-safe-area-context/common (= 5.2.0)
+    - react-native-safe-area-context/fabric (= 5.2.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-rendererdebug
@@ -1284,7 +1284,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context/common (4.14.0):
+  - react-native-safe-area-context/common (5.2.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1305,7 +1305,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context/fabric (4.14.0):
+  - react-native-safe-area-context/fabric (5.2.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1636,7 +1636,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.35.0):
+  - RNScreens (4.9.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1657,9 +1657,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 3.35.0)
+    - RNScreens/common (= 4.9.1)
     - Yoga
-  - RNScreens/common (3.35.0):
+  - RNScreens/common (4.9.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1944,7 +1944,7 @@ SPEC CHECKSUMS:
   React-logger: 795cd5055782db394f187f9db0477d4b25b44291
   React-Mapbuffer: 0502faf46cab8fb89cfc7bf3e6c6109b6ef9b5de
   React-microtasksnativemodule: 663bc64e3a96c5fc91081923ae7481adc1359a78
-  react-native-safe-area-context: ef245940fb88805d1f1d762068cde5c56d43ba37
+  react-native-safe-area-context: 9c33120e9eac7741a5364cc2d9f74665049b76b3
   React-NativeModulesApple: 16fbd5b040ff6c492dacc361d49e63cba7a6a7a1
   React-perflogger: ab51b7592532a0ea45bf6eed7e6cae14a368b678
   React-performancetimeline: bc2e48198ec814d578ac8401f65d78a574358203
@@ -1974,7 +1974,7 @@ SPEC CHECKSUMS:
   ReactCodegen: 1f6437d1ad7db1aeb47cbc27b7b980a4f7a19b6b
   ReactCommon: 3d39389f8e2a2157d5c999f8fba57bd1c8f226f0
   RNNitroSQLite: d840ee69ea72a9ac3232b124a4fff57055a5e810
-  RNScreens: 520a873712f4a9822e18004d6959ed0daba38367
+  RNScreens: 991214b4e69016c1ae32830d9cea31c9c9422367
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c
 

example/ios/Podfile.lock

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@craftzdog/react-native-buffer": "^6.0.5",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/native": "^7.0.14",
+    "@react-navigation/native-stack": "^7.2.0",
     "chai": "^4.3.7",
     "chance": "^1.1.9",
     "events": "^3.3.0",
@@ -25,8 +25,8 @@
     "react-native": "0.78.0",
     "react-native-nitro-modules": "0.24.1",
     "react-native-nitro-sqlite": "9.1.4",
-    "react-native-safe-area-context": "^4.14.0",
-    "react-native-screens": "^3.35.0",
+    "react-native-safe-area-context": "^5.2.0",
+    "react-native-screens": "^4.9.1",
     "reflect-metadata": "^0.1.13",
     "stream-browserify": "^3.0.0",
     "typeorm": "^0.3.20",

example/package.json

@@ -1,23 +1,20 @@
 import React from 'react'
 import 'reflect-metadata'
-import { UnitTestScreen } from './screens/UnitTestScreen'
-import { BenchmarkScreen } from './screens/BenchmarkScreen'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { NavigationContainer } from '@react-navigation/native'
 import { StatusBar } from 'expo-status-bar'
-import type { ParamList } from './navigation'
+import { RootStack } from './navigation'
 import { HomeScreen } from './screens/HomeScreen'
-
-const Stack = createNativeStackNavigator<ParamList>()
+import { UnitTestScreen } from './screens/UnitTestScreen'
+import { BenchmarkScreen } from './screens/BenchmarkScreen'
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="NitroSQLite Example">
-        <Stack.Screen name="NitroSQLite Example" component={HomeScreen} />
-        <Stack.Screen name="Unit Tests" component={UnitTestScreen} />
-        <Stack.Screen name="Benchmarks" component={BenchmarkScreen} />
-      </Stack.Navigator>
+      <RootStack.Navigator initialRouteName="NitroSQLite Example">
+        <RootStack.Screen name="NitroSQLite Example" component={HomeScreen} />
+        <RootStack.Screen name="Unit Tests" component={UnitTestScreen} />
+        <RootStack.Screen name="Benchmarks" component={BenchmarkScreen} />
+      </RootStack.Navigator>
 
       <StatusBar style="auto" />
     </NavigationContainer>

example/src/App.tsx

@@ -1,5 +1,21 @@
-export type ParamList = {
-  'NitroSQLite Example': undefined
-  'Unit Tests': undefined
-  'Benchmarks': undefined
+import { StaticParamList } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { HomeScreen } from './screens/HomeScreen'
+import { UnitTestScreen } from './screens/UnitTestScreen'
+import { BenchmarkScreen } from './screens/BenchmarkScreen'
+
+export const RootStack = createNativeStackNavigator({
+  screens: {
+    'NitroSQLite Example': HomeScreen,
+    'Unit Tests': UnitTestScreen,
+    'Benchmarks': BenchmarkScreen,
+  },
+})
+
+type RootStackParamList = StaticParamList<typeof RootStack>
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
 }

example/src/navigation.ts

@@ -9,8 +9,6 @@ import {
   View,
 } from 'react-native'
 import { StatusBar } from 'expo-status-bar'
-import type { NativeStackScreenProps } from '@react-navigation/native-stack'
-import type { ParamList } from '../navigation'
 import { ScreenStyles } from '../styles'
 import { resetLargeDb, largeDb, testDb, resetTestDb } from '../tests/db'
 
@@ -96,9 +94,7 @@ function runBenchmark(benchmark: Benchmark) {
   })
 }
 
-type Props = NativeStackScreenProps<ParamList, 'Benchmarks'>
-
-export const BenchmarkScreen: React.FC<Props> = () => {
+export function BenchmarkScreen() {
   const [results, setResults] = useState<Record<string, string | null>>({})
   const [isLoading, setIsLoading] = useState(false)
 

example/src/screens/BenchmarkScreen.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import { ScrollView, Text, TouchableOpacity } from 'react-native'
-import type { NativeStackScreenProps } from '@react-navigation/native-stack'
-import type { ParamList } from '../navigation'
 import { StatusBar } from 'expo-status-bar'
 import { ScreenStyles } from '../styles'
+import { useNavigation } from '@react-navigation/native'
 
-type Props = NativeStackScreenProps<ParamList, 'NitroSQLite Example'>
+export function HomeScreen() {
+  const navigation = useNavigation()
 
-export const HomeScreen: React.FC<Props> = ({ navigation }) => {
   return (
     <ScrollView contentContainerStyle={ScreenStyles.container}>
       <TouchableOpacity onPress={() => navigation.navigate('Unit Tests')}>

example/src/screens/HomeScreen.tsx

@@ -5,7 +5,7 @@ import { runTests } from '../tests/MochaSetup'
 import { registerUnitTests } from '../tests/unitTests.spec'
 import { ScreenStyles } from '../styles'
 
-export const UnitTestScreen: React.FC = () => {
+export function UnitTestScreen() {
   const [results, setResults] = useState<MochaTestResult[]>([])
 
   useEffect(() => {