perf: images (#5001)

* use vanilla image * fix zoomable wrapper * fix image crash * ts + lint * fix key * rm unrel log
rainbow-me · Aug 17, 2023 · 5ca13d0 · 5ca13d0
1 parent e198691
commit 5ca13d0
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 36 deletions.
diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx
@@ -54,7 +54,7 @@ export const FastFallbackCoinIconImage = React.memo(
     const onError = useCallback(
       // @ts-expect-error passed to an untyped JS component
       err => {
-        const newError = err.nativeEvent.message?.includes('404')
+        const newError = err?.nativeEvent?.message?.includes('404')
           ? ImageState.NOT_FOUND
           : ImageState.ERROR;
 

diff --git a/src/components/asset-list/RecyclerAssetList2/WrappedPositionsListHeader.tsx b/src/components/asset-list/RecyclerAssetList2/WrappedPositionsListHeader.tsx
@@ -1,15 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import useOpenPositionCards from '@/hooks/useOpenPositionCards';
-import { Animated, Easing } from 'react-native';
+import { Animated, Easing, Image } from 'react-native';
 import CaretImageSource from '../../../assets/family-dropdown-arrow.png';
 import { useTheme } from '../../../theme/ThemeContext';
 import { ButtonPressAnimation } from '../../animations';
-import { ImgixImage } from '@/components/images';
 import { Box, Inline, Text } from '@/design-system';
 import { StickyHeader } from './core/StickyHeaders';
 import * as i18n from '@/languages';
 
-const AnimatedImgixImage = Animated.createAnimatedComponent(ImgixImage);
+const AnimatedImgixImage = Animated.createAnimatedComponent(Image);
 
 const TokenFamilyHeaderAnimationDuration = 200;
 const TokenFamilyHeaderHeight = 44;
@@ -91,11 +90,9 @@ const PositionListHeader = ({ total, ...props }: { total: string }) => {
                   </Animated.View>
                 )}
                 <AnimatedImgixImage
-                  resizeMode={ImgixImage.resizeMode.contain}
                   source={CaretImageSource as any}
                   style={imageAnimatedStyles}
                   tintColor={colors.dark}
-                  size={30}
                 />
               </Inline>
             </Inline>

diff --git a/src/components/expanded-state/unique-token/ZoomableWrapper.android.js b/src/components/expanded-state/unique-token/ZoomableWrapper.android.js
@@ -74,13 +74,17 @@ export const ZoomableWrapper = ({
   aspectRatio,
   borderRadius,
   disableAnimations,
-  onZoomInWorklet,
-  onZoomOutWorklet,
+  onZoomIn = () => {},
+  onZoomInWorklet = () => {
+    'worklet';
+  },
+  onZoomOut = () => {},
+  onZoomOutWorklet = () => {
+    'worklet';
+  },
   opacity,
   yOffset = 85,
   xOffset: givenXOffset = 0,
-  onZoomIn,
-  onZoomOut,
   yDisplacement: givenYDisplacement,
   width,
   height,

diff --git a/src/components/expanded-state/unique-token/ZoomableWrapper.js b/src/components/expanded-state/unique-token/ZoomableWrapper.js
@@ -87,9 +87,13 @@ export const ZoomableWrapper = ({
   disableEnteringWithPinch,
   hideStatusBar = true,
   onZoomIn = () => {},
-  onZoomInWorklet = () => {},
+  onZoomInWorklet = () => {
+    'worklet';
+  },
   onZoomOut = () => {},
-  onZoomOutWorklet = () => {},
+  onZoomOutWorklet = () => {
+    'worklet';
+  },
   opacity,
   yOffset = 85,
   xOffset: givenXOffset = 0,

diff --git a/src/components/images/ImgixImage.tsx b/src/components/images/ImgixImage.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import FastImage, { FastImageProps, Source } from 'react-native-fast-image';
+import { Image } from 'react-native';
 
 import { maybeSignSource } from '../../handlers/imgix';
 
@@ -11,7 +12,6 @@ export type ImgixImageProps = FastImageProps & {
 // Here we're emulating the pattern used in react-native-fast-image:
 // https://github.com/DylanVann/react-native-fast-image/blob/0439f7190f141e51a391c84890cdd8a7067c6ad3/src/index.tsx#L146
 type HiddenImgixImageProps = {
-  forwardedRef: React.Ref<any>;
   maxRetries?: number;
   retryOnError?: boolean;
   size: number;
@@ -48,15 +48,15 @@ class ImgixImage extends React.PureComponent<
     const { retryCount } = this.state;
     // We don't want to retry if there is a 404.
     const isNotFound =
-      err.nativeEvent.statusCode === 404 ||
-      err.nativeEvent.message?.includes('404');
+      err?.nativeEvent?.statusCode === 404 ||
+      err?.nativeEvent?.message?.includes('404');
     const shouldRetry = retryOnError && !isNotFound;
 
     if (shouldRetry && retryCount < maxRetries) {
       this.setState(({ retryCount }) => ({ retryCount: retryCount + 1 }));
     } else {
       // @ts-expect-error
-      onError?.(err);
+      onError?.(err?.nativeEvent?.error);
     }
   };
 
@@ -65,11 +65,11 @@ class ImgixImage extends React.PureComponent<
     // Use the local state as the signing source, as opposed to the prop directly.
     // (The source prop may point to an untrusted URL.)
     const { retryCount, source } = this.state;
-    const Component = maybeComponent || FastImage;
+    const Component = maybeComponent || Image;
     return (
       <Component
         {...props}
-        key={retryCount}
+        key={`${JSON.stringify(source)}-${retryCount}`}
         onError={this.handleError}
         source={source}
       />
@@ -86,22 +86,10 @@ const preload = (sources: Source[], size?: number, fm?: string): void => {
         w: size,
       }),
     };
-    return FastImage.preload(
-      sources.map(source => maybeSignSource(source, options))
-    );
   }
   return;
 };
 
-const getCachePath = (source: Source) =>
-  FastImage.getCachePath(maybeSignSource(source));
-
-const ImgixImageWithForwardRef = React.forwardRef(
-  (props: ImgixImageProps, ref: React.Ref<any>) => (
-    <ImgixImage forwardedRef={ref} {...props} />
-  )
-);
-
 const {
   cacheControl,
   clearDiskCache,
@@ -111,12 +99,11 @@ const {
   resizeMode,
 } = FastImage;
 
-export default Object.assign(ImgixImageWithForwardRef, {
+export default Object.assign(ImgixImage, {
   cacheControl,
   clearDiskCache,
   clearMemoryCache,
   contextTypes,
-  getCachePath,
   preload,
   priority,
   resizeMode,

diff --git a/src/hooks/useUniqueToken.ts b/src/hooks/useUniqueToken.ts
@@ -19,10 +19,6 @@ export default function useUniqueToken(
     if (typeof maybeUniqueToken === 'object' && !!maybeUniqueToken) {
       const supports3d = !!maybeUniqueToken?.model_properties;
       const supportsAudio = !!maybeUniqueToken?.audio_properties;
-      console.log({
-        videoProps: maybeUniqueToken?.video_properties,
-        video: maybeUniqueToken?.video_url,
-      });
       const supportsVideo = !!maybeUniqueToken?.video_properties;
       return { supports3d, supportsAudio, supportsVideo };
     }