Merge pull request #503 from Shopify/fix/283-onError-callback-useImage

Fix/283 on error callback use image

Author: chrfalch

example/src/Examples/API/Images.tsx

@@ -26,10 +26,24 @@ const rects = [
 ];
 
 export const Images = () => {
+  // Verifies that the error handler for images are working correctly.
+  useImage(new Uint8Array([0, 0, 0, 255]), (err) => {
+    if (err.message !== "Could not load data") {
+      throw new Error(
+        `Expected error message to be 'Could not load data' - got '${err.message}'`
+      );
+    }
+  });
+  useImage("https://reactjs.org/invalid.jpg", (err) => {
+    if (err.message !== "Could not load data") {
+      throw new Error(
+        `Expected error message to be 'Could not load data' - got '${err.message}'`
+      );
+    }
+  });
+
   const oslo = useImage(require("../../assets/oslo.jpg"));
-  if (oslo === null) {
-    return null;
-  }
+
   return (
     <ScrollView>
       {fits.map((fit, i) => (
@@ -47,14 +61,16 @@ export const Images = () => {
                     height={height}
                     color="lightblue"
                   />
-                  <Image
-                    image={oslo}
-                    x={x}
-                    y={y}
-                    width={width}
-                    height={height}
-                    fit={fit}
-                  />
+                  {oslo ? (
+                    <Image
+                      image={oslo}
+                      x={x}
+                      y={y}
+                      width={width}
+                      height={height}
+                      fit={fit}
+                    />
+                  ) : null}
                 </React.Fragment>
               );
             })}

example/src/Examples/API/SVG.tsx

@@ -6,12 +6,11 @@ const { width, height } = Dimensions.get("window");
 
 export const SVG = () => {
   const svg = useSVG(require("./tiger.svg"));
-  if (svg === null) {
-    return null;
-  }
   return (
     <Canvas style={{ flex: 1 }}>
-      <ImageSVG svg={svg} x={0} y={0} width={width / 2} height={height / 2} />
+      {svg ? (
+        <ImageSVG svg={svg} x={0} y={0} width={width / 2} height={height / 2} />
+      ) : null}
     </Canvas>
   );
 };

package/src/skia/core/Data.ts

@@ -1,5 +1,5 @@
 import type { DependencyList } from "react";
-import { useEffect, useState } from "react";
+import { useRef, useEffect, useState } from "react";
 import { Image } from "react-native";
 
 import { Skia } from "../Skia";
@@ -34,23 +34,39 @@ export const useDataCollection = <T>(
 
 export const useRawData = <T>(
   source: DataSource,
-  factory: (data: Data) => T
+  factory: (data: Data) => T,
+  onError?: (err: Error) => void
 ) => {
   const [data, setData] = useState<T | null>(null);
+  const prevSourceRef = useRef<DataSource>();
   useEffect(() => {
-    if (source instanceof Uint8Array) {
-      setData(factory(Skia.Data.fromBytes(source)));
-    } else {
-      const uri =
-        typeof source === "string"
-          ? source
-          : Image.resolveAssetSource(source).uri;
-      Skia.Data.fromURI(uri).then((d) => setData(factory(d)));
+    // Track to avoid re-fetching the same data
+    if (prevSourceRef.current !== source) {
+      prevSourceRef.current = source;
+      const factoryWrapper = (data2: Data) => {
+        const factoryResult = factory(data2);
+        if (factoryResult === null) {
+          onError && onError(new Error("Could not load data"));
+          setData(null);
+        } else {
+          setData(factoryResult);
+        }
+      };
+      if (source instanceof Uint8Array) {
+        factoryWrapper(Skia.Data.fromBytes(source));
+      } else {
+        const uri =
+          typeof source === "string"
+            ? source
+            : Image.resolveAssetSource(source).uri;
+        Skia.Data.fromURI(uri).then((d) => factoryWrapper(d));
+      }
     }
-  }, [factory, source]);
+  }, [factory, onError, source]);
   return data;
 };
 
 const identity = (data: Data) => data;
 
-export const useData = (source: DataSource) => useRawData(source, identity);
+export const useData = (source: DataSource, onError?: (err: Error) => void) =>
+  useRawData(source, identity, onError);

package/src/skia/core/Font.ts

@@ -9,8 +9,12 @@ import { useTypeface } from "./Typeface";
 /**
  * Returns a Skia Font object
  * */
-export const useFont = (font: DataSource, size?: number): SkFont | null => {
-  const typeface = useTypeface(font);
+export const useFont = (
+  font: DataSource,
+  size?: number,
+  onError?: (err: Error) => void
+): SkFont | null => {
+  const typeface = useTypeface(font, onError);
   return useMemo(() => {
     if (typeface === null) {
       return null;

package/src/skia/core/Image.ts

@@ -6,5 +6,5 @@ import { useRawData } from "./Data";
 /**
  * Returns a Skia Image object
  * */
-export const useImage = (source: DataSource) =>
-  useRawData(source, Skia.MakeImageFromEncoded);
+export const useImage = (source: DataSource, onError?: (err: Error) => void) =>
+  useRawData(source, Skia.MakeImageFromEncoded, onError);

package/src/skia/core/SVG.ts

@@ -3,5 +3,5 @@ import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
 
-export const useSVG = (source: DataSource) =>
-  useRawData(source, Skia.SVG.MakeFromData);
+export const useSVG = (source: DataSource, onError?: (err: Error) => void) =>
+  useRawData(source, Skia.SVG.MakeFromData, onError);

package/src/skia/core/Typeface.ts

@@ -5,5 +5,7 @@ import { useRawData } from "./Data";
 /**
  * Returns a Skia Typeface object
  * */
-export const useTypeface = (source: DataSource) =>
-  useRawData(source, Skia.Typeface.MakeFreeTypeFaceFromData);
+export const useTypeface = (
+  source: DataSource,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.Typeface.MakeFreeTypeFaceFromData, onError);