react-native-image-viewing icon indicating copy to clipboard operation
react-native-image-viewing copied to clipboard

Possibility to Save an Image

Open L-U-C-K-Y opened this issue 2 years ago • 1 comments

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

L-U-C-K-Y avatar Apr 04 '23 14:04 L-U-C-K-Y

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 ( <View style={styles.container}> <TouchableOpacity onPress={() => setImageViewVisible(true)}> <Image source={{ uri: imageUrl }} style={styles.image} /> </TouchableOpacity>

  <ImageView
    images={[{ uri: imageUrl }]}
    imageIndex={0}
    visible={isImageViewVisible}
    onRequestClose={() => setImageViewVisible(false)}
    FooterComponent={({ imageIndex }) => (
      <TouchableOpacity onPress={handleDownloadImage}>
        <Text style={styles.downloadButton}>Download</Text>
      </TouchableOpacity>
    )}
  />
</View>

); };

export default YourComponent;

thongle12 avatar Aug 01 '23 07:08 thongle12