diff --git a/apps/external-display-example/.gitignore b/apps/external-display-example/.gitignore new file mode 100644 index 00000000..3062b237 --- /dev/null +++ b/apps/external-display-example/.gitignore @@ -0,0 +1,23 @@ +node_modules/ +.expo/ +dist/ +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ + +ios/ +android/ + +# macOS +.DS_Store + +# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb +# The following patterns were generated by expo-cli + +expo-env.d.ts +# @end expo-cli \ No newline at end of file diff --git a/apps/external-display-example/README.md b/apps/external-display-example/README.md new file mode 100644 index 00000000..cd4feb8a --- /dev/null +++ b/apps/external-display-example/README.md @@ -0,0 +1,50 @@ +# Welcome to your Expo app 👋 + +This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app). + +## Get started + +1. Install dependencies + + ```bash + npm install + ``` + +2. Start the app + + ```bash + npx expo start + ``` + +In the output, you'll find options to open the app in a + +- [development build](https://docs.expo.dev/develop/development-builds/introduction/) +- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/) +- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/) +- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo + +You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction). + +## Get a fresh project + +When you're ready, run: + +```bash +npm run reset-project +``` + +This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing. + +## Learn more + +To learn more about developing your project with Expo, look at the following resources: + +- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides). +- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web. + +## Join the community + +Join our community of developers creating universal apps. + +- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute. +- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions. diff --git a/apps/external-display-example/app.json b/apps/external-display-example/app.json new file mode 100644 index 00000000..2fae5b9a --- /dev/null +++ b/apps/external-display-example/app.json @@ -0,0 +1,28 @@ +{ + "expo": { + "name": "external-display-example", + "slug": "external-display-example", + "entryPoint": "./src/App.tsx", + "version": "1.0.0", + "orientation": "portrait", + "scheme": "externaldisplay", + "userInterfaceStyle": "automatic", + "splash": { + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "ios": { + "supportsTablet": true, + "bundleIdentifier": "com.externaldisplay" + }, + "android": { + "package": "com.externaldisplay", + "adaptiveIcon": { + "backgroundColor": "#ffffff" + } + }, + "experiments": { + "typedRoutes": true + } + } +} diff --git a/apps/external-display-example/babel.config.js b/apps/external-display-example/babel.config.js new file mode 100644 index 00000000..9d89e131 --- /dev/null +++ b/apps/external-display-example/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + }; +}; diff --git a/apps/external-display-example/index.tsx b/apps/external-display-example/index.tsx new file mode 100644 index 00000000..50958193 --- /dev/null +++ b/apps/external-display-example/index.tsx @@ -0,0 +1,9 @@ +/** + * @format + */ + +import { registerRootComponent } from 'expo' + +import App from './src/App' + +export default registerRootComponent(App) diff --git a/apps/external-display-example/package.json b/apps/external-display-example/package.json new file mode 100644 index 00000000..03669452 --- /dev/null +++ b/apps/external-display-example/package.json @@ -0,0 +1,25 @@ +{ + "name": "external-display-example", + "version": "1.0.0", + "scripts": { + "start": "expo start", + "android": "expo run:android", + "ios": "expo run:ios" + }, + "main": "./index.tsx", + "dependencies": { + "expo": "~51.0.28", + "expo-system-ui": "~3.0.7", + "react": "18.2.0", + "react-native": "0.74.5", + "react-native-external-display": "0.6.6", + "react-native-gesture-handler": "^2.20.0", + "react-native-webview": "^13.12.3" + }, + "devDependencies": { + "@babel/core": "^7.20.0", + "@types/react": "~18.2.45", + "typescript": "~5.3.3" + }, + "private": true +} diff --git a/packages/RNExternalDisplayExample/src/App.js b/apps/external-display-example/src/App.tsx similarity index 64% rename from packages/RNExternalDisplayExample/src/App.js rename to apps/external-display-example/src/App.tsx index ce085a25..ee1afb2e 100644 --- a/packages/RNExternalDisplayExample/src/App.js +++ b/apps/external-display-example/src/App.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react' + import { View, Button } from 'react-native' import { SceneManager } from 'react-native-external-display' @@ -16,26 +17,32 @@ const exampleMap = { ScreenSize, ScrollView, WebView, -} -if (SceneManager.isAvailable()) { - exampleMap.IPadMultipleScenes = IPadMultipleScenes - exampleMap.Touch = Touch + ...(SceneManager.isAvailable() + ? { + IPadMultipleScenes, + Touch, + } + : {}), } function App() { - const [page, setPage] = useState(null) + const [page, setPage] = useState(null) - const Example = exampleMap[page] + if (page) { + const Component = exampleMap[page] - if (Example) { - return setPage(null)} /> + if (Component) { + return setPage(null)} /> + } } + const keys = Object.keys(exampleMap) as Array + return ( - {Object.keys(exampleMap).map((key) => ( + {keys.map((key) => (