How to save image to Camera Roll using Expo?

Question

I'm creating an app using Expo to take picture, I'm already possible to save pictures to FileSystem.documentDirectory, but this is not what I want.

I tried to save image to Camera Roll using code like this:

import { CameraRoll } from 'react-native';
...
...
await CameraRoll.saveToCameraRoll(photo.uri);

But it's returning a warning me to use react-native-cameraroll instead of react-native. But as I see in the document of the react-native-cameraroll, it's seems not supporting Expo.

Is there any way to save image to Camera Roll in Expo?

Because `react-native-cameraroll` need to `react-native link` on the setup, so I supposed that won't be able be done, the directory structure are different. But I didn't tried, it just didn't make sense to me. — Lai32290, Jan 08 '20 at 19:04

score 26 · Accepted Answer · answered Jan 06 '20 at 15:48

26

I found the solution to this, instead of using CameraRoll you can use MediaLibrary to MediaLibrary.saveToLibraryAsync(localUri)

More details on the documentation

answered Jan 06 '20 at 15:48

Lai32290

8,062
19
65
99

1

Thank you so much mate! Just saved my life here! – David Cian Jan 08 '20 at 00:29
You're welcome! it works pretty well, Expo is amazing! – Lai32290 Jan 08 '20 at 19:05
5

Thanks! Why the hell this is not documented on the expo camera docs page. everything I need is somehow not documented – Marc Jan 19 '20 at 19:15
1

I also encountered the same problem for at least two hours. Thanks to this answer it's sorted. – Mutai Mwiti Feb 04 '20 at 16:34
I'm so glad that this answer is helping someone. – Lai32290 Feb 06 '20 at 23:21
I am also trying to save an image locally, I am using an expo image picker to take a picture, after that I am following MediaLibrary.saveToLibraryAsync(localUri) to save images locally, my question is where the image is saving? Here is my expo link https://snack.expo.io/@mamun_121/testing_snack – Mamunur Rashid Mar 24 '21 at 09:24
@MamunurRashid, I'm not sure, if you're asking for the path in the device, I think it depends on the OS, usually Android has folder where contains all the CameraRoll medias, I'm not familiar with iOS, but probably has something similar. – Lai32290 Mar 25 '21 at 01:07

score 1 · Answer 2 · answered Jan 08 '23 at 21:57

Sometimes documents assume that we know more.

Please refer the following code snapshot.

const downloadPhoto = async (photoUrl) =>{
    const fileName = photoUrl.replace(/^.*[\\\/]/, '');
    let imageFullPathInLocalStorage = FileSystem.documentDirectory+fileName;
    return new Promise(async (resolve)=>{
        FileSystem.downloadAsync(
            photoUrl,
            imageFullPathInLocalStorage
        )
        .then(async ({ uri }) => {
            MediaLibrary.saveToLibraryAsync(imageFullPathInLocalStorage);
            return resolve(imageFullPathInLocalStorage);
        })
    });
  }

You should specify the local file URI to save the downloaded file.

How to save image to Camera Roll using Expo?

2 Answers2