structured the app

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

.expo/metro/externals/assert/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:assert');

.expo/metro/externals/async_hooks/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:async_hooks');

.expo/metro/externals/buffer/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:buffer');

.expo/metro/externals/child_process/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:child_process');

.expo/metro/externals/cluster/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:cluster');

.expo/metro/externals/console/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:console');

.expo/metro/externals/constants/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:constants');

.expo/metro/externals/crypto/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:crypto');

.expo/metro/externals/dgram/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:dgram');

.expo/metro/externals/diagnostics_channel/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:diagnostics_channel');

.expo/metro/externals/dns/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:dns');

.expo/metro/externals/domain/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:domain');

.expo/metro/externals/events/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:events');

.expo/metro/externals/fs/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:fs');

.expo/metro/externals/fs/promises/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:fs/promises');

.expo/metro/externals/http/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:http');

.expo/metro/externals/http2/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:http2');

.expo/metro/externals/https/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:https');

.expo/metro/externals/inspector/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:inspector');

.expo/metro/externals/module/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:module');

.expo/metro/externals/net/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:net');

.expo/metro/externals/os/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:os');

.expo/metro/externals/path/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:path');

.expo/metro/externals/perf_hooks/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:perf_hooks');

.expo/metro/externals/process/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:process');

.expo/metro/externals/punycode/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:punycode');

.expo/metro/externals/querystring/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:querystring');

.expo/metro/externals/readline/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:readline');

.expo/metro/externals/repl/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:repl');

.expo/metro/externals/stream/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:stream');

.expo/metro/externals/string_decoder/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:string_decoder');

.expo/metro/externals/timers/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:timers');

.expo/metro/externals/tls/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:tls');

.expo/metro/externals/trace_events/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:trace_events');

.expo/metro/externals/tty/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:tty');

.expo/metro/externals/url/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:url');

.expo/metro/externals/util/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:util');

.expo/metro/externals/v8/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:v8');

.expo/metro/externals/vm/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:vm');

.expo/metro/externals/wasi/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:wasi');

.expo/metro/externals/worker_threads/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:worker_threads');

.expo/metro/externals/zlib/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:zlib');

.expo/metro/polyfill.js

@@ -0,0 +1 @@
+global.$$require_external = typeof window === "undefined" ? require : () => null;

.expo/packager-info.json

@@ -0,0 +1,4 @@
+{
+  "expoServerPort": 19000,
+  "packagerPort": 19000
+}

.expo/settings.json

@@ -0,0 +1,10 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false,
+  "scheme": null,
+  "devClient": false
+}

App.js → App.tsx

@@ -1,5 +1,5 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
 
 export default function App() {
   return (
@@ -13,8 +13,8 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
 });

package.json

@@ -9,13 +9,16 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~50.0.11",
+    "expo": "^50.0.11",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-native": "0.73.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.3.0"
   },
   "private": true
 }

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}