How to save a Picture to a specific folder from React Native Camera Roll

Question

So I'm using Expo's Camera API to take a picture, like so:

takePicture = async function() {
  if(this.camera) {
    this.camera.takePictureAsync().then(data => {
        CameraRoll.saveToCameraRoll(data.uri);
    }).then(() => {
      this.setState({
        photoId: this.state.photoId + 1,
      });
    });
  }
};

Now, I'd like to specifically retrieve the pictures I take with this app to work with later. I figure an easy way to do this would be if the app saved its pictures to a separate folder in the camera roll, much like how Instagram makes its own folder in there.

How would I go about having the app create its own folder in the camera roll, and then saving pictures to it?

score 2 · Answer 1 · answered Apr 28 '18 at 21:57

2

On Android, you can use react-native-fetch-blob and its File System Access API (PictureDir constant).

For example, I do:

try {
    const data = await this.camera.takePictureAsync()
    await RNFetchBlob.fs.mkdir(`${RNFetchBlob.fs.dirs.PictureDir}/myfolder`)
    await RNFetchBlob.fs.mv(
        data.api, 
        `${RNFetchBlob.fs.dirs.PictureDir}/myfolder/${moment().unix()}.jpg`
    )
} catch () {
    ...
}

https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API

answered Apr 28 '18 at 21:57

Julien Malige

2,457
16
36

i am also using RNFetchBlob but data.api is not returned by takePictureAsync method.. I want to store an image taken from Camera in a desired folder inside Picture Dir. – ZainNazirButt Oct 04 '18 at 15:52
@ZainNazirButt, please describe your issue in a new stack question, I (and the community) will try to help you. – Julien Malige Oct 04 '18 at 17:50
@JulienMalige Thanks a lot. Your suggestion using react-native-fetch-blob and the File System Access API helped me. – Dror Bar Feb 10 '19 at 07:49

score 0 · Answer 2 · answered May 14 '21 at 11:45

You can also see the answer here. Because here is same question asked https://stackoverflow.com/a/67533729/10361123

I know that I am too late for this answer.

You can simply use below npm package for get your desired output

npm i @react-native-community/cameraroll

and after that you have to use below code in try catch block so you can easily store your image on your desired path.

   try{
        CameraRoll.save(data.uri,{type:"photo",album:"../your folder name"}).
                    then((res)=>{console.log("save img...",res);}).
                    catch((err)=>{console.log("err for save img...",err);})
    }
    catch{
      //your code...
    }

How to save a Picture to a specific folder from React Native Camera Roll

2 Answers2

Linked