Fixed #116

package.json

@@ -3,7 +3,7 @@
   "versions": {
     "native": "210317",
     "major": 1,
-    "minor": 0,
+    "minor": 1,
     "patch": 0,
     "expo": "40.0.0"
   },

src/i18n/en/screens/imageViewer.json

@@ -10,8 +10,8 @@
       "cancel": "$t(common:buttons.cancel)"
     },
     "save": {
-      "function": "Saving image",
-      "success": "Image saved"
+      "succeed": "Image saved",
+      "failed": "Saving image failed"
     }
   }
 }

src/screens/ImageViewer/save.ts

@@ -1,28 +1,63 @@
 import haptics from '@components/haptics'
+import { displayMessage } from '@components/Message'
 import CameraRoll from '@react-native-community/cameraroll'
+import i18next from 'i18next'
+import { RefObject } from 'react'
+import { Platform } from 'react-native'
+import FlashMessage from 'react-native-flash-message'
 import { FileSystem, Permissions } from 'react-native-unimodules'
 
-const saveIos = async (
+type CommonProps = {
+  messageRef: RefObject<FlashMessage>
+  mode: 'light' | 'dark'
   image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
-) => {
+}
+
+const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
   CameraRoll.save(image.url)
     .then(() => {
       haptics('Success')
+      displayMessage({
+        ref: messageRef,
+        mode,
+        type: 'success',
+        message: i18next.t('screenImageViewer:content.save.succeed')
+      })
     })
     .catch(() => {
       if (image.remote_url) {
         CameraRoll.save(image.remote_url)
-          .then(() => haptics('Success'))
-          .catch(() => haptics('Error'))
+          .then(() => {
+            haptics('Success')
+            displayMessage({
+              ref: messageRef,
+              mode,
+              type: 'success',
+              message: i18next.t('screenImageViewer:content.save.succeed')
+            })
+          })
+          .catch(() => {
+            haptics('Error')
+            displayMessage({
+              ref: messageRef,
+              mode,
+              type: 'error',
+              message: i18next.t('screenImageViewer:content.save.failed')
+            })
+          })
       } else {
         haptics('Error')
+        displayMessage({
+          ref: messageRef,
+          mode,
+          type: 'error',
+          message: i18next.t('screenImageViewer:content.save.failed')
+        })
       }
     })
 }
 
-const saveAndroid = async (
-  image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
-) => {
+const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
   const fileUri: string = `${FileSystem.documentDirectory}test.jpg`
   const downloadedFile: FileSystem.FileSystemDownloadResult = await FileSystem.downloadAsync(
     image.url,
@@ -39,8 +74,35 @@ const saveAndroid = async (
   }
 
   CameraRoll.save(downloadedFile.uri)
-    .then(() => haptics('Success'))
-    .catch(() => haptics('Error'))
+    .then(() => {
+      haptics('Success')
+      displayMessage({
+        ref: messageRef,
+        mode,
+        type: 'success',
+        message: 'test'
+      })
+    })
+    .catch(() => {
+      haptics('Error')
+      displayMessage({
+        ref: messageRef,
+        mode,
+        type: 'error',
+        message: i18next.t('screenImageViewer:content.save.failed')
+      })
+    })
 }
 
-export { saveIos, saveAndroid }
+const saveImage = async (props: CommonProps) => {
+  switch (Platform.OS) {
+    case 'ios':
+      saveIos(props)
+      break
+    case 'android':
+      saveAndroid(props)
+      break
+  }
+}
+
+export default saveImage

src/screens/ImagesViewer.tsx

@@ -1,42 +1,35 @@
 import analytics from '@components/analytics'
 import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
+import { Message } from '@components/Message'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { StackScreenProps } from '@react-navigation/stack'
+import { useTheme } from '@utils/styles/ThemeManager'
 import { findIndex } from 'lodash'
-import React, { useCallback, useState } from 'react'
+import React, { RefObject, useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Share, StatusBar, View } from 'react-native'
+import FlashMessage from 'react-native-flash-message'
 import {
   SafeAreaProvider,
   useSafeAreaInsets
 } from 'react-native-safe-area-context'
 import ImageViewer from './ImageViewer/Root'
-import { saveAndroid, saveIos } from './ImageViewer/save'
-
-const saveImage = async (
-  image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
-) => {
-  switch (Platform.OS) {
-    case 'ios':
-      saveIos(image)
-      break
-    case 'android':
-      saveAndroid(image)
-      break
-  }
-}
+import saveImage from './ImageViewer/save'
 
 const HeaderComponent = React.memo(
   ({
+    messageRef,
     navigation,
     currentIndex,
     imageUrls
   }: {
+    messageRef: RefObject<FlashMessage>
     navigation: ScreenImagesViewerProp['navigation']
     currentIndex: number
     imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls']
   }) => {
     const insets = useSafeAreaInsets()
+    const { mode } = useTheme()
     const { t } = useTranslation('screenImageViewer')
     const { showActionSheetWithOptions } = useActionSheet()
 
@@ -55,7 +48,7 @@ const HeaderComponent = React.memo(
           switch (buttonIndex) {
             case 0:
               analytics('imageviewer_more_save_press')
-              saveImage(imageUrls[currentIndex])
+              saveImage({ messageRef, mode, image: imageUrls[currentIndex] })
               break
             case 1:
               analytics('imageviewer_more_share_press')
@@ -121,9 +114,13 @@ const ScreenImagesViewer = ({
     return null
   }
 
+  const { mode } = useTheme()
+
   const initialIndex = findIndex(imageUrls, ['id', id])
   const [currentIndex, setCurrentIndex] = useState(initialIndex)
 
+  const messageRef = useRef<FlashMessage>(null)
+
   return (
     <SafeAreaProvider>
       <StatusBar backgroundColor='rgb(0,0,0)' />
@@ -132,15 +129,17 @@ const ScreenImagesViewer = ({
         imageIndex={initialIndex}
         onImageIndexChange={index => setCurrentIndex(index)}
         onRequestClose={() => navigation.goBack()}
-        onLongPress={saveImage}
+        onLongPress={image => saveImage({ messageRef, mode, image })}
         HeaderComponent={() => (
           <HeaderComponent
+            messageRef={messageRef}
             navigation={navigation}
             currentIndex={currentIndex}
             imageUrls={imageUrls}
           />
         )}
       />
+      <Message ref={messageRef} />
     </SafeAreaProvider>
   )
 }