feat(example): integrate expo to example app

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-react-native": "^4.0.0",
     "html-webpack-plugin": "^5.5.3",
     "metro-react-native-babel-preset": "^0.76.7",
+    "patch-package": "^8.0.0",
     "prettier": "^2.8.8",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",
@@ -38,6 +39,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
+    "@react-native-tvos/config-tv": "^0.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.19.6"
@@ -53,6 +55,7 @@
     "test:types": "yarn workspaces foreach run test:types",
     "test:lint": "eslint . --ext .js,.jsx,.ts,.tsx --report-unused-disable-directives --max-warnings 0 --cache --cache-strategy content --cache-location .cache/eslint.json",
     "test": "yarn test:lint && yarn test:types && yarn test:core",
-    "build:core": "yarn workspace react-tv-space-navigation build"
+    "build:core": "yarn workspace react-tv-space-navigation build",
+    "postinstall": "patch-package"
   }
 }

packages/example/.gitignore

@@ -1,63 +1,38 @@
-# OSX
-#
-.DS_Store
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-ios/.xcode.env.local
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-*.hprof
-.cxx/
-*.keystore
-!debug.keystore
-
-# node.js
-#
+# dependencies
 node_modules/
-npm-debug.log
-yarn-error.log
 
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
+# Expo
+.expo/
+dist/
+web-build/
 
-**/fastlane/report.xml
-**/fastlane/Preview.html
-**/fastlane/screenshots
-**/fastlane/test_output
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
 
-# Bundle artifact
-*.jsbundle
+# Metro
+.metro-health-check*
 
-# Ruby / CocoaPods
-/ios/Pods/
-/vendor/bundle/
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
-# Temporary files created by Metro to check the health of the file watcher
-.metro-health-check*
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+android
+ios

packages/example/App.tsx

@@ -11,6 +11,7 @@ import { ProgramGridPage } from './src/pages/ProgramGridPage';
 import { Menu } from './src/components/Menu/Menu';
 import { MenuProvider } from './src/components/Menu/MenuContext';
 import styled from '@emotion/native';
+import { useFonts } from './src/hooks/useFonts';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -22,6 +23,11 @@ export type RootStackParamList = {
 
 function App(): JSX.Element {
   const { height, width } = useWindowDimensions();
+  const areFontsLoaded = useFonts();
+
+  if (!areFontsLoaded) {
+    return null;
+  }
 
   return (
     <NavigationContainer>

packages/example/README.md

@@ -9,45 +9,63 @@ Hoppix is a project that aims to provide an example TVOS application built using
 To install the project, follow these steps:
 
 1. Install the required dependencies:
+
    ```
    yarn install
    ```
 
-2. Install pods to run the AppleTV TVOS Application:
+2. Prebuild the app with expo before running:
    ```
-   bundle exec pod install
+   yarn prebuild
    ```
 
 ## Usage
 
 ### Running the TVOS Application on Apple TV or Android TV
 
 You can run this demo application on AppleTV or AndroidTV
-To start the TVOS application, use one of the following commands:
+To start the TV application, use one of the following commands:
 
 ```
 yarn start
-yarn ios 
+yarn ios
 yarn android
 ```
 
-This will initiate the TVOS application using React Native's Metro bundler. 
+This will initiate the TV application using React Native's Metro bundler.
 
 Make sure you have set up the necessary emulator/device configurations on XCode or Android Studio to run the project on AppleTV or Android TV.
 
+### tvOS troubleshooting
+
+If you get the error
+
+```
+CommandError: Failed to build iOS project. "xcodebuild" exited with error code 65.
+To view more error logs, try building the app with Xcode directly, by opening /Users/thomasrenaud/Desktop/SpaceNavigation/react-tv-space-navigation/packages/example/ios/hoppixTv.xcworkspace.
+
+Command line invocation:
+    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace /Users/thomasrenaud/Desktop/SpaceNavigation/react-tv-space-navigation/packages/example/ios/hoppixTv.xcworkspace -configuration Debug -scheme hoppixTv -destination id=B14D0E77-99C4-486F-8096-6584A23C9476
+
+User defaults from command line:
+    IDEPackageSupportUseBuiltinSCM = YES
+```
+
+please delete the .xcode.env.local in your ios directory, and run the `yarn ios` command again.
+
 ### Running the Web Application
 
 Hoppix also supports running as a web application. To run the web version of the project, use the following command:
 
 ```
-yarn run start:web
+yarn web
 ```
 
 This will start a development server using Webpack and serve the application in your default web browser.
 
-## Handling Remote Control 
+## Handling Remote Control
 
-In order to use Spatial Navigation in the Web Application or TVOS Application, you must configure the remoteControlManager to map your keyboard or remote keys to LRUD Directions.
+In order to use Spatial Navigation in the Web Application or TV Application, you must configure the remoteControlManager to map your keyboard or remote keys to LRUD Directions.
 
 See [Remote Control](./src/components/remote-control/) for how to manage Platform Specific remote controls.