Use Expo example app on Expo 51

Author: hellostu

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

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.

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
+    }
+  }
+}

apps/external-display-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

apps/external-display-example/index.tsx

@@ -0,0 +1,9 @@
+/**
+ * @format
+ */
+
+import { registerRootComponent } from 'expo'
+
+import App from './src/App'
+
+export default registerRootComponent(App)

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.7",
+    "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
+}

packages/RNExternalDisplayExample/src/App.js 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<keyof typeof exampleMap | null>(null)
 
-  const Example = exampleMap[page]
+  if (page) {
+    const Component = exampleMap[page]
 
-  if (Example) {
-    return <Example onBack={() => setPage(null)} />
+    if (Component) {
+      return <Component onBack={() => setPage(null)} />
+    }
   }
 
+  const keys = Object.keys(exampleMap) as Array<keyof typeof exampleMap>
+
   return (
     <View
       style={{ flex: 1, backgroundColor: 'black', justifyContent: 'center' }}
     >
-      {Object.keys(exampleMap).map((key) => (
+      {keys.map((key) => (
         <Button key={key} title={key} onPress={() => setPage(key)} />
       ))}
     </View>

packages/RNExternalDisplayExample/src/IPadMultipleScenes.js apps/external-display-example/src/IPadMultipleScenes.tsx

@@ -20,26 +20,20 @@ const InScreen = () => {
       }}
     >
       <Text style={{ color: 'red', fontSize: 28, textAlign: 'center' }}>
-        ID:
-        {' '}
-        {id || '(Main)'}
+        ID: {id || '(Main)'}
       </Text>
       <Text style={{ color: 'red', fontSize: 28, textAlign: 'center' }}>
-        Width: 
-        {' '}
-        {width || '(Main)'}
+        Width: {width || '(Main)'}
       </Text>
       <Text style={{ color: 'red', fontSize: 28, textAlign: 'center' }}>
-        Height: 
-        {' '}
-        {height || '(Main)'}
+        Height: {height || '(Main)'}
       </Text>
     </View>
   )
 }
 
 type Props = {
-  onBack: () => void,
+  onBack: () => void
 }
 
 export default function Example(props: Props) {
@@ -56,7 +50,7 @@ export default function Example(props: Props) {
       }}
     >
       <View style={{ flex: 1 }}>
-        {mount && (
+        {mount &&
           Object.keys(info).map((id) => (
             <ExternalDisplay
               key={id}
@@ -65,10 +59,9 @@ export default function Example(props: Props) {
             >
               <InScreen />
             </ExternalDisplay>
-          ))
-        )}
+          ))}
       </View>
-      <ScreenControl 
+      <ScreenControl
         on={on}
         mount={mount}
         onSelectScreen={() => {}}

packages/RNExternalDisplayExample/src/Modal.js apps/external-display-example/src/Modal.tsx

@@ -6,7 +6,7 @@ import ExternalDisplay, { getScreens } from 'react-native-external-display'
 import ScreenControl from './utils/ScreenControl'
 
 type Props = {
-  onBack: () => void,
+  onBack: () => void
 }
 
 export default function Example(props: Props) {
@@ -16,9 +16,9 @@ export default function Example(props: Props) {
   const [on, setOn] = useState(true)
   const [mount, setMount] = useState(true)
   const [open, setOpen] = useState(true)
-  const [screen, setScreen] = useState(null)
+  const [screen, setScreen] = useState<string | null>(null)
   useEffect(() => {
-    const interval = setInterval(() => setT(d => d + 1), 1000)
+    const interval = setInterval(() => setT((d) => d + 1), 1000)
     return () => clearInterval(interval)
   }, [])
   return (
@@ -59,10 +59,10 @@ export default function Example(props: Props) {
         )}
       </View>
       <Button
-        onPress={() => setOpen(d => !d)}
+        onPress={() => setOpen((d) => !d)}
         title={open ? 'Close' : 'Open'}
       />
-      <ScreenControl 
+      <ScreenControl
         on={on}
         mount={mount}
         onSelectScreen={setScreen}

packages/RNExternalDisplayExample/src/ScreenSize.js apps/external-display-example/src/ScreenSize.tsx

@@ -20,34 +20,28 @@ const InScreen = () => {
       }}
     >
       <Text style={{ color: 'red', fontSize: 28, textAlign: 'center' }}>
-        ID:
-        {' '}
-        {id || '(Main)'}
+        ID: {id || '(Main)'}
       </Text>
       <Text style={{ color: 'red', fontSize: 28, textAlign: 'center' }}>
-        Width: 
-        {' '}
-        {width || '(Main)'}
+        Width: {width || '(Main)'}
       </Text>
       <Text style={{ color: 'red', fontSize: 28, textAlign: 'center' }}>
-        Height: 
-        {' '}
-        {height || '(Main)'}
+        Height: {height || '(Main)'}
       </Text>
     </View>
   )
 }
 
 type Props = {
-  onBack: () => void,
+  onBack: () => void
 }
 
 export default function Example(props: Props) {
   const { onBack } = props
   const info = useExternalDisplay()
   const [on, setOn] = useState(true)
   const [mount, setMount] = useState(true)
-  const [screen, setScreen] = useState(null)
+  const [screen, setScreen] = useState<string | null>(null)
   return (
     <SafeAreaView
       style={{
@@ -66,7 +60,7 @@ export default function Example(props: Props) {
           </ExternalDisplay>
         )}
       </View>
-      <ScreenControl 
+      <ScreenControl
         on={on}
         mount={mount}
         onSelectScreen={setScreen}