testing with fastimage for android blurry issue

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
 

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",

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}
+        <FastImage source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
-            style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
+            style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }}
+            resizeMode={FastImage.resizeMode.contain} />
       )}
 
       { state.loaded && state.controls && (

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: () => {

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);

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"