fix(🗑️): fix Hermes memory pressure tracking for recorder pictures (#3495)

Author: wcandillon

apps/example/src/Examples/API/StressTest4.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Alert,
   Button,
@@ -18,13 +18,35 @@ import {
   withTiming,
 } from "react-native-reanimated";
 
+const logMemoryStats = () => {
+  "worklet";
+  if (
+    typeof HermesInternal !== "undefined" &&
+    // @ts-expect-error - HermesInternal is available in Hermes runtime
+    HermesInternal?.getInstrumentedStats
+  ) {
+    // // @ts-expect-error - HermesInternal is available in Hermes runtime
+    // const stats = HermesInternal.getInstrumentedStats();
+    // const externalMB = (stats.js_externalBytes / (1024 * 1024)).toFixed(2);
+    // const totalAllocatedMB = (
+    //   stats.js_totalAllocatedBytes /
+    //   (1024 * 1024)
+    // ).toFixed(2);
+    // const heapSizeMB = (stats.js_heapSize / (1024 * 1024)).toFixed(2);
+    // console.log(
+    //   `External: ${externalMB} MB, Total Allocated: ${totalAllocatedMB} MB, Heap Size: ${heapSizeMB} MB`
+    // );
+  }
+};
+
 const drawFrame = (
   surface: SharedValue<SkSurface | null>,
   image: SharedValue<SkImage | null>,
   x: SharedValue<number>,
   pixelRatio: number
 ) => {
   "worklet";
+  logMemoryStats();
   if (!surface.value) {
     Alert.alert("surface is null");
     return false;
@@ -56,11 +78,16 @@ function continueBlink(
   blinkCnt: SharedValue<number>,
   isLeft: SharedValue<boolean>,
   pixelRatio: number,
-  revert: (d: string) => void
+  revert: (d: string) => void,
+  shouldContinue: SharedValue<boolean>
 ) {
   "worklet";
+  if (!shouldContinue.value) {
+    return;
+  }
   blinkCnt.value++;
   looper.value = withTiming(1 - looper.value, { duration: 10 }, () => {
+    if (!shouldContinue.value) return;
     if (!drawFrame(surface, image, x, pixelRatio)) return;
     if (blinkCnt.value < 20) {
       continueBlink(
@@ -71,13 +98,16 @@ function continueBlink(
         blinkCnt,
         isLeft,
         pixelRatio,
-        revert
+        revert,
+        shouldContinue
       );
     } else {
+      if (!shouldContinue.value) return;
       runOnJS(revert)(isLeft.value ? "right" : "left");
       isLeft.value = !isLeft.value;
       blinkCnt.value = 0;
       x.value = withTiming(400 - x.value, { duration: 200 }, () => {
+        if (!shouldContinue.value) return;
         continueBlink(
           surface,
           image,
@@ -86,7 +116,8 @@ function continueBlink(
           blinkCnt,
           isLeft,
           pixelRatio,
-          revert
+          revert,
+          shouldContinue
         );
       });
     }
@@ -101,9 +132,11 @@ const startBlink = (
   blinkCnt: SharedValue<number>,
   isLeft: SharedValue<boolean>,
   pixelRatio: number,
-  revert: (d: string) => void
+  revert: (d: string) => void,
+  shouldContinue: SharedValue<boolean>
 ) => {
   "worklet";
+  if (!shouldContinue.value) return;
   blinkCnt.value = 0;
   if (drawFrame(surface, image, x, pixelRatio)) {
     continueBlink(
@@ -114,7 +147,8 @@ const startBlink = (
       blinkCnt,
       isLeft,
       pixelRatio,
-      revert
+      revert,
+      shouldContinue
     );
   }
 };
@@ -127,7 +161,8 @@ const startAnimation = (
   blinkCnt: SharedValue<number>,
   isLeft: SharedValue<boolean>,
   pixelRatio: number,
-  revert: (d: string) => void
+  revert: (d: string) => void,
+  shouldContinue: SharedValue<boolean>
 ) => {
   "worklet";
   if (!surface.value) {
@@ -136,7 +171,17 @@ const startAnimation = (
       pixelRatio * 400
     );
   }
-  startBlink(surface, image, x, looper, blinkCnt, isLeft, pixelRatio, revert);
+  startBlink(
+    surface,
+    image,
+    x,
+    looper,
+    blinkCnt,
+    isLeft,
+    pixelRatio,
+    revert,
+    shouldContinue
+  );
 };
 
 export const StressTest4 = () => {
@@ -149,10 +194,12 @@ export const StressTest4 = () => {
   const [direction, setDirection] = useState("left");
   const isLeft = useSharedValue(true);
   const blinkCnt = useSharedValue(0);
+  const shouldContinue = useSharedValue(true);
 
   const imageX = useDerivedValue(() => -x.value);
 
   const handleStart = () => {
+    shouldContinue.value = true;
     runOnUI(startAnimation)(
       surface,
       image,
@@ -161,10 +208,18 @@ export const StressTest4 = () => {
       blinkCnt,
       isLeft,
       pixelRatio,
-      setDirection
+      setDirection,
+      shouldContinue
     );
   };
 
+  useEffect(() => {
+    // Stop animation on unmount
+    return () => {
+      shouldContinue.value = false;
+    };
+  }, [shouldContinue]);
+
   return (
     <SafeAreaView style={styles.container}>
       <Text>Direction: {direction}</Text>

apps/example/src/Home/HomeScreen.tsx

@@ -39,11 +39,6 @@ export const HomeScreen = () => {
         description="Simple declarative example"
         route="Breathe"
       />
-      <HomeScreenButton
-        title="🖼 Image Loading"
-        description="Load and edit an image"
-        route="ImageLoading"
-      />
       <HomeScreenButton
         title="🏞 Filters"
         description="Simple Image Filters"

externals/depot_tools

@@ -38,6 +38,10 @@ class JsiNativeBufferFactory : public JsiSkHostObject {
 
   size_t getMemoryPressure() const override { return 1024; }
 
+  std::string getObjectType() const override {
+    return "JsiNativeBufferFactory";
+  }
+
   explicit JsiNativeBufferFactory(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}
 };

packages/skia/cpp/api/JsiNativeBuffer.h

@@ -64,6 +64,8 @@ class JsiSkAnimatedImage
                                                       std::move(image)) {}
 
   size_t getMemoryPressure() const override { return 8192; }
+
+  std::string getObjectType() const override { return "JsiSkAnimatedImage"; }
 };
 
 } // namespace RNSkia

packages/skia/cpp/api/JsiSkAnimatedImage.h

@@ -31,6 +31,10 @@ class JsiSkAnimatedImageFactory : public JsiSkHostObject {
 
   size_t getMemoryPressure() const override { return 1024; }
 
+  std::string getObjectType() const override {
+    return "JsiSkAnimatedImageFactory";
+  }
+
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkAnimatedImageFactory,
                                        MakeAnimatedImageFromEncoded))
 

packages/skia/cpp/api/JsiSkAnimatedImageFactory.h

@@ -63,6 +63,8 @@ class JsiSkApi : public JsiSkHostObject {
 public:
   size_t getMemoryPressure() const override { return 8192; }
 
+  std::string getObjectType() const override { return "JsiSkApi"; }
+
   /**
    * Constructs the Skia Api object that can be installed into a runtime
    * and provide functions for accessing and creating the Skia wrapper objects

packages/skia/cpp/api/JsiSkApi.h

@@ -695,6 +695,8 @@ class JsiSkCanvas : public JsiSkHostObject {
 
   size_t getMemoryPressure() const override { return 1024; }
 
+  std::string getObjectType() const override { return "JsiSkCanvas"; }
+
   explicit JsiSkCanvas(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}
 

packages/skia/cpp/api/JsiSkCanvas.h

@@ -25,6 +25,8 @@ class JsiSkColorFilter : public JsiSkWrappingSkPtrHostObject<SkColorFilter> {
 
   size_t getMemoryPressure() const override { return 2048; }
 
+  std::string getObjectType() const override { return "JsiSkColorFilter"; }
+
   EXPORT_JSI_API_TYPENAME(JsiSkColorFilter, ColorFilter)
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkColorFilter, dispose))
 };

packages/skia/cpp/api/JsiSkColorFilter.h

@@ -94,6 +94,10 @@ class JsiSkColorFilterFactory : public JsiSkHostObject {
 
   size_t getMemoryPressure() const override { return 1024; }
 
+  std::string getObjectType() const override {
+    return "JsiSkColorFilterFactory";
+  }
+
   JSI_EXPORT_FUNCTIONS(
       JSI_EXPORT_FUNC(JsiSkColorFilterFactory, MakeMatrix),
       JSI_EXPORT_FUNC(JsiSkColorFilterFactory, MakeBlend),