expo: Network request failed using fetch

I found that by setting the “Content-Type” header on the fetch request (in my case to “application/json”) fixes this issue.

fetch('https://some.url/something', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        ...authorizationHeaders,
      },
      body: JSON.stringify({
        'something': 'hi',
        'something_else': 'hey',
      })
    })
    .then((response) => response.json())
    .then((json) => {
        console.log(json);
    })

I have the same issue … It was working previously … Here my code :

formData.append('files[]', {
        uri: this.state.picture, 			// this is the path to your file. see Expo ImagePicker or React Native ImagePicker
        type: `image/jpeg`,  // example: image/jpg
        name: `upload.jpg`    // example: upload.jpg
});

          fetch(GLOBAL.domain + '/file/upload/' + json.referral._key + '/datasets/pictures', {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'multipart/form-data',
              'X-Session-Id': self.props.route.params.token
            },
            body: formData
          })
          .then((response) => response.json())
          .then((json_picture) => {
            console.log(json_picture)
            self.setState({ uploading: false, account_created: true })
          })
          .catch((error) => {
            console.error(error);
          });

and here the result

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

@byCedric You’re so nice. Thanks for the quick response. My issue is fixed now. All I did was to restart my computer and reset expo caching. I’ve have honestly no idea what would cause this.

Me too. I installed a new expo project to test by using expo init but I’ve got the same error. there is my App.js code :

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  fetch("192.168.1.53:5000").then(()=>{console.log("success");}).catch((err)=>{console.log(err);})
  return (
    <View style={styles.container}>
      <Text>Network request test</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

here is the result of promise catch :

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

Hi @nimabrownlee! It’s unfortunate that the error stack isn’t helpful here. I’ve looked around in the React Native repository too, and it looks like it might be related to a regression issue from whatwg-fetch. It seems that the Content-Type header sometimes isn’t sent with the request, which causes the request to fail randomly (but only in React Native).

These threads might help:

• https://github.com/facebook/react-native/issues/30176
• https://github.com/github/fetch/issues/823

For now, I’ll mark this issue as upstream. It seems like this is coming from React Native itself. If you are able to, could you create a small example where this consistently happens? That would be extremely helpful for us, so we can focus on fixing this. You should be able to use any public API, like https://httpbin.org/anything, with fake bearer tokens.

Hope this helps!

For my case, the 'Content-Type': 'application/json' bit worked. What the heck??