diff --git a/src/screens/ImagesViewer.tsx b/src/screens/ImagesViewer.tsx
index 59b9ad42..b47fba77 100644
--- a/src/screens/ImagesViewer.tsx
+++ b/src/screens/ImagesViewer.tsx
@@ -1,14 +1,13 @@
import analytics from '@components/analytics'
-import { HeaderCenter, HeaderRight } from '@components/Header'
+import { HeaderRight } from '@components/Header'
import { useActionSheet } from '@expo/react-native-action-sheet'
import { StackScreenProps } from '@react-navigation/stack'
import CameraRoll from '@react-native-community/cameraroll'
-import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { findIndex } from 'lodash'
-import React, { useCallback, useLayoutEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { PermissionsAndroid, Platform, Share, StyleSheet } from 'react-native'
+import { PermissionsAndroid, Platform, Share } 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'
@@ -19,135 +18,122 @@ export type ScreenImagesViewerProp = StackScreenProps<
'Screen-ImagesViewer'
>
-const ScreenImagesViewer = React.memo(
- ({
- route: {
- params: { imageUrls, imageIndex }
- },
- navigation
- }: ScreenImagesViewerProp) => {
- const { theme } = useTheme()
- const [currentIndex, setCurrentIndex] = useState(
- findIndex(imageUrls, ['imageIndex', imageIndex])
- )
-
- const hasAndroidPermission = async () => {
- const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
-
- const hasPermission = await PermissionsAndroid.check(permission)
- if (hasPermission) {
- return true
- }
-
- const status = await PermissionsAndroid.request(permission)
- return status === 'granted'
- }
- const saveImage = async () => {
- if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
- return
- }
- CameraRoll.save(
- imageUrls[imageIndex].originUrl ||
- imageUrls[imageIndex].remote_url ||
- imageUrls[imageIndex].preview_url
- )
- .then(() =>
- toast({ type: 'success', message: t('content.save.success') })
- )
- .catch(() =>
- toast({
- type: 'error',
- message: t('common:toastMessage.error.message', {
- function: t('content.save.function')
- })
- })
- )
- }
-
- const { t } = useTranslation('screenImageViewer')
- const { showActionSheetWithOptions } = useActionSheet()
- const onPress = useCallback(() => {
- analytics('imageviewer_more_press')
- showActionSheetWithOptions(
- {
- options: [
- t('content.options.save'),
- t('content.options.share'),
- t('content.options.cancel')
- ],
- cancelButtonIndex: 2
- },
- async buttonIndex => {
- switch (buttonIndex) {
- case 0:
- analytics('imageviewer_more_save_press')
- saveImage()
- break
- case 1:
- analytics('imageviewer_more_share_press')
- switch (Platform.OS) {
- case 'ios':
- return Share.share({ url: imageUrls[currentIndex].url })
- case 'android':
- return Share.share({ message: imageUrls[currentIndex].url })
- }
- break
- }
- }
- )
- }, [currentIndex])
-
- useLayoutEffect(
- () =>
- navigation.setOptions({
- headerTitle: `${currentIndex + 1} / ${imageUrls.length}`,
- headerTintColor: theme.primaryOverlay,
- headerRight: () => (
-
- )
- }),
- [currentIndex]
- )
-
- const renderImage = useCallback(
- prop => (
-
-
-
- ),
- []
- )
-
- return (
- <>>}
- saveToLocalByLongPress={false}
- onSwipeDown={() => navigation.goBack()}
- style={{ flex: 1 }}
- onChange={index => index !== undefined && setCurrentIndex(index)}
- renderImage={renderImage}
- onLongPress={saveImage}
- />
- )
+const ScreenImagesViewer = ({
+ route: {
+ params: { imageUrls, imageIndex }
},
- () => true
-)
+ navigation
+}: ScreenImagesViewerProp) => {
+ const { theme } = useTheme()
+ const [currentIndex, setCurrentIndex] = useState(
+ findIndex(imageUrls, ['imageIndex', imageIndex])
+ )
-const styles = StyleSheet.create({
- headerCenter: {
- color: 'white',
- ...StyleConstants.FontStyle.M
+ const hasAndroidPermission = async () => {
+ const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
+
+ const hasPermission = await PermissionsAndroid.check(permission)
+ if (hasPermission) {
+ return true
+ }
+
+ const status = await PermissionsAndroid.request(permission)
+ return status === 'granted'
}
-})
+ const saveImage = async () => {
+ if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
+ return
+ }
+ CameraRoll.save(
+ imageUrls[imageIndex].originUrl ||
+ imageUrls[imageIndex].remote_url ||
+ imageUrls[imageIndex].preview_url
+ )
+ .then(() =>
+ toast({ type: 'success', message: t('content.save.success') })
+ )
+ .catch(() =>
+ toast({
+ type: 'error',
+ message: t('common:toastMessage.error.message', {
+ function: t('content.save.function')
+ })
+ })
+ )
+ }
+
+ const { t } = useTranslation('screenImageViewer')
+ const { showActionSheetWithOptions } = useActionSheet()
+ const onPress = useCallback(() => {
+ analytics('imageviewer_more_press')
+ showActionSheetWithOptions(
+ {
+ options: [
+ t('content.options.save'),
+ t('content.options.share'),
+ t('content.options.cancel')
+ ],
+ cancelButtonIndex: 2
+ },
+ async buttonIndex => {
+ switch (buttonIndex) {
+ case 0:
+ analytics('imageviewer_more_save_press')
+ saveImage()
+ break
+ case 1:
+ analytics('imageviewer_more_share_press')
+ switch (Platform.OS) {
+ case 'ios':
+ return Share.share({ url: imageUrls[currentIndex].url })
+ case 'android':
+ return Share.share({ message: imageUrls[currentIndex].url })
+ }
+ break
+ }
+ }
+ )
+ }, [currentIndex])
+
+ useEffect(
+ () =>
+ navigation.setOptions({
+ headerTitle: `${currentIndex + 1} / ${imageUrls.length}`,
+ headerTintColor: theme.primaryOverlay,
+ headerRight: () => (
+
+ )
+ }),
+ [currentIndex]
+ )
+
+ const renderImage = useCallback(
+ prop => (
+
+
+
+ ),
+ []
+ )
+
+ return (
+ <>>}
+ saveToLocalByLongPress={false}
+ onSwipeDown={() => navigation.goBack()}
+ onChange={index => index && setCurrentIndex(index)}
+ renderImage={renderImage}
+ />
+ )
+}
export default ScreenImagesViewer