testing fast image to avoid android flicker

2025-04-25 11:05:27 +00:00 · 2025-01-17 14:12:32 -08:00 · 2025-01-17 14:12:32 -08:00 · 68e9eec1b0
commit 68e9eec1b0
parent 7b772c525f
5 changed files with 50 additions and 6 deletions
--- a/app/client/mobile/ios/Databag.xcodeproj/project.pbxproj
+++ b/app/client/mobile/ios/Databag.xcodeproj/project.pbxproj
@ -640,7 +640,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@ -724,7 +727,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
--- a/app/client/mobile/ios/Podfile.lock
+++ b/app/client/mobile/ios/Podfile.lock
@ -61,6 +61,18 @@ PODS:
  - hermes-engine (0.75.2):
    - hermes-engine/Pre-built (= 0.75.2)
  - hermes-engine/Pre-built (0.75.2)
+  - libwebp (1.3.2):
+    - libwebp/demux (= 1.3.2)
+    - libwebp/mux (= 1.3.2)
+    - libwebp/sharpyuv (= 1.3.2)
+    - libwebp/webp (= 1.3.2)
+  - libwebp/demux (1.3.2):
+    - libwebp/webp
+  - libwebp/mux (1.3.2):
+    - libwebp/demux
+  - libwebp/sharpyuv (1.3.2)
+  - libwebp/webp (1.3.2):
+    - libwebp/sharpyuv
  - nanopb (3.30910.0):
    - nanopb/decode (= 3.30910.0)
    - nanopb/encode (= 3.30910.0)
@ -1656,6 +1668,10 @@ PODS:
    - React-Core
  - RNCClipboard (1.16.0):
    - React-Core
+  - RNFastImage (8.6.3):
+    - React-Core
+    - SDWebImage (~> 5.11.1)
+    - SDWebImageWebPCoder (~> 0.8.4)
  - RNFBApp (21.6.2):
    - Firebase/CoreOnly (= 11.5.0)
    - React-Core
@ -1828,6 +1844,12 @@ PODS:
    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
    - Yoga
+  - SDWebImage (5.11.1):
+    - SDWebImage/Core (= 5.11.1)
+  - SDWebImage/Core (5.11.1)
+  - SDWebImageWebPCoder (0.8.5):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.10)
  - SocketRocket (0.7.0)
  - TOCropViewController (2.7.4)
  - Yoga (0.0.0)
@ -1906,6 +1928,7 @@ DEPENDENCIES:
  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
  - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
+  - RNFastImage (from `../node_modules/react-native-fast-image`)
  - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
  - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
  - RNFS (from `../node_modules/react-native-fs`)
@ -1927,8 +1950,11 @@ SPEC REPOS:
    - FirebaseMessaging
    - GoogleDataTransport
    - GoogleUtilities
+    - libwebp
    - nanopb
    - PromisesObjC
+    - SDWebImage
+    - SDWebImageWebPCoder
    - SocketRocket
    - TOCropViewController

@ -2076,6 +2102,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/rn-fetch-blob"
  RNCClipboard:
    :path: "../node_modules/@react-native-clipboard/clipboard"
+  RNFastImage:
+    :path: "../node_modules/react-native-fast-image"
  RNFBApp:
    :path: "../node_modules/@react-native-firebase/app"
  RNFBMessaging:
@ -2112,6 +2140,7 @@ SPEC CHECKSUMS:
  GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
  GoogleUtilities: 26a3abef001b6533cf678d3eb38fd3f614b7872d
  hermes-engine: 3b6e0717ca847e2fc90a201e59db36caf04dee88
+  libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
  nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
  PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
  RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
@ -2179,6 +2208,7 @@ SPEC CHECKSUMS:
  ReactCommon: 8da2bad9c1e5901f7b5484e42e59578edeece142
  rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
  RNCClipboard: 88f7f4933e7731052210d77535560c485ecb75b0
+  RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
  RNFBApp: c0543476dee81ed5fc34d06db2f37b8e7e353cf3
  RNFBMessaging: aab4dcf6d121cfe338c9ac45631d90e125b3a5ef
  RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
@ -2188,6 +2218,8 @@ SPEC CHECKSUMS:
  RNScreens: 16b782596e80e475b7f3ec769c9a97d789d9b0ed
  RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
  RNVectorIcons: 7b81882e9c9369031aede0016dee0fe415cf2f43
+  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
+  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
  SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
  TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
  Yoga: c6584ec444ef4aee46e0575049f90cd2aab1e6ed
--- a/app/client/mobile/package.json
+++ b/app/client/mobile/package.json
@ -32,6 +32,7 @@
    "react-native": "0.75.2",
    "react-native-create-thumbnail": "^2.0.1",
    "react-native-document-picker": "^9.3.1",
+    "react-native-fast-image": "^8.6.3",
    "react-native-file-type": "^1.0.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.19.0",
--- a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
+++ b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
@ -6,6 +6,7 @@ import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './ImageAsset.styled'
 import {BlurView} from '@react-native-community/blur';
 import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
+import FastImage from 'react-native-fast-image'

 export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
  const { state, actions } = useImageAsset(topicId, asset);
@ -64,10 +65,9 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
          )}
          { state.dataUrl && (
            <ReactNativeZoomableView width={state.width} height={state.height} minZoom={1} maxZoom={30}>
-              <Image
-                width={state.width}
-                height={state.height}
-                resizeMode="contain"
+              <FastImage
+                style={{ width: state.width, height: state.height }}
+                resizeMode={FastImage.resizeMode.contain}
                onError={actions.failed}
                source={{ uri: state.dataUrl }}
                onLoad={()=>setCleared(true)}
--- a/app/client/mobile/yarn.lock
+++ b/app/client/mobile/yarn.lock
@ -7952,6 +7952,11 @@ react-native-elevation@^1.0.0:
  resolved "https://registry.yarnpkg.com/react-native-elevation/-/react-native-elevation-1.0.0.tgz#2a091c688290ac9b08b5842d1a8e8a00fc84233e"
  integrity sha512-BWIKcEYtzjRV6GpkX0Km5/w2E7fgIcywiQOT7JZTc5NSbv/YI9kpFinB9lRFsOoRVGmiqq/O3VfP/oH2clIiBA==

+react-native-fast-image@^8.6.3:
+  version "8.6.3"
+  resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz#6edc3f9190092a909d636d93eecbcc54a8822255"
+  integrity sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==
+
 react-native-file-type@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/react-native-file-type/-/react-native-file-type-1.0.0.tgz#08c4749a96e2def6fb4e749f2fe19b6bbeeb1710"