Try out live text view

ios/Podfile.lock

@@ -416,6 +416,8 @@ PODS:
     - React-Core
   - react-native-language-detection (0.1.0):
     - React
+  - react-native-live-text-image-view (0.4.0):
+    - React-Core
   - react-native-netinfo (9.3.6):
     - React-Core
   - react-native-pager-view (6.0.1):
@@ -642,6 +644,7 @@ DEPENDENCIES:
   - react-native-context-menu-view (from `../node_modules/react-native-context-menu-view`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-language-detection (from `../node_modules/react-native-language-detection`)
+  - react-native-live-text-image-view (from `../node_modules/react-native-live-text-image-view`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - "react-native-paste-input (from `../node_modules/@mattermost/react-native-paste-input`)"
@@ -790,6 +793,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-image-picker"
   react-native-language-detection:
     :path: "../node_modules/react-native-language-detection"
+  react-native-live-text-image-view:
+    :path: "../node_modules/react-native-live-text-image-view"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-pager-view:
@@ -909,6 +914,7 @@ SPEC CHECKSUMS:
   react-native-context-menu-view: b0beca02aad4bd9f9d7d932bf437e0a03baa69ef
   react-native-image-picker: 4bc9ed38c8be255b515d8c88babbaf74973f91a8
   react-native-language-detection: 0e43195ad014974f1b7a31b64820eff34a243f2d
+  react-native-live-text-image-view: 483bacfdba464162b8cf176bba555364f18b584c
   react-native-netinfo: f80db8cac2151405633324cb645c60af098ee461
   react-native-pager-view: 3051346698a0ba0c4e13e40097cc11b00ee03cca
   react-native-paste-input: 183ad7dc224e192719616f4258dde5b548627d08

package.json

@@ -79,6 +79,7 @@
     "react-native-htmlview": "^0.16.0",
     "react-native-image-picker": "^4.10.0",
     "react-native-language-detection": "^0.1.0",
+    "react-native-live-text-image-view": "^0.4.0",
     "react-native-pager-view": "^6.0.1",
     "react-native-reanimated": "^2.12.0",
     "react-native-reanimated-zoom": "^0.3.1",

src/screens/ImagesViewer.tsx

@@ -22,6 +22,7 @@ import {
   FlingGestureHandler,
   LongPressGestureHandler
 } from 'react-native-gesture-handler'
+import { LiveTextImageView } from 'react-native-live-text-image-view'
 import { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import saveImage from './ImageViewer/save'
@@ -115,20 +116,22 @@ const ScreenImagesViewer = ({
                 justifyContent: 'center'
               }}
             >
-              <GracefullyImage
+              <LiveTextImageView>
-                uri={{ preview: item.preview_url, remote: item.remote_url, original: item.url }}
+                <GracefullyImage
-                blurhash={item.blurhash}
+                  uri={{ preview: item.preview_url, remote: item.remote_url, original: item.url }}
-                dimension={{
+                  blurhash={item.blurhash}
-                  width:
+                  dimension={{
-                    screenRatio > imageRatio
+                    width:
-                      ? (SCREEN_HEIGHT / imageHeight) * imageWidth
+                      screenRatio > imageRatio
-                      : SCREEN_WIDTH,
+                        ? (SCREEN_HEIGHT / imageHeight) * imageWidth
-                  height:
+                        : SCREEN_WIDTH,
-                    screenRatio > imageRatio
+                    height:
-                      ? SCREEN_HEIGHT
+                      screenRatio > imageRatio
-                      : (SCREEN_WIDTH / imageWidth) * imageHeight
+                        ? SCREEN_HEIGHT
-                }}
+                        : (SCREEN_WIDTH / imageWidth) * imageHeight
-              />
+                  }}
+                />
+              </LiveTextImageView>
             </View>
           }
         />

yarn.lock

@@ -7069,6 +7069,11 @@ react-native-language-detection@^0.1.0:
   resolved "https://registry.yarnpkg.com/react-native-language-detection/-/react-native-language-detection-0.1.0.tgz#06b5d20bffb60dbbd599c8e62b6acf500952afa8"
   integrity sha512-26CLndVMmMbVp40Y9Herza73nfR08JFTcYkJ3MX5MIQbGRoqgNAG89z8pA1y7dPHHK1Nfa6AWKAYpNv7tMRCaw==
 
+react-native-live-text-image-view@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-live-text-image-view/-/react-native-live-text-image-view-0.4.0.tgz#d23d5850788609fd1448533213fc6c453c584761"
+  integrity sha512-PhVFE0YogSLrTlnHIxUWL80CrmbDvxk1JvLx4UHiRHRwLda4dV/e/9Q+Pyh7Vq7qwAPE6vGoN6sjbXNaj4WCew==
+
 react-native-pager-view@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.0.1.tgz#353abf38d3c2b91ed7c586f10af0f94700f5b1dc"