Fix useAnimatedImageValue lifecycle (#2172)

Shopify · Jan 26, 2024 · 7584051 · 7584051
1 parent f321480
commit 7584051
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/package/src/external/reanimated/useAnimatedImageValue.ts b/package/src/external/reanimated/useAnimatedImageValue.ts
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import type { FrameInfo } from "react-native-reanimated";
 
 import { useAnimatedImage } from "../../skia/core/AnimatedImage";
@@ -15,10 +16,14 @@ export const useAnimatedImageValue = (source: DataSourceParam) => {
   throwOnMissingReanimated();
   const currentFrame = useSharedValue<null | SkImage>(null);
   const lastTimestamp = useSharedValue(0);
-  const animatedImage = useAnimatedImage(source, (err) => {
-    console.error(err);
-    throw new Error(`Could not load animated image - got '${err.message}'`);
-  });
+  const animatedImage = useAnimatedImage(
+    source,
+    (err) => {
+      console.error(err);
+      throw new Error(`Could not load animated image - got '${err.message}'`);
+    },
+    false
+  );
   const frameDuration =
     animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
 
@@ -47,5 +52,11 @@ export const useAnimatedImageValue = (source: DataSourceParam) => {
     lastTimestamp.value = timestamp;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, true);
+  useEffect(() => {
+    return () => {
+      animatedImage?.dispose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return currentFrame;
 };
diff --git a/package/src/skia/core/AnimatedImage.ts b/package/src/skia/core/AnimatedImage.ts
@@ -12,5 +12,6 @@ const animatedImgFactory = Skia.AnimatedImage.MakeAnimatedImageFromEncoded.bind(
  * */
 export const useAnimatedImage = (
   source: DataSourceParam,
-  onError?: (err: Error) => void
-) => useRawData(source, animatedImgFactory, onError);
+  onError?: (err: Error) => void,
+  managed = true
+) => useRawData(source, animatedImgFactory, onError, managed);
diff --git a/package/src/skia/core/Data.ts b/package/src/skia/core/Data.ts
@@ -40,7 +40,8 @@ export const loadData = <T>(
 
 const useLoading = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
-  loader: () => Promise<T | null>
+  loader: () => Promise<T | null>,
+  manage = true
 ) => {
   const mounted = useRef(false);
   const [data, setData] = useState<T | null>(null);
@@ -54,7 +55,9 @@ const useLoading = <T extends SkJSIInstance<string>>(
       }
     });
     return () => {
-      dataRef.current?.dispose();
+      if (manage) {
+        dataRef.current?.dispose();
+      }
       mounted.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -94,8 +97,9 @@ export const useCollectionLoading = <T extends SkJSIInstance<string>>(
 export const useRawData = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
-  onError?: (err: Error) => void
-) => useLoading(source, () => loadData<T>(source, factory, onError));
+  onError?: (err: Error) => void,
+  manage = true
+) => useLoading(source, () => loadData<T>(source, factory, onError), manage);
 
 const identity = (data: SkData) => data;