chore: Update demo to Expo SDK 52 (#1072)

Migrate update instructions into a script, and run it.

~~Testing still in progress, there are new regressions around
navigation, date picker and more that will need to be investigated.~~
Testing complete, issues found were solved.

https://app.asana.com/0/1204008699308084/1209103436957309/f

---------

Co-authored-by: flochtililoch <flochtililoch@gmail.com>

demo/README.md

@@ -4,25 +4,4 @@ This directory contains the code to run an expo app that will showcase the vario
 
 ## Updating dependencies
 
-The following commands should in theory suffice to recreate the demo app without having to manually manipulate any files.
-However, it's possible that some of these commands will need to be tweaked. If that's the case, make sure to update this file once the command has been adjusted!
-
-> Hyperview currently supports `node` versions up to 22. If you are using a newer version of `node`, please downgrade to version 22 before proceeding.
-
-```sh
-mv demo/ demo-old
-npx --yes create-expo-app demo --template expo-template-blank-typescript
-cd demo/
-npx expo install @react-native-community/datetimepicker @react-native-picker/picker react-native-gesture-handler react-native-safe-area-context react-native-screens react-native-web react-native-webview
-yarn add @babel/preset-env @react-navigation/bottom-tabs @react-navigation/native @react-navigation/stack @types/react moment react-dom typescript hyperview
-yarn add @expo/webpack-config -D
-cd ..
-mv demo-old/src demo
-mv demo-old/App.tsx demo
-mv demo-old/assets/* demo/assets
-mv demo-old/webpack.config.js demo
-mv demo-old/tsconfig.json demo
-mv demo-old/README.md demo
-rm -rf demo-old
-rm demo/package-lock.json
-```
+Run the script `./scripts/update-demo.sh` from the root of the repository.

demo/app.config.ts

@@ -15,6 +15,7 @@ export default {
     supportsTablet: true,
   },
   name: 'demo',
+  newArchEnabled: true,
   orientation: 'portrait',
   scheme: 'hyperview',
   slug: 'demo',

demo/index.ts

@@ -0,0 +1,7 @@
+import App from './App';
+import { registerRootComponent } from 'expo';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

demo/package.json

@@ -2,7 +2,6 @@
   "name": "demo",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
-  "homepage": ".",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -19,61 +18,56 @@
     "test": "yarn test:ts && yarn test:lint && yarn test:validate-xml"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.22.20",
     "@googlemaps/js-api-loader": "^1.16.8",
-    "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-picker/picker": "2.4.10",
-    "@react-navigation/bottom-tabs": "^6.5.9",
-    "@react-navigation/native": "^6.1.8",
-    "@react-navigation/stack": "^6.3.18",
-    "@tsconfig/react-native": "^3.0.5",
-    "@types/moment": "^2.13.0",
-    "expo": "~49.0.13",
-    "expo-constants": "~14.4.2",
-    "expo-linking": "~5.0.2",
-    "expo-status-bar": "~1.6.0",
-    "hyperview": "0.91.0",
-    "moment": "^2.29.4",
-    "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-picker/picker": "2.9.0",
+    "@react-navigation/bottom-tabs": "6.5.7",
+    "@react-navigation/native": "6.1.6",
+    "@react-navigation/stack": "6.3.16",
+    "expo": "~52.0.37",
+    "expo-constants": "~17.0.7",
+    "expo-linking": "~7.0.5",
+    "expo-status-bar": "~2.0.1",
+    "hyperview": "^0.91.0",
+    "moment": "^2.30.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-google-maps": "^9.4.5",
-    "react-native": "0.72.10",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-maps": "1.7.1",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-svg": "13.9.0",
-    "react-native-web": "~0.19.6",
+    "react-native": "0.76.7",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-maps": "1.18.0",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.8.0",
+    "react-native-web": "~0.19.13",
     "react-native-web-maps": "^0.3.0",
-    "react-native-webview": "13.2.2"
+    "react-native-webview": "13.12.5"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-server-browsersync": "^1.0.2",
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@babel/eslint-parser": "7.13.4",
-    "@expo/webpack-config": "^19.0.0",
-    "@faker-js/faker": "^9.0.3",
+    "@babel/preset-env": "^7.26.9",
+    "@expo/webpack-config": "^19.0.1",
+    "@faker-js/faker": "^9.5.1",
     "@prettier/plugin-xml": "0.13.0",
-    "@types/react": "17.0.67",
+    "@tsconfig/react-native": "^3.0.5",
+    "@types/react": "~18.3.12",
     "babel-eslint": "10.1.0",
     "eslint": "7.20.0",
     "eslint-plugin-instawork": "0.12.0",
-    "gh-pages": "^4.0.0",
+    "gh-pages": "^6.3.0",
     "nunjucks": "^3.2.4",
     "prettier": "2.2.1",
     "pretty-quick": "3.1.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.2.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.67",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4"
+    "typescript": "^5.8.2"
   },
+  "private": true,
+  "homepage": ".",
   "engines": {
     "node": ">=20.0.0 <23.0.0"
-  },
-  "private": true
+  }
 }

demo/src/Core/BottomTabBar/index.tsx

@@ -1,4 +1,5 @@
 import * as Render from 'hyperview/src/services/render';
+import type { HvComponentOnUpdate } from 'hyperview';
 import type { Props } from './types';
 import { useBottomTabBarContext } from '../../Contexts';
 import { useCallback } from 'react';
@@ -19,7 +20,7 @@ export const BottomTabBar = (navProps: Props): JSX.Element | null => {
   const props = getElementProps?.(id);
   const { onUpdate } = props || {};
 
-  const onUpdateCustom = useCallback(
+  const onUpdateCustom: HvComponentOnUpdate = useCallback(
     (href, action, currentElement, opts) => {
       if (action === 'swap' && opts?.newElement) {
         if (currentElement.parentNode) {