React Native Download image from url and save in Gallery

Question

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?

Similar: https://stackoverflow.com/questions/46581830/app-crash-on-cameraroll-savetocameraroll-in-ios-in-react-native — Oleg, Oct 12 '19 at 15:16
I have added NSPhotoLibraryAddUsageDescription("Privacy - Photo Library Additions Usage Description") in info.plist but it's not works. — Gurbela, Oct 12 '19 at 15:24
Do you want to save to dirs['MainBundleDir'],why not Platform.OS === 'ios' ? fs.dirs.DocumentDir : — Oleg, Oct 12 '19 at 15:34

score 9 · Answer 1 · answered Oct 12 '19 at 15:33

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);
  }
}

The most recent version of CameraRoll has a function that's save instead of saveToCameraRoll — Luís Mestre, Jun 16 '20 at 16:20
thank 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. — Burak Odabaş, May 02 '21 at 09:40

Oleg · Accepted Answer · 2019-10-12T16:11:03.230

4

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";

edited Oct 12 '19 at 16:11

answered Oct 12 '19 at 15:44

Oleg

3,580
1
7
12

It doesn't work, How to send permissions request? (NSPhotoLibraryAddUsageDescription) – Gurbela Oct 12 '19 at 15:50
What version of fetch blob do you use? – Oleg Oct 12 '19 at 15:53
0.10.15, I have react-native 0.59.9 – Gurbela Oct 12 '19 at 15:54
Look at https://stackoverflow.com/questions/54123046/image-is-not-showing-in-the-ios-device-after-getting-downloaded-through-rn-fetch/54125033#54125033 – Oleg Oct 12 '19 at 16:03
yes, he returned :YellowBox.js:67 Possible Unhandled Promise Rejection (id: 0): TypeError: Cannot read property 'saveToCameraRoll' of undefined – Gurbela Oct 12 '19 at 16:04
npm install @react-native-community/cameraroll --save – Oleg Oct 12 '19 at 16:05
react-native link @react-native-community/cameraroll – Oleg Oct 12 '19 at 16:05
import CameraRoll from "@react-native-community/cameraroll"; – Oleg Oct 12 '19 at 16:06
You have to add it – Oleg Oct 12 '19 at 16:07
need to run pod install command for this working – priyanka Apr 12 '23 at 14:37

React Native Download image from url and save in Gallery

2 Answers2