chore(sample-apps): upgrade react-router from v6 to v8

.gitignore

@@ -63,6 +63,7 @@ local.properties
 android.iml
 
 .claude/worktrees/
+.claude/launch.json
 
 # transient release notes written by the enrich-changelog release postTarget
 packages/*/.release-notes.md

package.json

@@ -84,6 +84,8 @@
     "lint-staged": "^16.4.0",
     "nx": "^22.7.8",
     "prettier": "^3.9.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.65.0",
     "vite": "^8.2.0"

packages/react-bindings/package.json

@@ -37,7 +37,7 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@stream-io/typescript-config": "workspace:^",
     "@types/react": "~19.2.18",
-    "react": "19.2.3",
+    "react": "19.2.8",
     "rimraf": "^6.1.3",
     "rollup": "^4.62.4",
     "typescript": "^6.0.3"

packages/react-native-sdk/expo-config-plugin/jest.config.js

@@ -1 +1,23 @@
-module.exports = require('expo-module-scripts/jest-preset-plugin');
+/** @typedef {import('jest').Config} */
+const config = {
+  rootDir: __dirname,
+  testEnvironment: 'node',
+  testRegex: '/__tests__/.*(test|spec)\\.[jt]sx?$',
+  // the plugin is plain node TypeScript, so it only needs type stripping plus
+  // the commonjs module transform that jest expects
+  transform: {
+    '^.+\\.[jt]sx?$': [
+      'babel-jest',
+      {
+        babelrc: false,
+        configFile: false,
+        presets: [
+          ['@babel/preset-env', { targets: { node: 'current' } }],
+          '@babel/preset-typescript',
+        ],
+      },
+    ],
+  },
+};
+
+module.exports = config;

packages/react-native-sdk/jest.config.js

@@ -1,17 +1,26 @@
 /** @typedef {import('jest').Config} */
 const config = {
-  preset: 'react-native',
+  // referenced directly rather than via the deprecated 'react-native' preset
+  // shim, which only resolves while react-native is hoisted to the root
+  preset: '@react-native/jest-preset',
   setupFilesAfterEnv: [
     '<rootDir>/jest-setup.ts',
-    // this package is hoisted to the root node_modules
-    '<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js',
+    require.resolve('react-native-gesture-handler/jestSetup'),
   ],
   testPathIgnorePatterns: [
     '<rootDir>/__tests__/mocks/',
     '<rootDir>/__tests__/utils/',
     '<rootDir>/expo-config-plugin/__tests__',
   ],
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  // the workspace-linked bindings resolve react from the repo root, which the
+  // web side pins to a newer version; force everything onto this package's copy
+  // so the tests do not load two react instances
+  moduleNameMapper: {
+    '^react$': require.resolve('react'),
+    '^react/jsx-runtime$': require.resolve('react/jsx-runtime'),
+    '^react/jsx-dev-runtime$': require.resolve('react/jsx-dev-runtime'),
+  },
   transformIgnorePatterns: [
     // added as per the README in https://github.com/invertase/notifee/tree/main/packages/react-native
     'node_modules/(?!(jest-)?react-native|@react-native|@notifee)',

packages/react-native-sdk/package.json

@@ -106,13 +106,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@expo/config-plugins": "^57.0.6",
     "@expo/config-types": "^57.0.2",
     "@expo/plist": "^0.7.0",
     "@react-native-community/netinfo": "12.0.1",
     "@react-native-firebase/app": "^24.1.1",
     "@react-native-firebase/messaging": "^24.1.1",
     "@react-native/babel-preset": "0.86.2",
+    "@react-native/jest-preset": "0.86.2",
     "@react-native/metro-config": "0.86.2",
     "@stream-io/noise-cancellation-react-native": "workspace:^",
     "@stream-io/react-native-callingx": "workspace:^",
@@ -127,7 +130,6 @@
     "@types/react": "~19.2.18",
     "@types/react-test-renderer": "^19.1.0",
     "expo": "~57.0.9",
-    "expo-module-scripts": "^56.0.3",
     "expo-notifications": "~57.0.8",
     "jest": "^29.7.0",
     "react": "19.2.3",

packages/react-sdk/package.json

@@ -66,8 +66,8 @@
     "@types/node": "^25.9.5",
     "@types/react": "~19.2.18",
     "@types/react-dom": "~19.2.4",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "rimraf": "^6.1.3",
     "rollup": "^4.62.4",
     "typescript": "^6.0.3"

sample-apps/react/audio-rooms/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@stream-io/video-react-sdk": "workspace:^",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-router-dom": "^6.30.4"
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "^8.3.0"
   },
   "devDependencies": {
     "@stream-io/typescript-config": "workspace:^",

sample-apps/react/audio-rooms/src/App.tsx

@@ -1,10 +1,5 @@
-import {
-  createBrowserRouter,
-  Navigate,
-  Outlet,
-  redirect,
-  RouterProvider,
-} from 'react-router-dom';
+import { createBrowserRouter, Navigate, Outlet, redirect } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 
 import { Login, Room, RoomList } from './pages';
 import { AppShell } from './components/AppShell';

sample-apps/react/audio-rooms/src/components/AppShell.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import Sidebar from './Sidebar';
 import { JoinedCallProvider, VideoClientProvider } from '../contexts';
 import { CreateRoom } from './CreateRoom/CreateRoom';

sample-apps/react/audio-rooms/src/components/CreateRoom/CreateRoomModal.tsx

@@ -1,5 +1,5 @@
 import { MouseEventHandler, useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useStreamVideoClient } from '@stream-io/video-react-sdk';
 import { CloseIcon } from '../icons';
 import { useUserContext } from '../../contexts';

sample-apps/react/audio-rooms/src/components/Room/RoomAccessControls.tsx

@@ -5,7 +5,7 @@ import {
   useCall,
   useCallStateHooks,
 } from '@stream-io/video-react-sdk';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useJoinedCall } from '../../contexts';
 import { PropsWithChildren } from 'react';
 

sample-apps/react/audio-rooms/src/components/RoomList/RoomListing.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Call,
   QueryCallsRequest,

sample-apps/react/audio-rooms/src/components/RoomList/RoomListingTabs.tsx

@@ -1,5 +1,5 @@
 import { RoomLiveState, roomStates } from '../../utils/roomLiveState';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 type RoomListingTabsProps = {
   activeLiveState: RoomLiveState;

sample-apps/react/audio-rooms/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Avatar, useStreamVideoClient } from '@stream-io/video-react-sdk';
 import { useUserContext } from '../contexts';
 import { LeaveIcon } from './icons';

sample-apps/react/audio-rooms/src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import icon from '../assets/icon.png';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { JSX } from 'react';
 import { useUserContext } from '../contexts';
 import users from '../data/users';

sample-apps/react/audio-rooms/src/pages/Room.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useParams, useSearchParams } from 'react-router';
 import {
   Call,
   StreamCall,

sample-apps/react/audio-rooms/src/pages/RoomList.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { RoomListing } from '../components/RoomList';
 import { RoomListingTabs } from '../components/RoomList/RoomListingTabs';
 import { RoomLiveState, roomStates } from '../utils/roomLiveState';

sample-apps/react/cookbook-participant-list/package.json

@@ -14,8 +14,8 @@
     "@mui/material": "^6.5.0",
     "@stream-io/video-react-sdk": "workspace:^",
     "@stream-io/video-styling": "workspace:^",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   },
   "devDependencies": {
     "@stream-io/typescript-config": "workspace:^",

sample-apps/react/egress-composite/package.json

@@ -16,8 +16,8 @@
     "@sentry/react": "^10.69.0",
     "@skooldev/skool-stream-layout": "1.0.22",
     "@stream-io/video-react-sdk": "workspace:^",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.62.1",

sample-apps/react/livestream-app/package.json

@@ -17,9 +17,9 @@
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.1.1",
     "hls.js": "^1.6.16",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-router-dom": "^6.30.4"
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "^8.3.0"
   },
   "devDependencies": {
     "@stream-io/typescript-config": "workspace:^",

sample-apps/react/livestream-app/src/Home.tsx

@@ -1,5 +1,5 @@
 import { Button, Stack, Typography } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 export const Home = () => {
   return (

sample-apps/react/livestream-app/src/LoadingState.tsx

@@ -1,6 +1,6 @@
 import { Button, Stack } from '@mui/material';
 import { LoadingIndicator } from '@stream-io/video-react-sdk';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 type ErrorPanelProps = {
   error: Error;

sample-apps/react/livestream-app/src/hooks/useInitVideoClient.ts

@@ -2,7 +2,7 @@ import { StreamVideoClient, User } from '@stream-io/video-react-sdk';
 import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { getUser } from '../utils/getUser';
 import { getURLCredentials } from '../utils/getURLCredentials';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { DEFAULT_CALL_TYPE } from '../utils/constants';
 
 const envApiKey =

sample-apps/react/livestream-app/src/hooks/useSetCall.ts

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useEffect, useState } from 'react';
 import {
   Call,

sample-apps/react/livestream-app/src/hosts/Backstage.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import {
   PaginatedGridLayout,
   StreamCall,

sample-apps/react/livestream-app/src/hosts/Hosts.tsx

@@ -1,5 +1,5 @@
 import { StreamVideo } from '@stream-io/video-react-sdk';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { useInitVideoClient } from '../hooks/useInitVideoClient';
 
 export const Hosts = () => {

sample-apps/react/livestream-app/src/hosts/SetupLivestream.tsx

@@ -1,6 +1,6 @@
 import { Button, Input, Stack, Typography } from '@mui/material';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 export const SetupLivestream = () => {
   const [callId, setCallId] = useState<string>(() =>

sample-apps/react/livestream-app/src/main.tsx

@@ -2,7 +2,8 @@ import '@stream-io/video-react-sdk/dist/css/styles.css';
 import './main.scss';
 
 import ReactDOM from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 import { StreamTheme } from '@stream-io/video-react-sdk';
 import { createTheme, ThemeProvider } from '@mui/material';
 import { SetupLivestream } from './hosts/SetupLivestream';

sample-apps/react/livestream-app/src/viewers/Viewers.tsx

@@ -1,4 +1,4 @@
-import { Link, Outlet, useParams } from 'react-router-dom';
+import { Link, Outlet, useParams } from 'react-router';
 import { useEffect, useState } from 'react';
 import {
   StreamCall,

sample-apps/react/livestream-app/src/viewers/ui/ViewerControls.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { LeaveBadge } from '../../components';
 
 import './ViewerControls.scss';

sample-apps/react/messenger-clone/package.json

@@ -19,9 +19,9 @@
     "dayjs": "^1.11.21",
     "immer": "^9.0.21",
     "nanoid": "^5.1.16",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-router-dom": "^6.30.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "^8.3.0",
     "stream-chat": "^9.50.2",
     "stream-chat-react": "^14.10.0"
   },

sample-apps/react/messenger-clone/src/App.tsx

@@ -1,9 +1,5 @@
-import {
-  createBrowserRouter,
-  Outlet,
-  redirect,
-  RouterProvider,
-} from 'react-router-dom';
+import { createBrowserRouter, Outlet, redirect } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 import { AppShell } from './components/AppShell';
 import { UserList } from './components/UserList';
 import { UserContextProvider } from './contexts/UserContext';

sample-apps/react/messenger-clone/src/components/Sidebar/LogoutButton.tsx

@@ -1,5 +1,5 @@
 import { Logout } from '@mui/icons-material';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useStreamVideoClient } from '@stream-io/video-react-sdk';
 import { useChatContext } from 'stream-chat-react';
 import { useUserContext } from '../../contexts/UserContext';

sample-apps/react/messenger-clone/src/components/UserList/UserList.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Avatar } from 'stream-chat-react';
 import { useUserContext } from '../../contexts/UserContext';
 import users from '../../../data/users.json';

sample-apps/react/react-dogfood/package.json

@@ -32,8 +32,8 @@
     "next-auth": "^4.24.15",
     "qrcode.react": "^4.2.0",
     "raw-body": "^3.0.2",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "stream-chat": "^9.50.2",
     "stream-chat-react": "^14.10.0",
     "swr": "^2.4.2",

sample-apps/react/stream-video-react-tutorial/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@stream-io/video-react-sdk": "workspace:^",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   },
   "devDependencies": {
     "@stream-io/typescript-config": "workspace:^",

sample-apps/react/zoom-clone/package.json

@@ -14,9 +14,9 @@
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.1.1",
     "nanoid": "^5.1.16",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-router-dom": "^6.30.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "^8.3.0",
     "stream-chat": "^9.50.2",
     "stream-chat-react": "^14.10.0"
   },

sample-apps/react/zoom-clone/src/Root.tsx

@@ -1,5 +1,5 @@
 import { StreamTheme } from '@stream-io/video-react-sdk';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 export const Root = () => (
   <StreamTheme

sample-apps/react/zoom-clone/src/components/CallLobby.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router';
 import { useChatContext } from 'stream-chat-react';
 import { StreamCall } from '@stream-io/video-react-sdk';