jobtoday / react-native-image-viewing

Tiny, purely TS, modal component for viewing images 🏙
https://exp.host/@antonkalinin/react-native-image-viewing
MIT License
880 stars 287 forks source link

Possibility to Save an Image #185

Open L-U-C-K-Y opened 1 year ago

L-U-C-K-Y commented 1 year ago

Hi all

Thanks for this library!

I was wondering how to save an image to the photo gallery. I saw that there is a onLongPress prop that we could set.

Are there any recommendations on how to save it and ask for permissions in the next step?

Thank you

thongle12 commented 1 year ago

IDK the package support it?

My solution is

import React, { useState } from 'react'; import { View, Image, TouchableOpacity, Text, StyleSheet } from 'react-native'; import ImageView from "react-native-image-viewing"; import RNFetchBlob from 'rn-fetch-blob';

const YourComponent = () => { const imageUrl = 'URL_OF_YOUR_IMAGE'; const [isImageViewVisible, setImageViewVisible] = useState(false);

const handleDownloadImage = async () => { try { const res = await RNFetchBlob.config({ fileCache: true, appendExt: 'png', }).fetch('GET', imageUrl);

  const savedImagePath = res.path();
  console.log('Image downloaded to:', savedImagePath);
} catch (error) {
  console.error('Error downloading image:', error);
}

};

return (

setImageViewVisible(true)}> setImageViewVisible(false)} FooterComponent={({ imageIndex }) => ( Download )} />

); };

export default YourComponent;