feat: support source.headers in useIMGElementState hook

Users which want to customize the renderer for img tags can now set headers to `source` prop. The hook will pre-fetch the image to grab its natural dimensions, using these headers when available.
meliorence · Jun 4, 2021 · a49e958 · a49e958
1 parent 399eb54
commit a49e958
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/render-html/src/__mocks__/react-native.js b/packages/render-html/src/__mocks__/react-native.js
@@ -12,7 +12,7 @@ export class Image extends RNImage {
    * and invoke the callback with the extracted dimensions. If none can
    * be extracted, it will use 640x360.
    */
-  static getSize(uri, callback) {
+  static getSizeWithHeaders(uri, headers, callback) {
     setTimeout(() => {
       let dimensions = [0, 0];
       if (typeof uri === 'string') {

diff --git a/packages/render-html/src/elements/img-types.ts b/packages/render-html/src/elements/img-types.ts
@@ -67,6 +67,7 @@ export interface IMGElementStateLoading {
 export interface IMGElementStateError {
   type: 'error';
   containerStyle: ViewStyle;
+  error: Error;
   /**
    * Either the scaled image dimensions, or `initialImageDimensions` if the
    * later could not be determined.

diff --git a/packages/render-html/src/elements/useIMGElementLoader.tsx b/packages/render-html/src/elements/useIMGElementLoader.tsx
@@ -272,33 +272,37 @@ function usePhysicalDimensions({
       physicalDimensionsFromProps
     ]
   );
-  const [hasError, setHasError] = useState(false);
+  const [error, setError] = useState<null | Error>(null);
   useEffect(
     function fetchPhysicalDimensions() {
       let cancelled = false;
       if (source.uri) {
-        Image.getSize(
+        Image.getSizeWithHeaders(
           source.uri,
+          source.headers || {},
           (w, h) => {
             !cancelled && setPhysicalDimensions({ width: w, height: h });
           },
           (e) => {
-            if (__DEV__) {
-              console.error(e);
-            }
-            !cancelled && setHasError(true);
+            !cancelled && setError(e || {});
           }
         );
         return () => {
           cancelled = true;
         };
       }
     },
-    [source.uri, physicalDimensions, physicalDimensionsFromProps]
+    [
+      source.uri,
+      source.headers,
+      physicalDimensions,
+      physicalDimensionsFromProps
+    ]
   );
   useEffect(
     function resetOnURIChange() {
       setPhysicalDimensions(null);
+      setError(null);
     },
     [source.uri]
   );
@@ -308,7 +312,7 @@ function usePhysicalDimensions({
     physicalDimensions: isPlainImgDimensions(physicalDimensionsFromProps)
       ? physicalDimensionsFromProps
       : physicalDimensions,
-    error: hasError
+    error: error
   };
 }
 
@@ -352,9 +356,10 @@ export default function useIMGElementLoader(
   ]);
   return error
     ? {
+        type: 'error',
         alt,
         altColor,
-        type: 'error',
+        error,
         containerStyle: flatStyle,
         imageBoxDimensions: imageBoxDimensions ?? imagesInitialDimensions!
       }