Feature(expo): support expo 54

docs/tutorial.md

@@ -53,8 +53,7 @@ We also define `SupportedKeys` as an output value for all platforms, and we map
 We decline this interface on multiple platforms.
 
 - web: quite straightforward
-- android: we install `react-native-keyevent` (check out the install docs). Rest is straightforward.
-- ios: we use the `react-native-tvos` API to remap the iOS keys. We do not handle the gestures yet.
+- android / ios: we use the `react-native-tvos` API to remap the iOS keys. We do not handle the gestures yet.
 
 You can improve this to handle gestures on tvOS.
 We are considering long presses as well, but this will need an additional `onLongSelect` props on `SpatialNavigationNode`.

package.json

@@ -3,6 +3,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "engines": {
+    "node": ">=20"
+  },
   "private": true,
   "packageManager": "yarn@3.5.1",
   "devDependencies": {
@@ -12,8 +15,8 @@
     "@babel/preset-typescript": "^7.22.5",
     "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/react-native": "^13.2.0",
-    "@types/react": "~19.0.0",
-    "@types/react-dom": "~19.0.0",
+    "@types/react": "~19.1.0",
+    "@types/react-dom": "~19.1.0",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@typescript-eslint/typescript-estree": "^5.61.0",
@@ -32,7 +35,7 @@
     "metro-react-native-babel-preset": "^0.76.7",
     "patch-package": "^8.0.0",
     "prettier": "^2.8.8",
-    "react-test-renderer": "19.0.0",
+    "react-test-renderer": "19.1.0",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",
     "typescript": "~5.8.3",
@@ -41,10 +44,9 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "@react-native-tvos/config-tv": "^0.0.4",
     "@react-navigation/bottom-tabs": "^6.5.11",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native-modal": "^13.0.1",
     "react-native-web": "^0.20.0"
   },

packages/example/app.json

@@ -30,7 +30,6 @@
       "baseUrl": "/react-tv-space-navigation"
     },
     "plugins": [
-      "@bam.tech/react-native-keyevent-expo-config-plugin",
       [
         "@react-native-tvos/config-tv",
         {

packages/example/package.json

@@ -12,28 +12,27 @@
     "prebuild": "EXPO_TV=1 expo prebuild --clean"
   },
   "dependencies": {
-    "@bam.tech/react-native-keyevent-expo-config-plugin": "^1.0.52",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.11.3",
-    "@expo/metro-runtime": "~5.0.4",
+    "@expo/metro-runtime": "~6.1.2",
+    "@react-native-tvos/config-tv": "^0.1.4",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@types/jest": "^29.5.12",
     "@types/react-test-renderer": "^18.0.7",
     "babel-jest": "^29.7.0",
-    "expo": "~53.0.9",
-    "expo-status-bar": "~2.2.3",
+    "expo": "^54.0.0",
+    "expo-status-bar": "~3.0.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "lucide-react-native": "^0.335.0",
-    "react": "19.0.0",
-    "react-native": "npm:react-native-tvos@0.79.1-1",
-    "react-native-keyevent": "^0.3.2",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.10.0",
-    "react-native-svg": "15.11.2",
-    "typescript": "~5.8.3"
+    "react": "19.1.0",
+    "react-native": "npm:react-native-tvos@0.81.4-0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
+    "typescript": "~5.9.2"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

packages/example/src/components/GoBackConfiguration.tsx

@@ -3,12 +3,19 @@ import { SupportedKeys } from './remote-control/SupportedKeys';
 import { useKey } from '../hooks/useKey';
 import { useCallback, useEffect } from 'react';
 import { BackHandler } from 'react-native';
+import RemoteControlManager from './remote-control/RemoteControlManager';
 
 export const GoBackConfiguration = () => {
   const navigation = useNavigation();
 
   useEffect(() => {
+    /**
+     * 1) Catch native back button presses
+     * 2) Emit a custom 'Back' key event to be handled by useKey
+     * 3) Prevent default back button behavior
+     */
     const event = BackHandler.addEventListener('hardwareBackPress', () => {
+      RemoteControlManager.emitKeyDown(SupportedKeys.Back);
       return true;
     });
 

packages/example/src/components/remote-control/RemoteControlManager.ios.ts → packages/example/src/components/remote-control/RemoteControlManager.native.ts

@@ -2,10 +2,21 @@ import { SupportedKeys } from './SupportedKeys';
 import { HWEvent, TVEventHandler } from 'react-native';
 import { RemoteControlManagerInterface } from './RemoteControlManager.interface';
 import CustomEventEmitter from './CustomEventEmitter';
+import { BackHandler } from 'react-native';
 
 class RemoteControlManager implements RemoteControlManagerInterface {
   constructor() {
     TVEventHandler.addListener(this.handleKeyDown);
+    /**
+     * TVEventHandler does not catch native back button presses on Native side
+     * 1) Catch native back button presses
+     * 2) Emit a custom 'Back' key event to be handled by useKey
+     * 3) Prevent default back button behavior
+     */
+    BackHandler.addEventListener('hardwareBackPress', () => {
+      this.emitKeyDown(SupportedKeys.Back);
+      return true;
+    });
   }
 
   private eventEmitter = new CustomEventEmitter<{ keyDown: SupportedKeys }>();
@@ -20,6 +31,7 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       down: SupportedKeys.Down,
       select: SupportedKeys.Enter,
       longSelect: SupportedKeys.LongEnter,
+      back: SupportedKeys.Back,
     }[evt.eventType];
 
     if (!mappedKey) {