React Native Download image from url and save in Gallery
Solution 1
You have to use camera roll.
npm install @react-native-community/cameraroll --save
react-native link @react-native-community/cameraroll
-
from:
import { CameraRoll } from "react-native";
to
import CameraRoll from "@react-native-community/cameraroll";
Solution 2
For iOS you there is no need to use fetch-blob and download it. you need to use CameraRoll from react-native and call saveToCameraRoll()
https://facebook.github.io/react-native/docs/cameraroll
import RNFetchBlob from "rn-fetch-blob";
import { CameraRoll, Platform } from "react-native";
let imgUrl = 'https://static.scientificamerican.com/sciam/cache/file/EAF12335-B807-4021-9AC95BBA8BEE7C8D_source.jpg'
let newImgUri = imgUrl.lastIndexOf('/');
let imageName = imgUrl.substring(newImgUri);
let dirs = RNFetchBlob.fs.dirs;
let path = Platform.OS === 'ios' ? dirs['MainBundleDir'] + imageName : dirs.PictureDir + imageName;
saveToGallery = () => {
if (Platform.OS == 'android') {
RNFetchBlob.config({
fileCache: true,
appendExt: 'png',
indicator: true,
IOSBackgroundTask: true,
path: path,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: path,
description: 'Image'
},
}).fetch("GET", imgUrl).then(res => {
console.log(res, 'end downloaded')
});
} else {
CameraRoll.saveToCameraRoll(imgUrl);
}
}
Related videos on Youtube
Gurbela
Favorite environment: Mobile Development. I am problem solver (task-oriented) and innovator, I also like to invent and develop original things. λ enthusiast
Updated on June 04, 2022Comments
-
Gurbela about 2 years
I want download image from URL and save in the Gallery.
This source works well on Android, but not iOS.
import RNFetchBlob from "rn-fetch-blob"; let imgUrl = 'https://static.scientificamerican.com/sciam/cache/file/EAF12335-B807-4021-9AC95BBA8BEE7C8D_source.jpg' let newImgUri = imgUrl.lastIndexOf('/'); let imageName = imgUrl.substring(newImgUri); let dirs = RNFetchBlob.fs.dirs; let path = Platform.OS === 'ios' ? dirs['MainBundleDir'] + imageName : dirs.PictureDir + imageName; RNFetchBlob.config({ fileCache: true, appendExt: 'png', indicator: true, IOSBackgroundTask: true, path: path, addAndroidDownloads: { useDownloadManager: true, notification: true, path: path, description: 'Image' }, }).fetch("GET", imgUrl).then(res => { console.log(res, 'end downloaded') });
witch one Permissions I needs for iOS, to save Photo in the Gallery?
-
Oleg over 4 years
-
Gurbela over 4 yearsI have added NSPhotoLibraryAddUsageDescription("Privacy - Photo Library Additions Usage Description") in info.plist but it's not works.
-
Oleg over 4 yearsDo you want to save to dirs['MainBundleDir'],why not Platform.OS === 'ios' ? fs.dirs.DocumentDir :
-
Gurbela over 4 yearsiOS not have dirs.PictureDir
-
-
Gurbela over 4 yearsIt doesn't work, How to send permissions request? (NSPhotoLibraryAddUsageDescription)
-
Oleg over 4 yearsWhat version of fetch blob do you use?
-
Gurbela over 4 years0.10.15, I have react-native 0.59.9
-
Oleg over 4 years
-
Gurbela over 4 yearsyes, he returned :YellowBox.js:67 Possible Unhandled Promise Rejection (id: 0): TypeError: Cannot read property 'saveToCameraRoll' of undefined
-
Oleg over 4 yearsnpm install @react-native-community/cameraroll --save
-
Oleg over 4 yearsreact-native link @react-native-community/cameraroll
-
Oleg over 4 yearsimport CameraRoll from "@react-native-community/cameraroll";
-
Oleg over 4 yearsYou have to add it
-
Luís Mestre about 4 yearsThe most recent version of CameraRoll has a function that's save instead of saveToCameraRoll
-
Burak Odabaş about 3 yearsthank you for answer. its run. However, I have one problem, when continue saving proccess, app unexpected crash exit. After that, I found solution. You should add NSPhotoLibraryAddUsageDescription("Privacy - Photo Library Additions Usage Description") in info.plist. it is IOS 11 rule.