fix: image prefetch api added

GeekyAnts · Jan 24, 2022 · 9f42780 · 9f42780
1 parent ab057ac
commit 9f42780
Showing 1 changed file with 94 additions and 73 deletions.
diff --git a/src/components/primitives/Image/index.tsx b/src/components/primitives/Image/index.tsx
@@ -8,84 +8,105 @@ import { makeStyledComponent } from '../../../utils/styled';
 
 const StyledImage = makeStyledComponent(RNImage);
 
-const Image = (props: IImageProps, ref: any) => {
-  const {
-    source,
-    src,
-    fallbackElement,
-    alt,
-    fallbackSource,
-    ignoreFallback,
-    _alt,
-    ...resolvedProps
-  } = usePropsResolution('Image', props);
+const Image = memo(
+  forwardRef((props: IImageProps, ref: any) => {
+    const {
+      source,
+      src,
+      fallbackElement,
+      alt,
+      fallbackSource,
+      ignoreFallback,
+      _alt,
+      ...resolvedProps
+    } = usePropsResolution('Image', props);
 
-  const finalSource: any = useRef(null);
-  const getSource = useCallback(() => {
-    if (source) {
-      finalSource.current = source;
-    } else if (src) {
-      finalSource.current = { uri: src };
-    }
-    return finalSource.current;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [source?.uri, src]);
+    const finalSource: any = useRef(null);
+    const getSource = useCallback(() => {
+      if (source) {
+        finalSource.current = source;
+      } else if (src) {
+        finalSource.current = { uri: src };
+      }
+      return finalSource.current;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [source?.uri, src]);
 
-  const [renderedSource, setSource] = useState(getSource());
-  const [alternate, setAlternate] = useState(false);
-  const [fallbackSourceFlag, setfallbackSourceFlag] = useState(true);
+    const [renderedSource, setSource] = useState(getSource());
+    const [alternate, setAlternate] = useState(false);
+    const [fallbackSourceFlag, setfallbackSourceFlag] = useState(true);
 
-  React.useEffect(() => {
-    setSource(getSource());
-    return () => {
-      finalSource.current = null;
-    };
-  }, [source?.uri, src, getSource]);
+    React.useEffect(() => {
+      setSource(getSource());
+      return () => {
+        finalSource.current = null;
+      };
+    }, [source?.uri, src, getSource]);
 
-  const onImageLoadError = useCallback(
-    (event: any) => {
-      props.onError && props.onError(event);
-      console.warn(event.nativeEvent.error);
-      if (
-        !ignoreFallback &&
-        fallbackSource &&
-        fallbackSource !== renderedSource &&
-        fallbackSourceFlag
-      ) {
-        setfallbackSourceFlag(false);
-        setSource(fallbackSource);
-      } else {
-        setAlternate(true);
-      }
-    },
-    [fallbackSource, fallbackSourceFlag, ignoreFallback, props, renderedSource]
-  );
-  //TODO: refactor for responsive prop
-  if (useHasResponsiveProps(props)) {
-    return null;
-  }
-  if (!alt) {
-    console.warn('Please pass alt prop to Image component');
-  }
+    const onImageLoadError = useCallback(
+      (event: any) => {
+        props.onError && props.onError(event);
+        console.warn(event.nativeEvent.error);
+        if (
+          !ignoreFallback &&
+          fallbackSource &&
+          fallbackSource !== renderedSource &&
+          fallbackSourceFlag
+        ) {
+          setfallbackSourceFlag(false);
+          setSource(fallbackSource);
+        } else {
+          setAlternate(true);
+        }
+      },
+      [
+        fallbackSource,
+        fallbackSourceFlag,
+        ignoreFallback,
+        props,
+        renderedSource,
+      ]
+    );
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    if (!alt) {
+      console.warn('Please pass alt prop to Image component');
+    }
 
-  if (alternate) {
-    if (fallbackElement) {
-      if (React.isValidElement(fallbackElement)) {
-        return fallbackElement;
-      }
-    } else return <Text {..._alt}>{alt}</Text>;
-  }
-  return (
-    <StyledImage
-      source={renderedSource}
-      accessibilityLabel={alt}
-      alt={alt}
-      {...resolvedProps}
-      onError={onImageLoadError}
-      ref={ref}
-    />
-  );
+    if (alternate) {
+      if (fallbackElement) {
+        if (React.isValidElement(fallbackElement)) {
+          return fallbackElement;
+        }
+      } else return <Text {..._alt}>{alt}</Text>;
+    }
+    return (
+      <StyledImage
+        source={renderedSource}
+        accessibilityLabel={alt}
+        alt={alt}
+        {...resolvedProps}
+        onError={onImageLoadError}
+        ref={ref}
+      />
+    );
+  })
+);
+
+interface ImageStatics {
+  getSize: typeof RNImage.prefetch;
+  prefetch: typeof RNImage.prefetch;
+  queryCache: typeof RNImage.queryCache;
+}
+const ImageWithStatics: typeof Image & ImageStatics = {
+  ...Image,
+  //@ts-ignore
+  getSize: RNImage.getSize,
+  prefetch: RNImage.prefetch,
+  queryCache: RNImage.queryCache,
 };
 
-export default memo(forwardRef(Image));
+export default ImageWithStatics;
 export type { IImageProps };