fix(app): clean up native animation and layout lifecycles (#7914)

Worklets 0.10.4 and Reanimated 4.5.5 while keeping the stale-view guard from #7907; backport the Enriched Markdown settled-row measurement fix (upstream #924); release each bottom sheet's Dimensions subscription on unmount.

packages/app/package.json

@@ -126,14 +126,14 @@
     "react-native-gesture-handler": "~2.32.0",
     "react-native-keyboard-controller": "1.21.12",
     "react-native-nitro-modules": "0.35.5",
-    "react-native-reanimated": "4.5.1",
+    "react-native-reanimated": "4.5.5",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "~4.26.0",
     "react-native-svg": "15.15.4",
     "react-native-unistyles": "^3.2.4",
     "react-native-web": "~0.21.0",
     "react-native-webview": "13.16.1",
-    "react-native-worklets": "0.10.1",
+    "react-native-worklets": "0.10.4",
     "tiny-invariant": "^1.3.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
@@ -198,6 +198,14 @@
     ],
     "enableVideo": false
   },
+  "expo": {
+    "install": {
+      "exclude": [
+        "react-native-reanimated",
+        "react-native-worklets"
+      ]
+    }
+  },
   "reanimated": {
     "staticFeatureFlags": {
       "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false

packages/app/src/components/ui/isolated-bottom-sheet-modal/index.test.tsx

@@ -58,6 +58,7 @@ vi.mock("@gorhom/bottom-sheet", async () => {
 });
 
 import { IsolatedBottomSheetModal, type ContextBridge } from ".";
+import { useAnimatedLayout } from "@gorhom/bottom-sheet/src/hooks/useAnimatedLayout";
 import { useIsInsideBottomSheet } from "@/components/ui/bottom-sheet-scope";
 
 /** Renders whatever the portal is currently holding, from its own place in the tree. */
@@ -200,3 +201,35 @@ describe("IsolatedBottomSheetModal context bridging", () => {
     ).toEqual(["false", "true"]);
   });
 });
+
+describe("bottom sheet layout subscription", () => {
+  it("stops updating a dismissed sheet when the window resizes", () => {
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    let layout: ReturnType<typeof useAnimatedLayout> | undefined;
+    const viewport = document.documentElement;
+    const originalWidth = Object.getOwnPropertyDescriptor(viewport, "clientWidth");
+    function resize(width: number) {
+      Object.defineProperty(viewport, "clientWidth", { configurable: true, value: width });
+      act(() => window.dispatchEvent(new Event("resize")));
+    }
+    function LayoutProbe() {
+      layout = useAnimatedLayout(undefined, 0, 0);
+      return null;
+    }
+    try {
+      act(() => root.render(<LayoutProbe />));
+      if (!layout) throw new Error("Sheet layout did not mount");
+      const mountedLayout = layout;
+      resize(640);
+      expect(mountedLayout.get().window.width).toBe(640);
+      act(() => root.render(null));
+      resize(960);
+      expect(mountedLayout.get().window.width).toBe(640);
+    } finally {
+      act(() => root.unmount());
+      if (originalWidth) Object.defineProperty(viewport, "clientWidth", originalWidth);
+      else Reflect.deleteProperty(viewport, "clientWidth");
+    }
+  });
+});