mirror of https://github.com/tooot-app/app
94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import analytics from '@components/analytics'
|
|
import { HeaderRight } from '@components/Header'
|
|
import { StackScreenProps } from '@react-navigation/stack'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import { findIndex } from 'lodash'
|
|
import React, { useCallback, useLayoutEffect, useState } from 'react'
|
|
import { Platform, Share, StyleSheet, Text } from 'react-native'
|
|
import FastImage from 'react-native-fast-image'
|
|
import ImageViewer from 'react-native-image-zoom-viewer'
|
|
import { SharedElement } from 'react-navigation-shared-element'
|
|
|
|
export type ScreenImagesViewerProp = StackScreenProps<
|
|
Nav.RootStackParamList,
|
|
'Screen-ImagesViewer'
|
|
>
|
|
|
|
const ScreenImagesViewer = React.memo(
|
|
({
|
|
route: {
|
|
params: { imageUrls, imageIndex }
|
|
},
|
|
navigation
|
|
}: ScreenImagesViewerProp) => {
|
|
const { theme } = useTheme()
|
|
const [currentIndex, setCurrentIndex] = useState(
|
|
findIndex(imageUrls, ['imageIndex', imageIndex])
|
|
)
|
|
|
|
const onPress = useCallback(() => {
|
|
analytics('imageviewer_share_press')
|
|
switch (Platform.OS) {
|
|
case 'ios':
|
|
return Share.share({ url: imageUrls[currentIndex].url })
|
|
case 'android':
|
|
return Share.share({ message: imageUrls[currentIndex].url })
|
|
}
|
|
}, [currentIndex])
|
|
|
|
useLayoutEffect(
|
|
() =>
|
|
navigation.setOptions({
|
|
headerTitle: () => (
|
|
<Text
|
|
style={[styles.headerCenter, { color: theme.primaryOverlay }]}
|
|
>
|
|
{currentIndex + 1} / {imageUrls.length}
|
|
</Text>
|
|
),
|
|
headerRight: () => (
|
|
<HeaderRight content='Share' native={false} onPress={onPress} />
|
|
)
|
|
}),
|
|
[currentIndex]
|
|
)
|
|
|
|
const renderImage = useCallback(
|
|
prop => (
|
|
<SharedElement id={`image.${imageUrls[imageIndex].url}`}>
|
|
<FastImage {...prop} resizeMode={'contain'} />
|
|
</SharedElement>
|
|
),
|
|
[]
|
|
)
|
|
|
|
return (
|
|
<ImageViewer
|
|
index={currentIndex}
|
|
imageUrls={imageUrls}
|
|
pageAnimateTime={250}
|
|
enableSwipeDown
|
|
useNativeDriver
|
|
swipeDownThreshold={100}
|
|
renderIndicator={() => <></>}
|
|
saveToLocalByLongPress={false}
|
|
onSwipeDown={() => navigation.goBack()}
|
|
style={{ flex: 1 }}
|
|
onChange={index => index !== undefined && setCurrentIndex(index)}
|
|
renderImage={renderImage}
|
|
/>
|
|
)
|
|
},
|
|
() => true
|
|
)
|
|
|
|
const styles = StyleSheet.create({
|
|
headerCenter: {
|
|
color: 'white',
|
|
...StyleConstants.FontStyle.M
|
|
}
|
|
})
|
|
|
|
export default ScreenImagesViewer
|