Try adding fling gesture handler

This commit is contained in:
xmflsct 2022-09-14 22:44:48 +02:00
parent 9b4b575291
commit ddd1879e48
1 changed files with 77 additions and 61 deletions

View File

@ -18,7 +18,12 @@ import {
ViewToken
} from 'react-native'
import FlashMessage from 'react-native-flash-message'
import { LongPressGestureHandler } from 'react-native-gesture-handler'
import {
Directions,
FlingGestureHandler,
LongPressGestureHandler,
State
} from 'react-native-gesture-handler'
import { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom'
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
import saveImage from './ImageViewer/save'
@ -93,6 +98,8 @@ const ScreenImagesViewer = ({
}) => {
const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT
const imageRatio = item.width && item.height ? item.width / item.height : 1
const imageWidth = item.width || 100
const imageHeight = item.height || 100
const maxWidthScale = item.width ? (item.width / SCREEN_WIDTH / PixelRatio.get()) * 4 : 0
const maxHeightScale = item.height ? (item.height / SCREEN_WIDTH / PixelRatio.get()) * 4 : 0
@ -116,9 +123,13 @@ const ScreenImagesViewer = ({
blurhash={item.blurhash}
dimension={{
width:
screenRatio > imageRatio ? (item.height || 100) / screenRatio : SCREEN_WIDTH,
screenRatio > imageRatio
? (SCREEN_HEIGHT / imageHeight) * imageWidth
: SCREEN_WIDTH,
height:
screenRatio > imageRatio ? SCREEN_HEIGHT : (item.width || 100) * screenRatio
screenRatio > imageRatio
? SCREEN_HEIGHT
: (SCREEN_WIDTH / imageWidth) * imageHeight
}}
/>
</View>
@ -161,6 +172,11 @@ const ScreenImagesViewer = ({
onPress={onPress}
/>
</View>
<FlingGestureHandler
direction={Directions.DOWN}
numberOfPointers={1}
onEnded={() => navigation.goBack()}
>
<LongPressGestureHandler
onEnded={() => {
analytics('imageviewer_more_press')
@ -203,7 +219,6 @@ const ScreenImagesViewer = ({
}}
>
<ZoomFlatList
ref={listRef}
data={imageUrls}
pagingEnabled
horizontal
@ -221,6 +236,7 @@ const ScreenImagesViewer = ({
})}
/>
</LongPressGestureHandler>
</FlingGestureHandler>
<Message ref={messageRef} />
</SafeAreaProvider>
)