Enable new architecture and pointer events (#58)

* Enable new architecture

* Demo pointer events

* Remove react dependency from root

* Update package-lock

* Add @types/node to mobile-app

package.json

@@ -7,13 +7,16 @@
     "lint": "nx run-many -t lint --max-warnings=0",
     "lint:fix": "nx run-many -t lint --fix --max-warnings=0",
     "typecheck": "nx run-many -t typecheck",
-    "postinstall": "git submodule update --init --recursive"
+    "postinstall": "git submodule update --init --recursive",
+    "clean:modules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +"
   },
   "devDependencies": {
     "@nx/js": "18.1.2",
     "@nx/react-native": "18.1.2",
     "nx": "18.1.2",
-    "typescript": "^5.1.3"
+    "typescript": "5.6.3"
   },
-  "workspaces": ["packages/*"]
+  "workspaces": [
+    "packages/*"
+  ]
 }

packages/data-facade/package.json

@@ -15,7 +15,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5",
-    "react": "^18",
+    "react": "~18.2",
     "zod": "^3"
   }
 }

packages/mobile-app/app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "bundleIdentifier": "com.ironfish.mobileapp",
       "infoPlist": {
@@ -43,7 +41,19 @@
     },
     "plugins": [
       "expo-router",
-      "expo-secure-store"
+      "expo-secure-store",
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "newArchEnabled": true
+          },
+          "ios": {
+            "newArchEnabled": true
+          }
+        }
+      ],
+      "./plugins/withPointerEvents.js"
     ]
   }
 }

packages/mobile-app/app/(tabs)/ui.tsx

@@ -1,8 +1,11 @@
+import { useState } from "react";
+import { Text } from "react-native";
 import { Button } from "@ironfish/tackle-box";
 import { Appearance, useColorScheme, View } from "react-native";
 
 export default function UiKit() {
   const scheme = useColorScheme();
+  const [count, setCount] = useState(0);
   return (
     <View
       style={{
@@ -11,12 +14,21 @@ export default function UiKit() {
         backgroundColor: scheme === "dark" ? "#333" : "#fff",
       }}
     >
+      <Text>Count: {count}</Text>
+      <View
+        onPointerDown={() => {
+          setCount(count + 1);
+        }}
+        style={{ height: 100, width: 100, backgroundColor: "blue" }}
+      />
+
       <Button
         label="Toggle color scheme"
         onPress={() => {
           Appearance.setColorScheme(scheme === "dark" ? "light" : "dark");
         }}
       />
+
       {/* Solid */}
       <Button label="Click me" />
 

packages/mobile-app/data/facades/index.ts

@@ -7,7 +7,7 @@ import { chainHandlers } from "./chain/handlers";
 import { chainDemoHandlers } from "./chain/demoHandlers";
 import { contactsDemoHandlers } from "./contacts/demoHandlers";
 
-const DEMO = false;
+const DEMO = true;
 
 export const facadeContext = createFacadeContext(
   DEMO

packages/mobile-app/index.js

@@ -2,3 +2,9 @@ global.Buffer = require("buffer").Buffer;
 global.process = require("process");
 
 require("expo-router/entry");
+
+const ReactNativeFeatureFlags = require("react-native/Libraries/ReactNative/ReactNativeFeatureFlags");
+
+ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
+ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover = () =>
+  true;

packages/mobile-app/package.json

@@ -14,10 +14,10 @@
     "@ironfish/sdk": "2.2.0",
     "@ironfish/tackle-box": "*",
     "data-facade": "*",
-    "expo": "51.0.28",
+    "expo": "~51.0.39",
     "expo-constants": "~16.0.2",
     "expo-linking": "~6.3.1",
-    "expo-router": "3.5.17",
+    "expo-router": "~3.5.24",
     "expo-secure-store": "13.0.2",
     "expo-sqlite": "14.0.6",
     "expo-status-bar": "~1.12.1",
@@ -30,18 +30,20 @@
     "protobufjs": "^7.3.0",
     "react": "18.2.0",
     "react-native": "0.74.5",
-    "react-native-safe-area-context": "4.10.8",
-    "react-native-screens": "3.32.0",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@svgr/webpack": "^8.1.0",
+    "@types/node": "^22.9.0",
     "@types/react": "~18.2.79",
     "eslint-config-expo": "^7.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "expo-build-properties": "^0.12.5",
     "prettier": "^3.3.2",
     "react-native-svg-transformer": "^1.5.0"
   },

packages/mobile-app/plugins/withPointerEvents.js

@@ -0,0 +1,32 @@
+const { withAppDelegate } = require("@expo/config-plugins");
+
+const withPointerEvents = (config) => {
+  return withAppDelegate(config, (config) => {
+    const appDelegate = config.modResults;
+
+    // Add import
+    if (!appDelegate.contents.includes("#import <React/RCTConstants.h>")) {
+      appDelegate.contents = `#import <React/RCTConstants.h>\n${appDelegate.contents}`;
+    }
+
+    // Add RCTSetDispatchW3CPointerEvents
+    const didFinishLaunchingMethod = appDelegate.contents.match(
+      /(?:^|\n).*didFinishLaunchingWithOptions.*\n?\s*{/,
+    );
+
+    if (didFinishLaunchingMethod) {
+      const insertAt =
+        didFinishLaunchingMethod.index + didFinishLaunchingMethod[0].length;
+      const newContents =
+        appDelegate.contents.slice(0, insertAt) +
+        "\n  RCTSetDispatchW3CPointerEvents(YES);" +
+        appDelegate.contents.slice(insertAt);
+
+      appDelegate.contents = newContents;
+    }
+
+    return config;
+  });
+};
+
+module.exports = withPointerEvents;

packages/tackle-box/package.json

@@ -43,6 +43,6 @@
     "react-native": "0.74.5",
     "rimraf": "^6.0.1",
     "storybook": "^8.2.9",
-    "typescript": "5.1.3"
+    "typescript": "5.6.3"
   }
 }