OK-7960, OK-7789: add react-native-fast-image

development/babelTools.js

@@ -18,6 +18,27 @@ function normalizeConfig({ platform, config }) {
         'react-native-restart': fullPath(
           './module-resolver/react-native-restart-mock',
         ),
+        'react-native-fast-image': fullPath(
+          './module-resolver/react-native-fast-image-mock',
+        ),
+      },
+    };
+  }
+  if (platform === developmentConsts.platforms.web) {
+    moduleResolver = {
+      alias: {
+        'react-native-fast-image': fullPath(
+          './module-resolver/react-native-fast-image-mock',
+        ),
+      },
+    };
+  }
+  if (platform === developmentConsts.platforms.desktop) {
+    moduleResolver = {
+      alias: {
+        'react-native-fast-image': fullPath(
+          './module-resolver/react-native-fast-image-mock',
+        ),
       },
     };
   }

development/module-resolver/react-native-fast-image-mock/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  Platform: {
+    OS: 'web',
+  },
+};

packages/app/ios/Podfile.lock

@@ -125,6 +125,15 @@ PODS:
   - fmt (6.2.1)
   - glog (0.3.5)
   - IQKeyboardManagerSwift (6.5.4)
+  - libwebp (1.2.1):
+    - libwebp/demux (= 1.2.1)
+    - libwebp/mux (= 1.2.1)
+    - libwebp/webp (= 1.2.1)
+  - libwebp/demux (1.2.1):
+    - libwebp/webp
+  - libwebp/mux (1.2.1):
+    - libwebp/demux
+  - libwebp/webp (1.2.1)
   - lottie-ios (3.2.3)
   - lottie-react-native (5.0.1):
     - lottie-ios (~> 3.2.3)
@@ -420,6 +429,10 @@ PODS:
     - React
   - RNCAsyncStorage (1.15.14):
     - React-Core
+  - RNFastImage (8.5.11):
+    - React-Core
+    - SDWebImage (~> 5.11.1)
+    - SDWebImageWebPCoder (~> 0.8.4)
   - RNGestureHandler (2.1.3):
     - React-Core
   - RNReanimated (2.3.3):
@@ -455,6 +468,12 @@ PODS:
     - React-RCTImage
   - RNSVG (12.1.1):
     - React
+  - SDWebImage (5.11.1):
+    - SDWebImage/Core (= 5.11.1)
+  - SDWebImage/Core (5.11.1)
+  - SDWebImageWebPCoder (0.8.4):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.10)
   - UMTaskManagerInterface (7.1.1):
     - ExpoModulesCore
   - Yoga (1.14.0)
@@ -533,6 +552,7 @@ DEPENDENCIES:
   - ReactNativeKeyboardManager (from `../../../node_modules/react-native-keyboard-manager`)
   - RealmJS (from `../../../node_modules/realm`)
   - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
+  - RNFastImage (from `../../../node_modules/react-native-fast-image`)
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
@@ -544,7 +564,10 @@ SPEC REPOS:
   trunk:
     - fmt
     - IQKeyboardManagerSwift
+    - libwebp
     - MultiplatformBleAdapter
+    - SDWebImage
+    - SDWebImageWebPCoder
     - ZXingObjC
 
 EXTERNAL SOURCES:
@@ -680,6 +703,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/realm"
   RNCAsyncStorage:
     :path: "../../../node_modules/@react-native-async-storage/async-storage"
+  RNFastImage:
+    :path: "../../../node_modules/react-native-fast-image"
   RNGestureHandler:
     :path: "../../../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -725,6 +750,7 @@ SPEC CHECKSUMS:
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 5337263514dd6f09803962437687240c5dc39aa4
   IQKeyboardManagerSwift: 2dde0fc70110e8eac7ccce2a46fdbec6a850b414
+  libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
   lottie-ios: c058aeafa76daa4cf64d773554bccc8385d0150e
   lottie-react-native: a029a86e1689c86a07169c520ae770e84348cd20
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
@@ -763,10 +789,13 @@ SPEC CHECKSUMS:
   ReactNativeKeyboardManager: f82a63e0982254fb0f6a17ba327fac575a46f1e9
   RealmJS: 6e47a0a9619d19dd238ef635abee5724cb677247
   RNCAsyncStorage: ea6b5c280997b2b32a587793163b1f10e580c4f7
+  RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
   RNGestureHandler: e1099204721a17a89c81fcd1cc2e92143dc040fb
   RNReanimated: b676957fbbf477c5468335268e8fe6fbb0f630e5
   RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
+  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
+  SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815
   UMTaskManagerInterface: 3184c93ecc290bd422c6e344badc89b601e9c29b
   Yoga: e7dc4e71caba6472ff48ad7d234389b91dadc280
   ZXingObjC: fdbb269f25dd2032da343e06f10224d62f537bdb

packages/app/package.json

@@ -51,6 +51,7 @@
     "react-native-config": "^1.4.5",
     "react-native-confirmation-code-field": "^7.2.0",
     "react-native-crypto": "^2.2.0",
+    "react-native-fast-image": "^8.5.11",
     "react-native-gesture-handler": "~2.1.0",
     "react-native-keyboard-manager": "^6.5.4-4",
     "react-native-pager-view": "5.4.9",

packages/components/src/ImageViewer/index.tsx

@@ -21,6 +21,9 @@ import uuid from 'react-native-uuid';
 
 import { Icon, Select } from '@onekeyhq/components';
 import { useToast } from '@onekeyhq/kit/src/hooks/useToast';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
+
+import { Image as NetImage } from '../NetImage';
 
 type ImageViewerProps = {
   visible: boolean;
@@ -96,13 +99,22 @@ const ImageViewer: FC<ImageViewerProps> = ({
     () => (
       <Box>
         <Pressable onPress={handleClose}>
-          <Image
-            alt="-"
-            {...rest}
-            width={`${imageSize.width}px`}
-            height={`${imageSize.height}px`}
-            resizeMode="cover"
-          />
+          {platformEnv.isNative && rest.src ? (
+            <NetImage
+              width={`${imageSize.width}px`}
+              height={`${imageSize.height}px`}
+              resizeMode="cover"
+              uri={rest.src}
+            />
+          ) : (
+            <Image
+              alt="-"
+              {...rest}
+              width={`${imageSize.width}px`}
+              height={`${imageSize.height}px`}
+              resizeMode="cover"
+            />
+          )}
         </Pressable>
       </Box>
     ),

packages/components/src/NetImage/index.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable global-require, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-var-requires */
+import React, { FC, useState } from 'react';
+
+import { Pressable } from 'native-base';
+
+import { ImageViewer } from '@onekeyhq/components';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
+
+import OKImage from '../Image';
+import { ThemeToken } from '../Provider/theme';
+
+let FastImage: typeof import('react-native-fast-image').default | undefined;
+try {
+  FastImage = require('react-native-fast-image').default;
+} catch (e) {
+  // Ignore
+  console.debug('Error on require `react-native-fast-image` module', e);
+}
+
+type ImageProps = {
+  alt?: string;
+  width?: string | undefined;
+  height?: string | undefined;
+  size?: string | undefined;
+  borderRadius?: number;
+  bgColor?: ThemeToken;
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center';
+  uri: string;
+  priority?: 'low' | 'normal' | 'high';
+  preview?: boolean;
+};
+
+export const Image: FC<ImageProps> = ({ ...rest }) => {
+  const { uri, resizeMode, preview, priority, borderRadius, bgColor } = rest;
+  const width = rest.width ?? rest.size;
+  const height = rest.height ?? rest.size;
+  if (platformEnv.isNative && !!FastImage) {
+    return (
+      <FastImage
+        style={{ width, height, borderRadius, backgroundColor: bgColor }}
+        source={{
+          uri,
+          priority,
+        }}
+        resizeMode={resizeMode}
+      />
+    );
+  }
+  return (
+    <OKImage
+      width={width}
+      height={height}
+      src={uri}
+      resizeMode={resizeMode}
+      preview={preview}
+      borderRadius={`${borderRadius ?? 0}px`}
+      bgColor={bgColor}
+    />
+  );
+};
+
+const NetImage: FC<ImageProps> = ({ ...rest }) => {
+  const { preview, uri } = rest;
+  const [isVisible, setIsVisible] = useState(false);
+  if (preview) {
+    return (
+      <>
+        <Pressable
+          onPress={() => {
+            if (platformEnv.isNative) {
+              setIsVisible(true);
+            } else {
+              window.open(uri, '_blank');
+            }
+          }}
+        >
+          <Image {...rest} />
+        </Pressable>
+        {isVisible ? (
+          <ImageViewer onToggle={setIsVisible} visible={isVisible} src={uri} />
+        ) : null}
+      </>
+    );
+  }
+  return <Image {...rest} />;
+};
+
+export default NetImage;

packages/components/src/index.tsx

@@ -49,6 +49,7 @@ export { default as Dialog } from './Dialog';
 export { default as PageActions } from './PageActions';
 export { default as Form } from './Form';
 export { default as Image } from './Image';
+export { default as NetImage } from './NetImage';
 export { default as ImageViewer } from './ImageViewer';
 export { default as SortableList } from './SortableList';
 export { default as TabView, SceneMap } from './TabView';
@@ -59,6 +60,7 @@ export { default as Spacer } from './Spacer';
 export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';
 export { default as KeyboardDismissView } from './KeyboardDismissView';
 export { default as KeyboardAwareScrollView } from './KeyboardAwareScrollView';
+
 export { default as LottieView } from './LottieView';
 export * from './NumberInput';
 export * from './OverlayContainer';

packages/kit/src/views/Discover/DAppIcon/index.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps, FC } from 'react';
 
-import { Box, Image } from '@onekeyhq/components';
+import { Box, Image, NetImage } from '@onekeyhq/components';
 import { CDN_PREFIX } from '@onekeyhq/components/src/utils';
 import DAppIconBG from '@onekeyhq/kit/assets/DAppIcon_bg.png';
 
@@ -77,7 +77,11 @@ const DAppIcon: FC<DAppIconProps> = ({ favicon, chain, size, ...rest }) => {
       {...rest}
     >
       <Box width={`${innerSize}px`} height={`${innerSize}px`}>
-        <Image flex={1} src={url} borderRadius={`${innerRadius}px`} />
+        <NetImage
+          uri={url}
+          size={`${innerSize}px`}
+          borderRadius={innerRadius}
+        />
         {!!chain && (
           <>
             <Image
@@ -88,14 +92,17 @@ const DAppIcon: FC<DAppIconProps> = ({ favicon, chain, size, ...rest }) => {
               height={`${size * 0.4375}px`}
               source={DAppIconBG}
             />
-            <Image
+            <Box
               position="absolute"
               bottom={`${chainIconPadding ?? 0}px`}
               right={`${chainIconPadding ?? 0}px`}
-              width={`${size * 0.2}px`}
-              height={`${size * 0.2}px`}
-              src={chainUrl(chain)}
-            />
+            >
+              <NetImage
+                width={`${size * 0.2}px`}
+                height={`${size * 0.2}px`}
+                uri={chainUrl(chain)}
+              />
+            </Box>
           </>
         )}
       </Box>

packages/kit/src/views/Discover/Home/index.tsx

@@ -15,7 +15,7 @@ import {
   Box,
   Empty,
   FlatList,
-  Image,
+  NetImage,
   Pressable,
   Spinner,
   Typography,
@@ -71,11 +71,11 @@ const Banner: FC<SectionDataType> = ({ data, onItemSelect }) => {
             borderRadius="12px"
             padding="12px"
           >
-            <Image
+            <NetImage
               width={isSmallScreen ? '270px' : `${cardWidth - 24}px`}
               height={isSmallScreen ? '134px' : '177px'}
-              src={url}
-              borderRadius="12px"
+              uri={url}
+              borderRadius={12}
             />
             <Box mt="12px" flexDirection="row" alignItems="center">
               <DAppIcon size={28} favicon={item.favicon} chain={item.chain} />

packages/kit/src/views/Help/Request/TicketDetail.tsx

@@ -7,7 +7,7 @@ import { SimpleGrid } from 'native-base';
 import { useIntl } from 'react-intl';
 import { ListRenderItem } from 'react-native';
 
-import { Box, Image, Modal, Text } from '@onekeyhq/components';
+import { Box, Modal, NetImage, Text } from '@onekeyhq/components';
 import {
   HistoryRequestModalRoutesParams,
   HistoryRequestRoutes,
@@ -44,12 +44,11 @@ const Attachment: FC<AttachmentsType> = ({ id, size }) => {
   return (
     <>
       {data.length > 0 ? (
-        <Image
+        <NetImage
           key={data}
-          width={size}
-          height={size}
-          src={data}
-          borderRadius="12px"
+          size={`${size}px`}
+          uri={data}
+          borderRadius={12}
           preview
           bgColor="surface-selected"
         />