From 68e9eec1b0dce2e49fe9dd74c99d8d5ef541fd39 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Fri, 17 Jan 2025 14:12:32 -0800 Subject: [PATCH] testing fast image to avoid android flicker --- .../ios/Databag.xcodeproj/project.pbxproj | 10 ++++-- app/client/mobile/ios/Podfile.lock | 32 +++++++++++++++++++ app/client/mobile/package.json | 1 + .../src/message/imageAsset/ImageAsset.tsx | 8 ++--- app/client/mobile/yarn.lock | 5 +++ 5 files changed, 50 insertions(+), 6 deletions(-) diff --git a/app/client/mobile/ios/Databag.xcodeproj/project.pbxproj b/app/client/mobile/ios/Databag.xcodeproj/project.pbxproj index 6ca731db..e83f7151 100644 --- 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; diff --git a/app/client/mobile/ios/Podfile.lock b/app/client/mobile/ios/Podfile.lock index 3ca7c07b..f64e48f3 100644 --- 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 diff --git a/app/client/mobile/package.json b/app/client/mobile/package.json index 3997fa3f..d2fe6e30 100644 --- 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", diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx index 9dd26bb2..2c4bd3ae 100644 --- 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 && ( - setCleared(true)} diff --git a/app/client/mobile/yarn.lock b/app/client/mobile/yarn.lock index 53339be5..92fc0b34 100644 --- 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"