React-native-android - How to save an image to the Android file system and view in the phone's 'Gallery'

Question

Is it possible to save an image to the android's local file system so it can be viewed from the phone's 'Gallery' and in a folder??

I found this react-native-fs library but after studying the documentation and working through an example I am still unsure if it is possible.

Thanks

Meeting

Answer 1

For anyone having the same problem, here is the solution.

Solution

I am using the File System API from the react-native-fetch-blob library. This is because I tought it was way better documented and easier to understand than the 'react-native-fs' library.

I request an image from the server, receive a base64 and I then save it to the Pictures directory in the android fs.

I save the image like this:

var RNFetchBlob = require('react-native-fetch-blob').default;

const PictureDir = RNFetchBlob.fs.dirs.PictureDir;

getImageAttachment: function(uri_attachment, filename_attachment, mimetype_attachment) {

   return new Promise((RESOLVE, REJECT) => {

   // Fetch attachment
   RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
   .then((response) => {

     let base64Str = response.data;

     let imageLocation = PictureDir+'/'+filename_attachment;

     //Save image
     fs.writeFile(imageLocation, base64Str, 'base64');
     console.log("FILE CREATED!!")

     RNFetchBlob.fs.scanFile([ { path : imageLocation, mime : mimetype_attachment } ])
     .then(() => {
       console.log("scan file success")
     })
     .catch((err) => {
       console.log("scan file error")
     })

    }).catch((error) => {
    // error handling
    console.log("Error:", error)
  });
},

The following code that is in the above method refreshes the Gallery otherwise the images would not display untill the phone is turned off and back on again.

RNFetchBlob.fs.scanFile([ { path : imageLocation, mime : mimetype_attachment } ])
.then(() => {
  console.log("scan file success")
})
.catch((err) => {
  console.log("scan file error")
})

Enjoy!

Meeting

Do you know why binary always is text (base64) in React-Native? I don't get it. I don't understand programming for mobile, but I doubt Android only handles text files. Nor is Javascript limited to textfiles. So why can't I save BINARY files? – Obsequious

Hello. I got the error "RNFetchBlob.scanFile is not a function" And file stored successful. But I can't view the file on photo booth. My devices is ios simulator :/ – Takakotakakura

Answer 2

You can absolutely do this with react-native-fs. There's a PicturesDirectoryPath constant which isn't mentioned in the README for the project; if you save a file into there it should appear in the Gallery app. If you want it to appear in your own album, just make a new directory in that folder and save the file into there, eg

const myAlbumPath = RNFS.PicturesDirectoryPath + '/My Album'

RNFS.mkdir(myAlbumPath)
  .then(/* write/copy/download your image file into myAlbumPath here */)

I don't have full example code anymore sorry, because I ended storing images in my app's private cache directory instead. Hope this helps anyway!

Paronym

Thanks. I'll have a go and see what what happens. – Meeting

Hey. I am still having a lot of trouble with react-native-fs. Could you please have a look at this question if you get a chance. #38662809 – Meeting