From 7dd9cbc506f136054df8b0f8d88bfd226956dd57 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Thu, 21 May 2026 19:58:31 +0700
Subject: [PATCH] fix(app): keep inline style marker web-only

---
 .../styles/unistyles-inline-style.native.ts   |  8 +++++++
 .../app/src/styles/unistyles-inline-style.ts  | 20 ----------------
 .../src/styles/unistyles-inline-style.web.ts  | 23 +++++++++++++++++++
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 packages/app/src/styles/unistyles-inline-style.native.ts
 create mode 100644 packages/app/src/styles/unistyles-inline-style.web.ts

diff --git a/packages/app/src/styles/unistyles-inline-style.native.ts b/packages/app/src/styles/unistyles-inline-style.native.ts
new file mode 100644
index 000000000..2c8bf7c40
--- /dev/null
+++ b/packages/app/src/styles/unistyles-inline-style.native.ts
@@ -0,0 +1,8 @@
+/**
+ * Native does not use Unistyles' web CSS registry, and native Unistyles treats
+ * any `unistyles_*` key as a registered style hash. The web marker would crash
+ * native ref binding, so native keeps these dynamic styles as plain RN styles.
+ */
+export function inlineUnistylesStyle<TStyle extends object>(style: TStyle): TStyle {
+  return style;
+}
diff --git a/packages/app/src/styles/unistyles-inline-style.ts b/packages/app/src/styles/unistyles-inline-style.ts
index 4201c2b0d..72b407ffd 100644
--- a/packages/app/src/styles/unistyles-inline-style.ts
+++ b/packages/app/src/styles/unistyles-inline-style.ts
@@ -1,23 +1,3 @@
-const UNISTYLES_INLINE_STYLE_KEY = "unistyles_inline_style";
-
-/**
- * Forces a style object through Unistyles' inline/animated-style lane.
- *
- * Unistyles web sends ordinary style objects to the CSS registry. Styles that
- * look like animated styles stay in React Native's style array instead. Use
- * this only for high-churn values, such as measured dimensions, drag
- * transforms, and pressed/hovered state.
- */
 export function inlineUnistylesStyle<TStyle extends object>(style: TStyle): TStyle {
-  if (!Object.isExtensible(style) || UNISTYLES_INLINE_STYLE_KEY in style) {
-    return style;
-  }
-
-  Object.defineProperty(style, UNISTYLES_INLINE_STYLE_KEY, {
-    value: {},
-    enumerable: true,
-    configurable: true,
-  });
-
   return style;
 }
diff --git a/packages/app/src/styles/unistyles-inline-style.web.ts b/packages/app/src/styles/unistyles-inline-style.web.ts
new file mode 100644
index 000000000..4201c2b0d
--- /dev/null
+++ b/packages/app/src/styles/unistyles-inline-style.web.ts
@@ -0,0 +1,23 @@
+const UNISTYLES_INLINE_STYLE_KEY = "unistyles_inline_style";
+
+/**
+ * Forces a style object through Unistyles' inline/animated-style lane.
+ *
+ * Unistyles web sends ordinary style objects to the CSS registry. Styles that
+ * look like animated styles stay in React Native's style array instead. Use
+ * this only for high-churn values, such as measured dimensions, drag
+ * transforms, and pressed/hovered state.
+ */
+export function inlineUnistylesStyle<TStyle extends object>(style: TStyle): TStyle {
+  if (!Object.isExtensible(style) || UNISTYLES_INLINE_STYLE_KEY in style) {
+    return style;
+  }
+
+  Object.defineProperty(style, UNISTYLES_INLINE_STYLE_KEY, {
+    value: {},
+    enumerable: true,
+    configurable: true,
+  });
+
+  return style;
+}