testing with fastimage for android blurry issue

2025-02-11 19:19:16 +00:00 · 2023-05-04 12:30:02 -07:00 · 2023-05-04 12:30:02 -07:00 · 6e86ec125d
commit 6e86ec125d
parent b4d15fce99
6 changed files with 41 additions and 4 deletions
--- a/app/mobile/ios/Podfile.lock
+++ b/app/mobile/ios/Podfile.lock
@ -64,6 +64,15 @@ PODS:
  - hermes-engine/Pre-built (0.71.3)
  - JitsiWebRTC (106.0.0)
  - libevent (2.1.12)
+  - libwebp (1.2.4):
+    - libwebp/demux (= 1.2.4)
+    - libwebp/mux (= 1.2.4)
+    - libwebp/webp (= 1.2.4)
+  - libwebp/demux (1.2.4):
+    - libwebp/webp
+  - libwebp/mux (1.2.4):
+    - libwebp/demux
+  - libwebp/webp (1.2.4)
  - nanopb (2.30909.0):
    - nanopb/decode (= 2.30909.0)
    - nanopb/encode (= 2.30909.0)
@ -441,6 +450,10 @@ PODS:
    - React-Core
  - RNDeviceInfo (10.4.0):
    - React-Core
+  - RNFastImage (8.6.3):
+    - React-Core
+    - SDWebImage (~> 5.11.1)
+    - SDWebImageWebPCoder (~> 0.8.4)
  - RNFBApp (17.2.0):
    - Firebase/CoreOnly (= 10.5.0)
    - React-Core
@ -496,6 +509,12 @@ PODS:
    - React-Core
  - RNVectorIcons (9.2.0):
    - React-Core
+  - 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)
  - TOCropViewController (2.6.1)
  - Yoga (1.14.0)

@ -549,6 +568,7 @@ DEPENDENCIES:
  - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
+  - 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`)
@ -573,8 +593,11 @@ SPEC REPOS:
    - GoogleUtilities
    - JitsiWebRTC
    - libevent
+    - libwebp
    - nanopb
    - PromisesObjC
+    - SDWebImage
+    - SDWebImageWebPCoder
    - TOCropViewController

 EXTERNAL SOURCES:
@ -672,6 +695,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/@react-native-clipboard/clipboard"
  RNDeviceInfo:
    :path: "../node_modules/react-native-device-info"
+  RNFastImage:
+    :path: "../node_modules/react-native-fast-image"
  RNFBApp:
    :path: "../node_modules/@react-native-firebase/app"
  RNFBMessaging:
@ -711,6 +736,7 @@ SPEC CHECKSUMS:
  hermes-engine: 38bfe887e456b33b697187570a08de33969f5db7
  JitsiWebRTC: f441eb0e2d67f0588bf24e21c5162e97342714fb
  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
  nanopb: b552cce312b6c8484180ef47159bc0f65a1f0431
  PromisesObjC: ab77feca74fa2823e7af4249b8326368e61014cb
  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
@ -754,6 +780,7 @@ SPEC CHECKSUMS:
  rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
  RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd
  RNDeviceInfo: 749f2e049dcd79e2e44f134f66b73a06951b5066
+  RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
  RNFBApp: 4f8ea53443d52c7db793234d2398a357fc6cfbf1
  RNFBMessaging: c686471358d20d54f716a8b7b7f10f8944c966ec
  RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
@ -763,6 +790,8 @@ SPEC CHECKSUMS:
  RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
  RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
+  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
+  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
  TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
  Yoga: 5ed1699acbba8863755998a4245daa200ff3817b

--- a/app/mobile/package.json
+++ b/app/mobile/package.json
@ -31,6 +31,7 @@
    "react-native-create-thumbnail": "^1.6.4",
    "react-native-device-info": "^10.4.0",
    "react-native-document-picker": "^8.1.3",
+    "react-native-fast-image": "^8.6.3",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-image-crop-picker": "^0.39.0",
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@ -3,6 +3,7 @@ import { useImageAsset } from './useImageAsset.hook';
 import { styles } from './ImageAsset.styled';
 import Colors from 'constants/Colors';
 import Ionicons from 'react-native-vector-icons/AntDesign';
+import FastImage from 'react-native-fast-image'

 export function ImageAsset({ asset, dismiss }) {
  const { state, actions } = useImageAsset(asset);
@ -10,8 +11,9 @@ export function ImageAsset({ asset, dismiss }) {
  return (
    <TouchableOpacity style={styles.container} activeOpacity={1} onPress={actions.showControls}>
      { state.url && (
-        <Image source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
-            style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
+        <FastImage source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
+            style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }}
+            resizeMode={FastImage.resizeMode.contain} />
      )}

      { state.loaded && state.controls && (
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
@ -61,7 +61,7 @@ export function useImageAsset(asset) {

  const actions = {
    loaded: (e) => {
-      const { width, height } = e.nativeEvent.source;
+      const { width, height } = e.nativeEvent;
      updateState({ loaded: true, imageRatio: width / height });
    },
    failed: () => {
--- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
@ -285,7 +285,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
          const asset = assets[cur];
          if (asset.encrypted) {
            const ext = asset.type === 'video' ? '.mp4' : asset.type === 'audio' ? '.mp3' : '';
-            const path = RNFS.TemporaryDirectoryPath + `/${i}.asset${ext}`;
+            const path = RNFS.DocumentDirectoryPath + `/${i}.asset${ext}`;
            const exists = await RNFS.exists(path);
            if (exists) {
              RNFS.unlink(path);
--- a/app/mobile/yarn.lock
+++ b/app/mobile/yarn.lock
@ -6332,6 +6332,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-fs@^2.20.0:
  version "2.20.0"
  resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"