React native how to save image picked from image-picker package

Question

Hi everyone I'm trying to make an app like an album.

Simply 2 options, Open camera, Pick from library. I can capture and pick from library ( i will show it on code).

So the problem is I want to save captured or selected image in created custom folder like ('./myAlbumPhotos'). How can I make it. This showed iamges is only cached images

installed libraries

https://www.npmjs.com/package/react-native-image-crop-picker

https://www.npmjs.com/package/react-native-image-picker

AndroidManifest

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera2" android:required="true"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18" />

App.js

import React, { Component } from 'react'
import { Text, View,TouchableOpacity } from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';

export default class App extends Component {
  
  render() {
    const takePhotoFromCamera = () => {
      ImagePicker.openCamera({
        compressImageMaxWidth: 300,
        compressImageMaxHeight: 300,
        cropping: true,
        compressImageQuality: 0.7,
        saveToPhotos :true
      }).then(image => {
        console.log(image);
        setImage(image.path);
        this.bs.current.snapTo(1);
      });
    }
  
    const choosePhotoFromLibrary = () => {
      ImagePicker.openPicker({
        width: 300,
        height: 300,
        cropping: true,
        compressImageQuality: 0.7
      }).then(image => {
        console.log(image);
        setImage(image.path);
        this.bs.current.snapTo(1);
      });
    }
    return (
      <View >
 
      <TouchableOpacity  onPress={takePhotoFromCamera}>
        <Text >Take Photo</Text>
      </TouchableOpacity>
      <TouchableOpacity  onPress={choosePhotoFromLibrary}>
        <Text >Choose From Library</Text>
      </TouchableOpacity>
      <TouchableOpacity
        
        onPress={() => this.bs.current.snapTo(1)}>
        <Text >Cancel</Text>
      </TouchableOpacity>
    </View>
    )
  }
}

It logs like this

I checked it really save photos. The question is how can I give save path. With files system ? . Thank you

score 0 · Answer 1 · answered Jul 07 '21 at 11:29

I also had the same requirement with the same library that you have mentioned. Then the thing that I did was kind of a hack, but it was enough for me. So, this is just a suggestion!

Make your takePhotoFromCamera like this.

ImagePicker.openCamera({
    // It converts iOS live photo into jpg
    forceJpg: true,
    // I mean don't remove your old configs. Add this prop as well there
})

After that, in the "then" callback scope of that openCamera method, do necessaries to save your image like this React Native save base64 image to Album

React native how to save image picked from image-picker package

1 Answers1