chore: upgrade dependencies

.github/workflows/ci.yml

@@ -33,7 +33,7 @@ jobs:
         run: yarn lint
 
       - name: Typecheck files
-        run: yarn typescript
+        run: yarn typecheck
 
   unit-test:
     runs-on: ubuntu-latest
@@ -96,4 +96,4 @@ jobs:
         run: yarn lerna run prepack
 
       - name: Verify built type definitions are correct
-        run: yarn typescript
+        run: yarn typecheck

CONTRIBUTING.md

@@ -89,7 +89,7 @@ Our pre-commit hooks verify that the linter and tests pass when committing.
 The `package.json` file contains various scripts for common tasks:
 
 - `yarn install`: setup project by installing all dependencies and pods.
-- `yarn typescript`: type-check files with TypeScript.
+- `yarn typecheck`: type-check files with TypeScript.
 - `yarn lint`: lint files with ESLint.
 - `yarn test`: run unit tests with Jest.
 - `yarn example start`: run the example app with Expo.

example/__typechecks__/common.check.tsx

@@ -13,10 +13,10 @@ import type {
   NavigationHelpers,
   NavigatorScreenParams,
 } from '@react-navigation/native';
-import type { StackNavigationOptions } from '@react-navigation/stack';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackNavigationOptions,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import { expectTypeOf } from 'expect-type';
 import * as React from 'react';

example/app.json

@@ -31,7 +31,6 @@
       "**/*"
     ],
     "scheme": "rne",
-    "entryPoint": "App.tsx",
     "android": {
       "package": "org.reactnavigation.example"
     },

example/e2e/config/setup-server.ts

@@ -1,7 +1,8 @@
 import { setup } from 'jest-dev-server';
 
 export default async function () {
-  await setup([
+  // @ts-expect-error this is specific to jest-dev-server
+  globalThis.servers = await setup([
     {
       command: 'yarn serve -l 3579 web-build',
       launchTimeout: 50000,

example/e2e/config/teardown-server.ts

@@ -1,5 +1,6 @@
 import { teardown } from 'jest-dev-server';
 
 export default async function () {
-  await teardown();
+  // @ts-expect-error this is specific to jest-dev-server
+  await teardown(globalThis.servers);
 }

example/package.json

@@ -15,52 +15,51 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.0.1",
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "~1.17.11",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-masked-view/masked-view": "0.2.9",
     "color": "^4.2.3",
-    "expo": "^48.0.17",
-    "expo-asset": "~8.6.2",
-    "expo-blur": "~12.2.2",
-    "expo-linking": "~4.0.1",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
-    "expo-updates": "~0.16.4",
-    "koa": "^2.14.1",
+    "expo": "^49.0.16",
+    "expo-asset": "~8.10.1",
+    "expo-blur": "~12.4.1",
+    "expo-linking": "~5.0.2",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-updates": "~0.18.17",
+    "koa": "^2.14.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-pager-view": "6.1.2",
+    "react-native": "0.72.6",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-pager-view": "6.2.0",
     "react-native-paper": "^4.12.5",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "react-native-web": "~0.18.7"
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-web": "~0.19.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/node": "^7.20.5",
-    "@expo/webpack-config": "^18.0.1",
-    "@playwright/test": "^1.28.1",
-    "@types/cheerio": "^0.22.31",
-    "@types/jest-dev-server": "^5.0.0",
-    "@types/koa": "^2.13.5",
-    "@types/mock-require": "^2.0.1",
-    "@types/react": "~18.0.27",
+    "@babel/core": "^7.23.2",
+    "@babel/node": "^7.22.19",
+    "@expo/webpack-config": "^19.0.0",
+    "@playwright/test": "^1.39.0",
+    "@types/cheerio": "^0.22.33",
+    "@types/jest-dev-server": "^5.0.2",
+    "@types/koa": "^2.13.10",
+    "@types/mock-require": "^2.0.2",
+    "@types/react": "~18.2.33",
     "@types/react-dom": "~18.0.10",
-    "@types/react-native": "~0.70.8",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "^9.3.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-preset-expo": "^9.8.0",
     "cheerio": "^1.0.0-rc.12",
-    "expect-type": "^0.15.0",
-    "jest-dev-server": "^6.1.1",
+    "expect-type": "^0.17.3",
+    "jest-dev-server": "^9.0.1",
     "mock-require": "^3.0.3",
     "mock-require-assets": "^0.0.3",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react-test-renderer": "18.1.0",
-    "serve": "^14.1.2",
-    "typescript": "^4.9.4"
+    "react-test-renderer": "18.2.0",
+    "serve": "^14.2.1",
+    "typescript": "^5.2.2"
   }
 }

example/server/index.tsx

@@ -1,6 +1,9 @@
 import './resolve-hooks';
 
-import { ServerContainer, ServerContainerRef } from '@react-navigation/native';
+import {
+  ServerContainer,
+  type ServerContainerRef,
+} from '@react-navigation/native';
 import Koa from 'koa';
 import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';

example/server/resolve-hooks.tsx

@@ -22,3 +22,10 @@ mock(
   // eslint-disable-next-line import/no-commonjs, @typescript-eslint/no-var-requires
   require('react-native-reanimated/mock')
 );
+
+// expo-asset breaks because it imports internals :()
+mock(
+  'react-native-web/Libraries/Image/AssetRegistry',
+  // eslint-disable-next-line import/no-commonjs, @typescript-eslint/no-var-requires
+  require('react-native-web/dist/modules/AssetRegistry')
+);

example/src/Screens/AuthFlow.tsx

@@ -1,7 +1,7 @@
-import { ParamListBase, useTheme } from '@react-navigation/native';
+import { type ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import { ActivityIndicator, StyleSheet, TextInput, View } from 'react-native';

example/src/Screens/BottomTabs.tsx

@@ -7,8 +7,8 @@ import {
 } from '@react-navigation/bottom-tabs';
 import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements';
 import {
-  NavigatorScreenParams,
-  ParamListBase,
+  type NavigatorScreenParams,
+  type ParamListBase,
   useIsFocused,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
@@ -26,7 +26,7 @@ import { Appbar, IconButton } from 'react-native-paper';
 import { Albums } from '../Shared/Albums';
 import { Chat } from '../Shared/Chat';
 import { Contacts } from '../Shared/Contacts';
-import { SimpleStack, SimpleStackParams } from './SimpleStack';
+import { SimpleStack, type SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
@@ -180,12 +180,12 @@ export function BottomTabs({
                 {isLargeScreen && (
                   <Image
                     source={require('../../assets/album-art-03.jpg')}
+                    resizeMode="cover"
                     style={{
                       ...StyleSheet.absoluteFillObject,
                       // Override default size of the image
                       height: undefined,
                       width: undefined,
-                      resizeMode: 'cover',
                     }}
                   />
                 )}

example/src/Screens/CustomLayout.tsx

@@ -4,13 +4,13 @@ import {
 } from '@react-navigation/elements';
 import {
   CommonActions,
-  ParamListBase,
+  type ParamListBase,
   useTheme,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationOptions,
-  StackScreenProps,
+  type StackNavigationOptions,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import {

example/src/Screens/DrawerView.tsx

@@ -4,7 +4,7 @@ import { Drawer, useDrawerProgress } from 'react-native-drawer-layout';
 import { Button } from 'react-native-paper';
 import Animated, {
   interpolate,
-  SharedValue,
+  type SharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 

example/src/Screens/LinkComponent.tsx

@@ -1,12 +1,12 @@
 import {
   Link,
-  ParamListBase,
+  type ParamListBase,
   StackActions,
   useLinkProps,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';

example/src/Screens/LinkingScreen.tsx

@@ -1,7 +1,7 @@
 import { useUnhandledLinking } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import React, { useContext } from 'react';
 import { Button, Platform, StyleSheet, Text, View } from 'react-native';

example/src/Screens/MasterDetail.tsx

@@ -1,11 +1,11 @@
 import {
   createDrawerNavigator,
   DrawerContent,
-  DrawerContentComponentProps,
-  DrawerScreenProps,
+  type DrawerContentComponentProps,
+  type DrawerScreenProps,
 } from '@react-navigation/drawer';
 import {
-  ParamListBase,
+  type ParamListBase,
   useNavigation,
   useTheme,
 } from '@react-navigation/native';

example/src/Screens/MixedHeaderMode.tsx

@@ -2,7 +2,7 @@ import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   HeaderStyleInterpolators,
-  StackScreenProps,
+  type StackScreenProps,
   TransitionPresets,
 } from '@react-navigation/stack';
 import * as React from 'react';

example/src/Screens/MixedStack.tsx

@@ -1,7 +1,7 @@
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';

example/src/Screens/ModalStack.tsx

@@ -1,7 +1,7 @@
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';

example/src/Screens/NativeStack.tsx

@@ -2,7 +2,7 @@ import { useHeaderHeight } from '@react-navigation/elements';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
-  NativeStackScreenProps,
+  type NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';

example/src/Screens/NativeStackHeaderCustomization.tsx

@@ -1,7 +1,7 @@
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
-  NativeStackScreenProps,
+  type NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import * as React from 'react';
 import {
@@ -159,6 +159,7 @@ export function NativeStackHeaderCustomization({
           headerBackground: () => (
             <Image
               source={require('../../assets/cpu.jpg')}
+              resizeMode="cover"
               style={styles.headerBackground}
             />
           ),
@@ -205,6 +206,5 @@ const styles = StyleSheet.create({
     height: undefined,
     width: undefined,
     flex: 1,
-    resizeMode: 'cover',
   },
 });

example/src/Screens/NativeStackPreventRemove.tsx

@@ -1,12 +1,12 @@
 import { UNSTABLE_usePreventRemove } from '@react-navigation/core';
 import {
   CommonActions,
-  ParamListBase,
+  type ParamListBase,
   useTheme,
 } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
-  NativeStackScreenProps,
+  type NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import * as React from 'react';
 import {

example/src/Screens/SimpleStack.tsx

@@ -2,8 +2,8 @@ import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   HeaderStyleInterpolators,
-  StackNavigationOptions,
-  StackScreenProps,
+  type StackNavigationOptions,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';

example/src/Screens/StackHeaderCustomization.tsx

@@ -1,11 +1,11 @@
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { HeaderBackground, useHeaderHeight } from '@react-navigation/elements';
-import { ParamListBase, useTheme } from '@react-navigation/native';
+import { type ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
   Header,
-  StackHeaderProps,
-  StackScreenProps,
+  type StackHeaderProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import {

example/src/Screens/StackPreventRemove.tsx

@@ -1,11 +1,11 @@
 import {
   CommonActions,
-  ParamListBase,
+  type ParamListBase,
   useTheme,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
 import {