Fixed #311

src/screens/ImagesViewer.tsx

@@ -19,26 +19,28 @@ import {
 import ImageViewer from './ImageViewer/Root'
 import saveImage from './ImageViewer/save'
 
-const HeaderComponent = React.memo(
+const ScreenImagesViewer = ({
-  ({
+  route: {
-    messageRef,
+    params: { imageUrls, id }
-    navigation,
+  },
-    currentIndex,
+  navigation
-    imageUrls
+}: RootStackScreenProps<'Screen-ImagesViewer'>) => {
-  }: {
+  if (imageUrls.length === 0) {
-    messageRef: RefObject<FlashMessage>
+    navigation.goBack()
-    navigation: NativeStackNavigationProp<
+    return null
-      RootStackParamList,
+  }
-      'Screen-ImagesViewer'
+
-    >
-    currentIndex: number
-    imageUrls: RootStackParamList['Screen-ImagesViewer']['imageUrls']
-  }) => {
   const insets = useSafeAreaInsets()
+
   const { mode, theme } = useTheme()
   const { t } = useTranslation('screenImageViewer')
-    const { showActionSheetWithOptions } = useActionSheet()
 
+  const initialIndex = imageUrls.findIndex(image => image.id === id)
+  const [currentIndex, setCurrentIndex] = useState(initialIndex)
+
+  const messageRef = useRef<FlashMessage>(null)
+
+  const { showActionSheetWithOptions } = useActionSheet()
   const onPress = useCallback(() => {
     analytics('imageviewer_more_press')
     showActionSheetWithOptions(
@@ -74,6 +76,53 @@ const HeaderComponent = React.memo(
   }, [currentIndex])
 
   return (
+    <SafeAreaProvider>
+      <StatusBar hidden />
+      <ImageViewer
+        images={imageUrls}
+        imageIndex={initialIndex}
+        onImageIndexChange={index => setCurrentIndex(index)}
+        onRequestClose={() => navigation.goBack()}
+        onLongPress={() => {
+          analytics('imageviewer_more_press')
+          showActionSheetWithOptions(
+            {
+              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
+              }
+            }
+          )
+        }}
+        HeaderComponent={() => (
           <View
             style={{
               flex: 1,
@@ -102,45 +151,6 @@ const HeaderComponent = React.memo(
               onPress={onPress}
             />
           </View>
-    )
-  },
-  (prev, next) => prev.currentIndex === next.currentIndex
-)
-
-const ScreenImagesViewer = ({
-  route: {
-    params: { imageUrls, id }
-  },
-  navigation
-}: RootStackScreenProps<'Screen-ImagesViewer'>) => {
-  if (imageUrls.length === 0) {
-    navigation.goBack()
-    return null
-  }
-
-  const { theme } = useTheme()
-
-  const initialIndex = imageUrls.findIndex(image => image.id === id)
-  const [currentIndex, setCurrentIndex] = useState(initialIndex)
-
-  const messageRef = useRef<FlashMessage>(null)
-
-  return (
-    <SafeAreaProvider>
-      <StatusBar hidden />
-      <ImageViewer
-        images={imageUrls}
-        imageIndex={initialIndex}
-        onImageIndexChange={index => setCurrentIndex(index)}
-        onRequestClose={() => navigation.goBack()}
-        onLongPress={image => saveImage({ messageRef, theme, image })}
-        HeaderComponent={() => (
-          <HeaderComponent
-            messageRef={messageRef}
-            navigation={navigation}
-            currentIndex={currentIndex}
-            imageUrls={imageUrls}
-          />
         )}
       />
       <Message ref={messageRef} />