Try out live text view

This commit is contained in:
xmflsct 2022-10-30 17:42:57 +01:00
parent d203c00279
commit 82be585a5b
4 changed files with 29 additions and 14 deletions

View File

@ -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

View File

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

View File

@ -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
uri={{ preview: item.preview_url, remote: item.remote_url, original: item.url }}
blurhash={item.blurhash}
dimension={{
width:
screenRatio > imageRatio
? (SCREEN_HEIGHT / imageHeight) * imageWidth
: SCREEN_WIDTH,
height:
screenRatio > imageRatio
? SCREEN_HEIGHT
: (SCREEN_WIDTH / imageWidth) * imageHeight
}}
/>
<LiveTextImageView>
<GracefullyImage
uri={{ preview: item.preview_url, remote: item.remote_url, original: item.url }}
blurhash={item.blurhash}
dimension={{
width:
screenRatio > imageRatio
? (SCREEN_HEIGHT / imageHeight) * imageWidth
: SCREEN_WIDTH,
height:
screenRatio > imageRatio
? SCREEN_HEIGHT
: (SCREEN_WIDTH / imageWidth) * imageHeight
}}
/>
</LiveTextImageView>
</View>
}
/>

View File

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