React Native Blob fetch throws error: Failed to construct 'Response': The status provided (0) is outside the range [200, 599]

Question

I am trying to convert an image to blob for uploading it to aws s3 storage.I need to connvert image to blob after selecting the image with expo-image-picker the convert to blob using fetch but it is causing the following error.

ERROR RangeError: Failed to construct 'Response': The status provided (0) is outside the range [200, 599]., js engine: hermes

This is my current situation :

import { Button, StyleSheet, Text, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker'
export default function App() {
 const PickImage = async()=>{
 let result = await ImagePicker.launchImageLibraryAsync({
 quality:1,
 mediaTypes:ImagePicker.MediaTypeOptions.Images,
 })
 if(!result.canceled){
 let response = await fetch(result.assets[0].uri);
 let blob = await response.blob();
 
 //code to upload image
 }
 }
 return (
 <View style={styles.container}>
 <Button onPress={PickImage} title='TEST'/>
 </View>
 );
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 alignItems: 'center',
 justifyContent: 'center',
 },
});

the fetch ststement is causing error. let response = await fetch(result.assets[0].uri);

expo error

I tried to build it in expo snack and it is working fine. I am not getting any errors.but it is crashing on my local setup.

• Michael Bahl: Probably this error is related to Hermes, maybe you can legacy engine. Or try to wrap let response = await fetch(result.assets[0].uri); with try/catch block.
• Niyasin: i tried it.but it is not working. still getting error
• Staeff: Here is a github issue tracking this: github.com/facebook/react-native/issues/38625

Answer 1

I started facing this issue when I updated my targetSDK version to 33 for Android to comply with new Google Play rules.

Following the answer provided here fixed the issue for me. Here is the util function mentioned in the answer but with some explanatory comments:

/**
 * Function to convert a URI to a Blob object
 * @param {string} uri - The URI of the file
 * @returns {Promise} - Returns a promise that resolves with the Blob object
 */
export function uriToBlob(uri: string): Promise<Blob> {
 return new Promise((resolve, reject) => {
 const xhr = new XMLHttpRequest();
 // If successful -> return with blob
 xhr.onload = function () {
 resolve(xhr.response);
 };
 // reject on error
 xhr.onerror = function () {
 reject(new Error('uriToBlob failed'));
 };
 // Set the response type to 'blob' - this means the server's response 
 // will be accessed as a binary object
 xhr.responseType = 'blob';
 // Initialize the request. The third argument set to 'true' denotes 
 // that the request is asynchronous
 xhr.open('GET', uri, true);
 // Send the request. The 'null' argument means that no body content is given for the request
 xhr.send(null);
 });
};

The function works by using the XMLHttpRequest API to send an HTTP GET request to the file URI, requesting the file data. The XMLHttpRequest.responseType property is set to 'blob', so the XMLHttpRequest's response is a Blob that represents the file data.

XMLHttpRequest, is a lower-level API that can give more granular control over the request and response.

As mentioned in the linked answer fetch does not have a good way of handling local file URLs (often used in React Native) but XMLHttpRequest can handle these more gracefully.

Answer 2

I solved this by downgrading the whatwg-fetch because the new verison RN72 upgrades whatwg-fetch to 3.6.17 and causes this type of error.Need to install the version 3.6.2 by

npm install [email protected] 

or

npm install --force [email protected] 

and for me solved this error.

• Shawn: As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.