chore(demo): Expo 57 and Expo development build

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 jobs:
   test:
     docker:
-      - image: cimg/python:3.12.1-node
+      - image: cimg/python:3.12.11-node
     steps:
       - checkout
       - run:
@@ -45,7 +45,7 @@ jobs:
           command: yarn test:validate-xml
   deploy:
     docker:
-      - image: cimg/python:3.12.1-node
+      - image: cimg/python:3.12.11-node
     steps:
       - add_ssh_keys:
           fingerprints:

.cursor/rules/demo-run.mdc

@@ -35,7 +35,7 @@ terminalWindows:
 This configuration sets up the necessary terminal windows:
 1. "Hyperview Sync" - Keeps demo app in sync with source changes
 2. "Demo Server" - Builds XML and hosts local demo server
-3. "Demo iOS" - Runs Expo demo app for iOS (preferred platform)
+3. "Demo iOS" - Compiles and runs the Hyperview demo development build (preferred platform)
 4. "Demo Android" - Alternative to iOS for Android testing
 5. For Android: Set up port forwarding (adb reverse tcp:8085 tcp:8085)
 
@@ -44,5 +44,6 @@ This configuration sets up the necessary terminal windows:
 - The sync and server processes must be running for the demo to work
 - iOS is the preferred platform for testing
 - Use Android configuration only when specifically needed. Android requires setting port forwarding (adb reverse tcp:8085 tcp:8085)
+- The demo is an Expo development build, not Expo Go. First `yarn ios` / `yarn android` compiles native code (several minutes). Uninstall Expo Go if Metro opens it instead. Physical devices: see the root README.
 - Each window will open in a new terminal window
 - Wait for the sync and server processes to fully start before the mobile app will work

README.md

@@ -85,7 +85,7 @@ From the `demo/` directory:
 yarn ios
 ```
 
-This will open the iOS simulator and install the demo app in the simulator. It will then start the Expo development server to load the demo app.
+This will compile and install the demo app in the iOS simulator (first run takes a few minutes). It will then start the Expo development server to load the demo app.
 
 #### Running on the Android emulator
 
@@ -96,31 +96,31 @@ adb reverse tcp:8085 tcp:8085
 yarn android
 ```
 
-This will open an Android Virtual Device (AVD) and install the demo app in the emulator. It will then start the Expo development server to load the demo app.
+This will compile and install the demo app in the emulator (first run takes a few minutes). It will then start the Expo development server to load the demo app.
 
 #### Running on a physical device
 
-On your physical mobile device, install the Expo client
+The demo uses a local Expo development build, not Expo Go. Plug in the device (Developer Mode on iOS, USB debugging on Android). Make sure your mobile device and development machine are connected to the same Wi-Fi network.
 
-- [iOS App Store](https://itunes.apple.com/us/app/expo-client/id982107779?mt=8)
-- [Google Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)
+From the `demo/` directory:
 
-Make sure your mobile device and development machine are connected to the same Wi-Fi network.
+```sh
+BASE_URL="http://X.X.X.X:8085" yarn ios --device
+```
 
-From the `demo/` directory:
+or
 
 ```sh
-cd demo
-BASE_URL="http://X.X.X.X:8085" yarn start
+BASE_URL="http://X.X.X.X:8085" yarn android --device
 ```
 
 > [!NOTE]
 > Replace `X.X.X.X` with the IP of your machine. This is needed in order for your physical device to be able to request the example XML files from your development machine.
 
-This command will start an Expo development server and will display a QR code.
+This compiles Hyperview onto the device (first run takes a few minutes) and starts Metro. Metro displays a QR code in the terminal.
 
-- On your iOS device, open the Camera app and point it at the QR code on your screen. The Camera app should show an "Open in Expo" notification. Tap this notification.
-- On your Android device, use the Expo app to scan the QR code on your screen.
+- On your iOS device, open the Camera app and point it at the QR code in the terminal. The Camera app should show an "Open in Hyperview" notification. Tap this notification.
+- On your Android device, open Hyperview and type `http://X.X.X.X:8081` in the development launcher. Google Camera will not open the QR code.
 
 ## Developing Hyperview Core Features
 
@@ -146,6 +146,6 @@ yarn sync ../projects/my-cool-app
 
 ## Troubleshooting
 
-> This version of the Expo app is out of date. Uninstall the app and run again to upgrade.
+If Metro opens Expo Go instead of the Hyperview demo, uninstall Expo Go from the simulator or device and run `yarn ios` or `yarn android` again.
 
-If you see this warning message on the Expo development server webpage, you need to uninstall the Expo app from the simulator or physical device and install the latest version. On a physical device, this means getting the latest version from an app store. In the simulator or AVD, this means uninstalling and re-running `yarn ios` or `yarn android`.
+Physical iOS device builds require Automatic Signing with a Personal Team in Xcode. A paid Apple Developer account is not required.

demo/.gitignore

@@ -9,6 +9,8 @@ dist/
 hyperview/
 
 # Native
+/ios
+/android
 *.orig.*
 *.jks
 *.p8

demo/app.config.ts

@@ -1,19 +1,28 @@
 export default {
   android: {
     adaptiveIcon: {
-      backgroundColor: '#ffffff',
-      foregroundImage: './assets/adaptive-icon.png',
+      backgroundColor: '#000000',
+      foregroundImage: './assets/icon.png',
     },
+    package: 'org.hyperview.demo',
+    usesCleartextTraffic: true,
   },
   assetBundlePatterns: ['**/*'],
   extra: {
-    baseUrl: process.env.BASE_URL || 'http://0.0.0.0:8085',
+    baseUrl: process.env.BASE_URL || 'http://127.0.0.1:8085',
   },
   icon: './assets/icon.png',
   ios: {
+    bundleIdentifier: 'org.hyperview.demo',
+    infoPlist: {
+      CFBundleDisplayName: 'Hyperview',
+      NSAppTransportSecurity: {
+        NSAllowsLocalNetworking: true,
+      },
+    },
     supportsTablet: true,
   },
-  name: 'demo',
+  name: 'Hyperview',
   newArchEnabled: true,
   orientation: 'portrait',
   scheme: 'hyperview',

demo/backend/_includes/macros/about/styles.xml.njk

@@ -13,4 +13,4 @@
   borderRadius="18"
   margin="24"
 />
-<style id="about-text" fontSize="20" fontWeight="700" />
+<style id="about-text" color="black" fontSize="20" fontWeight="700" />

demo/backend/_includes/macros/button/styles.xml.njk

@@ -10,5 +10,5 @@
 />
 <style id="button-disabled" backgroundColor="#bdc4c4" />
 <style id="button-label" color="white" fontSize="24" fontWeight="bold" />
-<style id="button-serialize-title" fontSize="16" marginHorizontal="24" marginTop="24" />
+<style id="button-serialize-title" color="black" fontSize="16" marginHorizontal="24" marginTop="24" />
 <style id="button-serialize-data" backgroundColor="lightgrey" marginHorizontal="24" marginTop="8" padding="16" />

demo/backend/_includes/macros/description/styles.xml.njk

@@ -1 +1 @@
-<style id="description" fontSize="16" margin="24" />
+<style id="description" color="black" fontSize="16" margin="24" />

demo/backend/_includes/macros/tabbar-top/styles.xml.njk

@@ -32,6 +32,7 @@
 </style>
 <style
   id="tabbar-top-label"
+  color="black"
   fontSize="16"
   fontWeight="500"
   lineHeight="24"

demo/backend/_includes/templates/styles.xml.njk

@@ -32,7 +32,7 @@
 />
 <style id="header-title" color="black" fontSize="24" fontWeight="600" />
 <style id="body" backgroundColor="white" flex="1" />
-<style id="description" fontSize="16" margin="24" />
+<style id="description" color="black" fontSize="16" margin="24" />
 <style
   id="item"
   alignItems="center"
@@ -56,7 +56,7 @@
   marginBottom="24"
 />
 <style id="item-left" flex="1" flexDirection="row" />
-<style id="item-label" fontSize="18" fontWeight="normal" />
+<style id="item-label" color="black" fontSize="18" fontWeight="normal" />
 <style id="item-chevron" />
 <style
   id="button"
@@ -117,7 +117,7 @@
   marginHorizontal="24"
   paddingHorizontal="16"
 />
-<style id="list-header-text" fontSize="18" fontWeight="bold"/>
+<style id="list-header-text" color="black" fontSize="18" fontWeight="bold"/>
 <style id="links-container" flexDirection="row" flexWrap="wrap" marginLeft="24" marginBottom="24" />
 <style
   id="picker-modal"

demo/backend/ui/styling/text/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/scrollview.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontWeight="normal" marginBottom="8" marginLeft="24" marginRight="24" marginTop="8"/>
+  <style id="text" color="black" fontWeight="normal" marginBottom="8" marginLeft="24" marginRight="24" marginTop="8"/>
   <style id="text-small" fontSize="8"/>
   <style id="text-medium" fontSize="32"/>
   <style id="text-large" fontSize="72"/>

demo/backend/ui/ui-elements/text/adjustable/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
 {% endblock %}
 
 {% block container %}

demo/backend/ui/ui-elements/text/basic/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
 {% endblock %}
 
 {% block container %}

demo/backend/ui/ui-elements/text/escaped/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
 {% endblock %}
 
 {% block container %}

demo/backend/ui/ui-elements/text/nested/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
   <style id="bold" fontWeight="bold"/>
   <style id="italic" fontStyle="italic"/>
   <style id="color" backgroundColor="#63CB76" color="white"/>

demo/backend/ui/ui-elements/text/number-of-lines/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
 {% endblock %}
 
 {% block container %}

demo/backend/ui/ui-elements/text/preformatted/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
 {% endblock %}
 
 {% block container %}

demo/backend/ui/ui-elements/text/selectable/index.xml.njk

@@ -7,7 +7,7 @@ hv_button_behavior: "back"
 {% extends 'templates/base.xml.njk' %}
 
 {% block styles %}
-  <style id="text" fontSize="24" margin="24"/>
+  <style id="text" color="black" fontSize="24" margin="24"/>
 {% endblock %}
 
 {% block container %}

demo/package.json

@@ -4,8 +4,8 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web",
     "deploy": "gh-pages -d hyperview",
     "format-njk": "./scripts/format-njk.sh",
@@ -18,28 +18,30 @@
     "test": "yarn test:ts && yarn test:lint && yarn test:validate-xml"
   },
   "dependencies": {
-    "@react-native-community/datetimepicker": "8.4.1",
-    "@react-native-picker/picker": "2.11.1",
+    "@react-native-community/datetimepicker": "9.1.0",
+    "@react-native-picker/picker": "2.11.4",
     "@react-navigation/bottom-tabs": "6.5.7",
     "@react-navigation/native": "6.1.6",
     "@react-navigation/stack": "6.3.16",
-    "expo": "~53.0.17",
-    "expo-constants": "~17.1.7",
-    "expo-linking": "~7.1.7",
-    "expo-status-bar": "~2.2.3",
+    "expo": "~57.0.17",
+    "expo-constants": "~57.0.15",
+    "expo-dev-client": "~57.0.16",
+    "expo-linking": "~57.0.8",
+    "expo-status-bar": "~57.0.1",
     "hyperview": "0.110.0",
     "moment": "^2.30.1",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-maps": "1.20.1",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-svg": "15.11.2",
-    "react-native-web": "^0.20.0",
-    "react-native-webview": "13.13.5"
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-maps": "1.27.2",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
+    "react-native-svg": "15.15.4",
+    "react-native-web": "^0.21.2",
+    "react-native-webview": "13.16.1",
+    "react-native-worklets": "0.10.1"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.1.2",

demo/src/Components/Map/Map.tsx

@@ -102,7 +102,7 @@ const Map = (props: HvComponentProps) => {
       showsCompass={false}
       showsIndoors={false}
       showsMyLocationButton={false}
-      showsPointsOfInterest
+      showsPointsOfInterests
       showsScale={false}
       showsTraffic={false}
       showsUserLocation={false}