save images

app.json

@@ -34,6 +34,14 @@
             "deploymentTarget": "15.0"
           }
         }
+      ],
+      [
+        "expo-media-library",
+        {
+          "photosPermission": "Allow Memmy App to access your photos.",
+          "savePhotosPermission": "Allow Memmy App to save photos.",
+          "isAccessMediaLocationEnabled": true
+        }
       ]
     ],
     "android": {

components/ui/ContentView.tsx

@@ -4,7 +4,7 @@ import { Icon, Pressable, Text, View, VStack } from "native-base";
 import { Dimensions, StyleSheet } from "react-native";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { BlurView } from "expo-blur";
-import FastImage from "react-native-fast-image";
+import FastImage, { OnLoadEvent } from "react-native-fast-image";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Ionicons } from "@expo/vector-icons";
 import { ExtensionType, getLinkInfo } from "../../helpers/LinkHelper";
@@ -34,6 +34,7 @@ function ContentView({
 
   const body = truncate ? truncatePost(post.post.body, 200) : post.post.body;
   const [imageViewOpen, setImageViewOpen] = useState(false);
+  const [imageUri, setImageUri] = useState("");
 
   const onImagePress = () => {
     setImageViewOpen(true);

components/ui/image/ImageView.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { ImageDetail } from "@dreamwalk-os/react-native-image-modal";
 import { Dimensions, Share } from "react-native";
+import { useToast } from "native-base";
 import ImageViewFooter from "./ImageViewFooter";
+import downloadAndSaveImage from "../../../helpers/ImageHelper";
 
 interface ImageViewProps {
   source: string;
@@ -10,12 +12,20 @@ interface ImageViewProps {
 }
 
 function ImageView({ source, setIsOpen, isOpen }: ImageViewProps) {
+  const toast = useToast();
+
   const onClose = () => {
     setIsOpen(false);
   };
 
-  const onSave = () => {};
+  const onSave = () => {
+    toast.show({
+      title: "Image saved",
+      duration: 3000,
+    });
 
+    downloadAndSaveImage(source);
+  };
   const onShare = () => {
     Share.share({
       url: source,

helpers/ImageHelper.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as FileSystem from "expo-file-system";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as Permissions from "expo-permissions";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as MediaLibrary from "expo-media-library";
+
+const downloadAndSaveImage = async (src: string): Promise<boolean> => {
+  const fileName = src.split("/").pop();
+  const filePath = FileSystem.documentDirectory + fileName;
+
+  try {
+    const { status } = await Permissions.askAsync(
+      Permissions.MEDIA_LIBRARY_WRITE_ONLY
+    );
+
+    if (status === "granted") {
+      const res = await FileSystem.downloadAsync(src, filePath);
+      saveImage(res.uri);
+      return true;
+    }
+
+    return false;
+  } catch (e) {
+    console.log(e);
+    return false;
+  }
+};
+
+const saveImage = async (filePath: string) => {
+  try {
+    MediaLibrary.saveToLibraryAsync(filePath).then();
+  } catch (e) {
+    console.log("Error: ", e);
+  }
+};
+
+export default downloadAndSaveImage;

package.json

@@ -27,8 +27,10 @@
     "expo-build-properties": "~0.6.0",
     "expo-constants": "~14.2.1",
     "expo-dev-client": "~2.2.1",
+    "expo-file-system": "~15.2.2",
     "expo-linking": "~4.0.1",
     "expo-media-library": "~15.2.3",
+    "expo-permissions": "~14.1.1",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.2",
     "expo-system-ui": "~2.2.1",

yarn.lock

@@ -5144,6 +5144,11 @@ [email protected]:
     compare-versions "^3.4.0"
     invariant "^2.2.4"
 
+expo-permissions@~14.1.1:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-14.1.1.tgz#6fc4ec5caf712df3ff2d9b7b831a6d9116f1d2b8"
+  integrity sha512-hOuAOBz+ZLsSJ3E8Ere/oA7YIYLNGf9fCApTi9OQmeJyCBsBHynf1yqMfVVpuDcCMixZ2XzsWlScq75f+7U1dQ==
+
 expo-splash-screen@~0.18.1:
   version "0.18.2"
   resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.18.2.tgz#dde246204da875785ba40c7143a70013cdefdbb6"