feat: new cachedNaturalDimensions prop to useIMGelementState hook

When the natural ("physical") dimensions for this image are accessible a priori, these should be passed. It will save some API calls and filesytem access via React Native Image.getSize.
meliorence · Feb 11, 2021 · eaca370 · eaca370
1 parent f3f3b81
commit eaca370
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/packages/render-html/src/elements/__tests__/useIMGElementLoader.test.ts b/packages/render-html/src/elements/__tests__/useIMGElementLoader.test.ts
@@ -2,6 +2,7 @@ import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { perf, wait } from 'react-performance-testing';
 import useIMGElementLoader from '../useIMGElementLoader';
+import { Image } from 'react-native';
 
 describe('useIMGElementLoader', () => {
   const props = {
@@ -49,4 +50,22 @@ describe('useIMGElementLoader', () => {
       height: 150
     });
   });
+  it('should suport cachedNaturalDimensions prop', async () => {
+    Image.getSizeWithHeaders = jest.fn();
+    const { result } = renderHook(() =>
+      useIMGElementLoader({
+        ...props,
+        cachedNaturalDimensions: {
+          width: 600,
+          height: 300
+        }
+      })
+    );
+    expect(result.current.type).toEqual('success');
+    expect(result.current.imageBoxDimensions).toMatchObject({
+      width: 300,
+      height: 150
+    });
+    expect(Image.getSizeWithHeaders).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/render-html/src/elements/img-types.ts b/packages/render-html/src/elements/img-types.ts
@@ -27,6 +27,12 @@ export interface IMGElementLoaderProps {
   contentWidth?: number;
   enableExperimentalPercentWidth?: boolean;
   imagesInitialDimensions?: ImgDimensions;
+  /**
+   * When the natural ("physical") dimensions for this image are accessible a
+   * priori, these should be passed. It will save some API calls and filesytem
+   * access via React Native Image.getSize.
+   */
+  cachedNaturalDimensions?: ImgDimensions;
 }
 
 export interface IMGElementProps extends IMGElementLoaderProps {

diff --git a/packages/render-html/src/elements/useIMGElementLoader.tsx b/packages/render-html/src/elements/useIMGElementLoader.tsx
@@ -239,12 +239,16 @@ function usePhysicalDimensions({
   enableExperimentalPercentWidth,
   width,
   height,
-  style
+  style,
+  cachedNaturalDimensions
 }: IMGElementLoaderProps) {
   const [
     physicalDimensions,
     setPhysicalDimensions
-  ] = useState<ImgDimensions | null>(null);
+  ] = useState<ImgDimensions | null>(cachedNaturalDimensions || null);
+  const hasCachedDimensions = !!cachedNaturalDimensions;
+  const cachedNaturalWidth = cachedNaturalDimensions?.width;
+  const cachedNaturalHeight = cachedNaturalDimensions?.height;
   const physicalDimensionsFromProps = useMemo(
     () =>
       derivePhysicalDimensionsFromProps({
@@ -262,7 +266,7 @@ function usePhysicalDimensions({
         enablePercentWidth: enableExperimentalPercentWidth,
         flatStyle,
         contentWidth,
-        physicalDimensionsFromProps: physicalDimensionsFromProps
+        physicalDimensionsFromProps
       });
     },
     [
@@ -276,7 +280,7 @@ function usePhysicalDimensions({
   useEffect(
     function fetchPhysicalDimensions() {
       let cancelled = false;
-      if (source.uri) {
+      if (source.uri && !hasCachedDimensions) {
         Image.getSizeWithHeaders(
           source.uri,
           source.headers || {},
@@ -292,14 +296,18 @@ function usePhysicalDimensions({
         };
       }
     },
-    [source.uri, source.headers]
+    [source.uri, source.headers, hasCachedDimensions]
   );
   useEffect(
     function resetOnURIChange() {
-      setPhysicalDimensions(null);
+      setPhysicalDimensions(
+        cachedNaturalWidth != null && cachedNaturalHeight != null
+          ? { width: cachedNaturalWidth, height: cachedNaturalHeight }
+          : null
+      );
       setError(null);
     },
-    [source.uri]
+    [cachedNaturalHeight, cachedNaturalWidth, source.uri]
   );
   return {
     requirements,