React native IOS Network Error

See original GitHub issue

Describe the bug

While making any post request using Axios package. I am getting a Network error. While the same API seems to be working perfectly fine with Android devices. It is not an issue with the API.

To Reproduce

Axios post request throws a network error message. If I make the call again inside the catch block then it works fine.

axios
      .post(
        base_url + 'generatePaymentIntent',
        {
          // unit_id: 1,
          token: obj,
          order_type: 'ORD',
          order_data: {
            order_type: order_type,
            apt_id: apt_id,
          },
        },
        Loginheader,
      )
        .then(item => {
        this.setState({
          loading: false,
        });
        console.log('--------generate intent----------');
          console.log(item);
        if (item.data.code === 200) {
          const {price} = item.data.data.order_data;
          

          this.displayPaymentModal(
            'Confirm Payment',
            `Final Price: $${price}`,
            this.props.navigation,
            item.data.code,
            'Make Payment',
            item.data.data,
          );
        }
      })
      .catch(e => {
        this.setState({
          loading: false,
        });
        console.log('--------catch generate intent----------');
        // console.log(e.response);
        // const {message, code} = e.response;
        // this.retryPopup(
        //   `Error getting payment Intent`,
        //   message,
        //   '',
        //   code,
        //   'onetime',
        // );
        console.log(e.response);

        console.log(JSON.stringify(e));

        if (e.message === 'Network Error') {
          // this.makeOneTimePayment(order_type, apt_id);
          this.retryPopup(
              `Error getting payment Intent`,
              'RETRY',
              '',
              '400',
              'onetime',
            );
        }
      });

Expected behavior

It shouldn’t through network error. What should be done to fix this behavior specifically for iOS devices/simulators.

Environment

  • Axios Version [e.g. 0.19.2]
  • Additional Library Versions [e.g. React 16.9.0, React Native 0.62.2]

Additional context/Screenshots

N/A

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:14
  • Comments:65 (6 by maintainers)

github_iconTop GitHub Comments

76reactions
bruuuuuuucecommented, Nov 25, 2020

I had the same issue when doing a GET request. This was my api call that was failing on iOS devices

await axios(url, {
  method: "get",
  headers: {
    'Content-type': 'Application/json',
    Accept: 'Application/json',
    Authorization: jwt,
  },
  data: {},
})

I fixed it by changing data: {} to data: undefined. This fixed my issue on iOS. It always worked on android for me.

37reactions
exzos28commented, Apr 17, 2021

Add this to your Info.plist like this:

<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>localhost</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
		</dict>
	</dict>
Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native Axios request on iOS returns "Network Error"
"_response": "The certificate for this server is invalid. You might be connecting to a server that is pretending to be “dummyapi.io” which could ......
Read more >
React Native [AxiosError: Network Error] HTTP Fetching iOS ...
React Native cannot fetching using HTTP, so need HTTPS for fetching API. Here's some short tutorial for fix that porblem.
Read more >
React Native IOS Error - Mobile - New Relic Explorers Hub
Hello, following this documentation I have installed New Relic in our project. Unfortunately, every time there is a network error, the IOS ...
Read more >
Networking - React Native
Don't forget to catch any errors that may be thrown by fetch ... is used for network requests in a React Native application...
Read more >
React native axios suddenly giving "Error - Reddit
React native axios suddenly giving "Error : network error" on all APIs ... Both iOS & Android will block non-SSL traffic unless you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found