feat(deps): Upgrade to Expo 54, React 19, RN 0.81, React Navigation 7

apps/expo-multi-tv/package.json

@@ -20,59 +20,56 @@
   },
   "dependencies": {
     "@bam.tech/react-native-keyevent-expo-config-plugin": "^1.0.50",
-    "@expo/metro-runtime": "~3.2.3",
+    "@expo/metro-runtime": "~4.0.0",
     "@expo/vector-icons": "^14.0.0",
     "@multi-tv/shared-ui": "workspace:*",
-    "@react-navigation/drawer": "^6.6.15",
-    "@react-navigation/native": "^6.0.2",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/drawer": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^8.12.2",
-    "expo": "~51.0.13",
-    "expo-build-properties": "~0.12.3",
-    "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-font": "~12.0.7",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.6",
-    "expo-web-browser": "~13.0.3",
+    "expo": "~54.0.0",
+    "expo-build-properties": "~0.13.0",
+    "expo-constants": "~17.0.0",
+    "expo-font": "~13.0.0",
+    "expo-linear-gradient": "~14.0.0",
+    "expo-linking": "~7.0.0",
+    "expo-splash-screen": "~0.29.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.0",
+    "expo-web-browser": "~14.0.0",
     "lint-staged": "^15.2.10",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "npm:react-native-tvos@~0.74.2-0",
-    "react-native-gesture-handler": "~2.16.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "npm:react-native-tvos@~0.81.0-0",
+    "react-native-gesture-handler": "^2.31.2",
     "react-native-keyevent": "^0.3.2",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "3.19.5",
+    "react-native-safe-area-context": "~5.4.0",
+    "react-native-screens": "^4.24.0",
     "react-native-video": "^6.8.0",
     "react-native-web": "~0.19.10",
-    "react-tv-space-navigation": "^3.6.1"
+    "react-tv-space-navigation": "6.0.0-beta1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@react-native-tvos/config-tv": "^0.0.10",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.45",
-    "@types/react-test-renderer": "^18.0.7",
+    "@types/react": "~19.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^9.13.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-native": "^4.1.0",
     "husky": "^9.1.6",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.1",
+    "jest-expo": "~54.0.0",
     "patch-package": "^8.0.1",
     "prettier": "^3.3.3",
     "react-native-pixel-perfect": "^1.0.2",
-    "react-test-renderer": "18.2.0",
-    "typescript": "~5.3.3"
+    "typescript": "~5.7.0"
   },
   "lint-staged": {
     "*.js": [

packages/shared-ui/package.json

@@ -16,7 +16,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@types/react": "~18.2.45",
-    "typescript": "~5.3.3"
+    "@types/react": "~19.1.0",
+    "typescript": "~5.7.0"
   }
 }

packages/shared-ui/src/components/CustomDrawerContent.tsx

@@ -1,15 +1,15 @@
 import { scaledPixels } from '../hooks/useScale';
-import { DrawerContentScrollView } from '@react-navigation/drawer';
+import { DrawerContentComponentProps, DrawerContentScrollView } from '@react-navigation/drawer';
 import { View, StyleSheet, Image, Platform, Text } from 'react-native';
 import { DefaultFocus, SpatialNavigationFocusableView, SpatialNavigationRoot } from 'react-tv-space-navigation';
-import { useNavigation } from '@react-navigation/native';
-import { DrawerNavigationProp } from '@react-navigation/drawer';
 import { DrawerParamList } from '../navigation/types';
 import { useMenuContext } from '../components/MenuContext';
 import { safeZones, colors } from '../theme';
+import { useCallback } from 'react';
+import { Direction } from '@bam.tech/lrud';
 
-export default function CustomDrawerContent(props: any) {
-  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
+export default function CustomDrawerContent(props: DrawerContentComponentProps) {
+  const navigation = props.navigation;
   const { isOpen: isMenuOpen, toggleMenu } = useMenuContext();
   const styles = drawerStyles;
   const drawerItems = [
@@ -18,8 +18,18 @@ export default function CustomDrawerContent(props: any) {
     { name: 'TV', label: 'TV' },
   ] as const;
 
+  const onDirectionHandledWithoutMovement = useCallback(
+    (movement: Direction) => {
+      if (movement === 'right') {
+        navigation.closeDrawer();
+        toggleMenu(false);
+      }
+    },
+    [navigation, toggleMenu],
+  );
+
   return (
-    <SpatialNavigationRoot isActive={isMenuOpen}>
+    <SpatialNavigationRoot isActive={isMenuOpen} onDirectionHandledWithoutMovement={onDirectionHandledWithoutMovement}>
       <View style={styles.drawerContainer}>
         {/* Gradient-like scrim overlay */}
         <View style={styles.scrimOverlay} />
@@ -41,8 +51,9 @@ export default function CustomDrawerContent(props: any) {
               <DefaultFocus key={index}>
                 <SpatialNavigationFocusableView
                   onSelect={() => {
+                    navigation.jumpTo(item.name as keyof DrawerParamList);
+                    navigation.closeDrawer();
                     toggleMenu(false);
-                    navigation.navigate(item.name as keyof DrawerParamList);
                   }}
                 >
                   {({ isFocused }) => (
@@ -56,8 +67,9 @@ export default function CustomDrawerContent(props: any) {
               <SpatialNavigationFocusableView
                 key={index}
                 onSelect={() => {
+                  navigation.jumpTo(item.name as keyof DrawerParamList);
+                  navigation.closeDrawer();
                   toggleMenu(false);
-                  navigation.navigate(item.name as keyof DrawerParamList);
                 }}
               >
                 {({ isFocused }) => (
@@ -74,8 +86,9 @@ export default function CustomDrawerContent(props: any) {
         <View style={styles.footer}>
           <SpatialNavigationFocusableView
             onSelect={() => {
+              navigation.jumpTo('Settings');
+              navigation.closeDrawer();
               toggleMenu(false);
-              navigation.navigate('Settings');
             }}
           >
             {({ isFocused }) => (

packages/shared-ui/src/navigation/DrawerNavigator.tsx

@@ -1,10 +1,8 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { StyleSheet, View, Platform } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { useNavigation, DrawerActions } from '@react-navigation/native';
-import { SpatialNavigationRoot } from 'react-tv-space-navigation';
-import { Direction } from '@bam.tech/lrud';
+import { useNavigation, DrawerActions, NavigationProp } from '@react-navigation/native';
 import { useMenuContext } from '../components/MenuContext';
 import CustomDrawerContent from '../components/CustomDrawerContent';
 import { scaledPixels } from '../hooks/useScale';
@@ -18,10 +16,15 @@ import SettingsScreen from '../screens/SettingsScreen';
 
 const Drawer = createDrawerNavigator<DrawerParamList>();
 
-function DrawerSyncWrapper() {
+function DrawerSyncWrapper({ drawerNavRef }: { drawerNavRef: React.MutableRefObject<any> }) {
   const { isOpen: isMenuOpen } = useMenuContext();
   const navigation = useNavigation();
 
+  // Capture the drawer navigation object (useNavigation inside a Drawer.Screen gets the Drawer navigator)
+  useEffect(() => {
+    drawerNavRef.current = navigation;
+  }, [navigation, drawerNavRef]);
+
   // Open drawer on mount if menu context says it should be open
   useEffect(() => {
     if (isMenuOpen) {
@@ -34,24 +37,10 @@ function DrawerSyncWrapper() {
 
 export default function DrawerNavigator() {
   const styles = drawerStyles;
-  const { isOpen: isMenuOpen, toggleMenu } = useMenuContext();
-  const navigation = useNavigation();
-
-  const onDirectionHandledWithoutMovement = useCallback(
-    (movement: Direction) => {
-      if (movement === 'right') {
-        navigation.dispatch(DrawerActions.closeDrawer());
-        toggleMenu(false);
-      }
-    },
-    [toggleMenu, navigation],
-  );
+  const { isOpen: isMenuOpen } = useMenuContext();
+  const drawerNavRef = useRef<NavigationProp<DrawerParamList> | null>(null);
 
   const navigationContent = (
-    <SpatialNavigationRoot
-      isActive={isMenuOpen}
-      onDirectionHandledWithoutMovement={onDirectionHandledWithoutMovement}
-    >
       <Drawer.Navigator
         drawerContent={CustomDrawerContent}
         initialRouteName="Home"
@@ -67,17 +56,19 @@ export default function DrawerNavigator() {
           // Disable swipe gestures since we use remote control navigation
           drawerType: 'front',
           swipeEnabled: false,
-          // Disable animations to avoid Reanimated worklet issues on TV
-          animationEnabled: false,
         }}
       >
         <Drawer.Screen
           name="Home"
-          component={HomeScreen}
-          options={{
-            drawerLabel: 'Home',
-          }}
-        />
+          options={{ drawerLabel: 'Home' }}
+        >
+          {() => (
+            <>
+              <DrawerSyncWrapper drawerNavRef={drawerNavRef} />
+              <HomeScreen />
+            </>
+          )}
+        </Drawer.Screen>
         <Drawer.Screen
           name="Explore"
           component={ExploreScreen}
@@ -100,8 +91,6 @@ export default function DrawerNavigator() {
           }}
         />
       </Drawer.Navigator>
-      <DrawerSyncWrapper />
-    </SpatialNavigationRoot>
   );
 
   // On TV platforms, don't use GestureHandlerRootView as we use remote control navigation

packages/shared-ui/src/screens/HomeScreen.tsx

@@ -166,8 +166,6 @@ export default function HomeScreen() {
                 orientation="horizontal"
                 renderItem={renderItem}
                 itemSize={scaledPixels(440)}
-                numberOfRenderedItems={6}
-                numberOfItemsVisibleOnScreen={4}
                 onEndReachedThresholdItemsNumber={3}
               />
             </DefaultFocus>