React Native expo: Reading an Image file from android

Question

I am using this line to read the image in base64 :

const base64_image = await FileSystem.readAsStringAsync(image, { encoding: 'base64' })

The image variable is the uri that I have got from the ImagePicker library. This is the code snippet for that:

const pickImage = async () => {
        let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (permissionResult.granted === false) {
            alert("Permission to access camera roll is required!");
            return;
        } else {
            let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.All,
                allowsEditing: true,
                aspect: [4, 3],
                quality: 1,
            });
            if (!result.cancelled) {
                setImage(result.uri);
            }
        }
    }

setImage is a function from useState that sets the image state. This is working fine and I am getting the uri.

I am facing no problems at all with this method on ios. It is working and I am able to retrieve the image and change it to base 64 string.

The problem is on android, I am always getting the following error:

[Error: Location 'file:///data/user/0/host.exp.exponent/cache/ImagePicker/976e1b20-9fa9-4f80-9e0e-7bee580f0749.jpeg' isn't readable.]

The location for some reason seems is not readable. What could be problem, given that it is working on ios?

I tried different functions from the expo-file-system library, but the only method to retrieve images from the device is using FileSystem.readAsStringAsync which is not serving the purpose

Answer 1

You should build an apk version and tested. It is very possible that it is an issue with ExpoGo. It will works fine outside of ExpoGo. Run this on terminal

eas build:configure

Then change your eas.json on project root as follows

{
  "cli": {
    "version": ">= 2.1.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

Then run this on terminal

eas build -p android --profile preview

Check eas build guide for detail

Answer 2

You can simply enable base64 and ImagePicker handle it for you.

let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.All,
                allowsEditing: true,
                aspect: [4, 3],
                quality: 1,
                //image data result will contain base64 data
                base64:true
            });