React Native expo-image-picker does not working all phone

Question

I am using expo-image-picker and if I select an image in android emulator and save it, I cannot see the image I saved from emulator when I enter the program with my real device. In other words, with whichever device I save the picture, it only appears on that device. It does not appear on other devices. How can I solve this?

I am using API for database operations (with axios)

Here is the code

const PickImage = async () => {
allowPhotoRequests()

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

if (!result.cancelled) {
   setImage(result.uri) // I think I have to do something here
}

Submit code:

 const addPet = async () => {
try {
  petApi.post('/', {
    userId: userId,
    Age: age,
    Weight: weight,
    userName: currentUser,
    userPhone: currentUserPhone,
    petImage: image,
    city: city,
    district: district
  })
    .then(function (response) {
      alert('Success!')
    })
}
catch (error) {
  console.log(error);
}

}

Example image output:

file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540yas1nkiziltas%252FPettyApp/ImagePicker/cb2923b3-5de8-4692-8244-0ce9b987001a.jpg

Answer 1

You are saving the petImage in your patApi database for a specific userId. On any device, to get that image, you need to fetch this data again, I don't see you fetching this image data back after you post it. This is the part you are missing.

Answer 2

There are 2 ways you can solve this problem as you're using this Expo:

1. Submit image data as base64
2. Review that backend API support BLOB and you can fetch BLOB with code below.

 const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", [YOUR_FILE_PATH_URI], true);
    xhr.send(null);
  });

// Use blob after fetch
console.log(blob)

// We're done with the blob, close and release it
blob.close();