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 ViewToken
} from 'react-native' } from 'react-native'
import FlashMessage from 'react-native-flash-message' 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 { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom'
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context' import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
import saveImage from './ImageViewer/save' import saveImage from './ImageViewer/save'
@ -93,6 +98,8 @@ const ScreenImagesViewer = ({
}) => { }) => {
const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT
const imageRatio = item.width && item.height ? item.width / item.height : 1 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 maxWidthScale = item.width ? (item.width / SCREEN_WIDTH / PixelRatio.get()) * 4 : 0
const maxHeightScale = item.height ? (item.height / 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} blurhash={item.blurhash}
dimension={{ dimension={{
width: width:
screenRatio > imageRatio ? (item.height || 100) / screenRatio : SCREEN_WIDTH, screenRatio > imageRatio
? (SCREEN_HEIGHT / imageHeight) * imageWidth
: SCREEN_WIDTH,
height: height:
screenRatio > imageRatio ? SCREEN_HEIGHT : (item.width || 100) * screenRatio screenRatio > imageRatio
? SCREEN_HEIGHT
: (SCREEN_WIDTH / imageWidth) * imageHeight
}} }}
/> />
</View> </View>
@ -161,66 +172,71 @@ const ScreenImagesViewer = ({
onPress={onPress} onPress={onPress}
/> />
</View> </View>
<LongPressGestureHandler <FlingGestureHandler
onEnded={() => { direction={Directions.DOWN}
analytics('imageviewer_more_press') numberOfPointers={1}
showActionSheetWithOptions( onEnded={() => navigation.goBack()}
{
options: [
t('content.options.save'),
t('content.options.share'),
t('content.options.cancel')
],
cancelButtonIndex: 2,
userInterfaceStyle: mode
},
async buttonIndex => {
switch (buttonIndex) {
case 0:
analytics('imageviewer_more_save_press')
saveImage({
messageRef,
theme,
image: imageUrls[currentIndex]
})
break
case 1:
analytics('imageviewer_more_share_press')
switch (Platform.OS) {
case 'ios':
await Share.share({ url: imageUrls[currentIndex].url })
break
case 'android':
await Share.share({
message: imageUrls[currentIndex].url
})
break
}
break
}
}
)
}}
> >
<ZoomFlatList <LongPressGestureHandler
ref={listRef} onEnded={() => {
data={imageUrls} analytics('imageviewer_more_press')
pagingEnabled showActionSheetWithOptions(
horizontal {
keyExtractor={item => item.id} options: [
renderItem={renderItem} t('content.options.save'),
onViewableItemsChanged={onViewableItemsChanged} t('content.options.share'),
viewabilityConfig={{ t('content.options.cancel')
itemVisiblePercentThreshold: 50 ],
cancelButtonIndex: 2,
userInterfaceStyle: mode
},
async buttonIndex => {
switch (buttonIndex) {
case 0:
analytics('imageviewer_more_save_press')
saveImage({
messageRef,
theme,
image: imageUrls[currentIndex]
})
break
case 1:
analytics('imageviewer_more_share_press')
switch (Platform.OS) {
case 'ios':
await Share.share({ url: imageUrls[currentIndex].url })
break
case 'android':
await Share.share({
message: imageUrls[currentIndex].url
})
break
}
break
}
}
)
}} }}
initialScrollIndex={initialIndex} >
getItemLayout={(_, index) => ({ <ZoomFlatList
length: SCREEN_WIDTH, data={imageUrls}
offset: SCREEN_WIDTH * index, pagingEnabled
index horizontal
})} keyExtractor={item => item.id}
/> renderItem={renderItem}
</LongPressGestureHandler> onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}
initialScrollIndex={initialIndex}
getItemLayout={(_, index) => ({
length: SCREEN_WIDTH,
offset: SCREEN_WIDTH * index,
index
})}
/>
</LongPressGestureHandler>
</FlingGestureHandler>
<Message ref={messageRef} /> <Message ref={messageRef} />
</SafeAreaProvider> </SafeAreaProvider>
) )