chore(example): update to expo 51

* chore(example): update to expo sdk 51

* chore(example): fix typescript issue

* chore(example): fix jest config bug on lib

* chore(example): fix jest config bug on example

* chore(example): better transformIgnorePatterns on jest.config.js

* chore(example): find real cause of tests bug: add react-native-tvos to jest transformIgnorePatterns

* chore(example): adapt tveventhanler usage to react native tvos 0.74

Author: vicprz

package.json

@@ -12,8 +12,8 @@
     "@babel/preset-typescript": "^7.22.5",
     "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/react-native": "^12.4.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@typescript-eslint/typescript-estree": "^5.61.0",
@@ -34,16 +34,16 @@
     "prettier": "^2.8.8",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
+    "typescript": "~5.3.3",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@react-native-tvos/config-tv": "^0.0.4",
     "@react-navigation/bottom-tabs": "^6.5.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native-modal": "^13.0.1",
     "react-native-web": "^0.19.6"
   },

packages/example/jest.config.js

@@ -16,6 +16,7 @@ const packagesToTransform = [
   'react-native-(.*)',
   '@react-native',
   '@react-native-community',
+  '@react-native-tvos',
   '@react-navigation',
 ];
 

packages/example/package.json

@@ -11,31 +11,31 @@
     "prebuild": "EXPO_TV=1 expo prebuild --clean"
   },
   "dependencies": {
-    "@bam.tech/react-native-keyevent-expo-config-plugin": "^1.0.50",
+    "@bam.tech/react-native-keyevent-expo-config-plugin": "^1.0.52",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.11.3",
-    "@expo/metro-runtime": "~3.1.1",
+    "@expo/metro-runtime": "~3.2.1",
     "@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": "~50.0.3",
-    "expo-status-bar": "~1.11.1",
+    "expo": "~51.0.9",
+    "expo-status-bar": "~1.12.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "lucide-react-native": "^0.335.0",
     "react": "18.2.0",
-    "react-native": "npm:react-native-tvos@0.73.2-0",
+    "react-native": "npm:react-native-tvos@0.74.1-0",
     "react-native-keyevent": "^0.3.2",
-    "react-native-safe-area-context": "^4.8.2",
-    "react-native-screens": "^3.29.0",
-    "react-native-svg": "^14.1.0",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true,

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

@@ -5,13 +5,12 @@ import { RemoteControlManagerInterface } from './RemoteControlManager.interface'
 
 class RemoteControlManager implements RemoteControlManagerInterface {
   constructor() {
-    const _tvEventHandler = new TVEventHandler();
-    _tvEventHandler.enable(undefined, this.handleKeyDown);
+    TVEventHandler.addListener(this.handleKeyDown);
   }
 
   private eventEmitter = mitt<{ keyDown: SupportedKeys }>();
 
-  private handleKeyDown = (_: unknown, evt: HWEvent) => {
+  private handleKeyDown = (evt: HWEvent) => {
     if (!evt) return;
 
     const mappedKey = {

packages/lib/jest.config.js

@@ -16,6 +16,7 @@ const packagesToTransform = [
   'react-native-(.*)',
   '@react-native',
   '@react-native-community',
+  '@react-native-tvos',
   '@react-navigation',
 ];
 

packages/lib/src/spatial-navigation/context/DeviceContext.tsx

@@ -17,8 +17,8 @@ interface DeviceContextProps {
   /** Use `deviceTypeRef` for user events or if you don't need render, otherwise use `deviceType` */
   deviceTypeRef: React.MutableRefObject<Device>;
   setDeviceType: (deviceType: Device) => void;
-  getScrollingIntervalId: () => NodeJS.Timer | null;
-  setScrollingIntervalId: (scrollingId: NodeJS.Timer | null) => void;
+  getScrollingIntervalId: () => NodeJS.Timeout | null;
+  setScrollingIntervalId: (scrollingId: NodeJS.Timeout | null) => void;
 }
 
 export const DeviceContext = createContext<DeviceContextProps>({
@@ -37,14 +37,14 @@ export const SpatialNavigationDeviceTypeProvider = ({ children }: DeviceProvider
   const [deviceType, setDeviceTypeWithoutRef] = useState<Device>('remoteKeys');
 
   const deviceTypeRef = useRef<Device>(deviceType);
-  const scrollingId = useRef<NodeJS.Timer | null>(null);
+  const scrollingId = useRef<NodeJS.Timeout | null>(null);
 
   const setDeviceType = useCallback((deviceType: Device) => {
     deviceTypeRef.current = deviceType;
     setDeviceTypeWithoutRef(deviceType);
   }, []);
 
-  const setScrollingIntervalId = useCallback((id: NodeJS.Timer | null) => {
+  const setScrollingIntervalId = useCallback((id: NodeJS.Timeout | null) => {
     if (scrollingId.current) {
       clearInterval(scrollingId.current);
     }