Question 305780 in React native Question posted in
The official React Native documentation can be found here.

React Native: Issue with Fetch API – Unable to Retrieve Data from Server

I’m facing an issue with fetching data from a server in my React Native project. I’ve been using the Fetch API to make a simple GET request, but I’m unable to retrieve the data. Here’s a snippet of my code:

import React, { useEffect } from 'react';

export default function MyComponent() {
  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      console.log('Data:', data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  return (
    // My component JSX here
  );
}

I’ve confirmed that the API endpoint is accessible and returns valid JSON when accessed through a browser or tools like Postman. However, when I run this code in my React Native app, the data variable remains undefined, and I don’t see any errors in the console.

Could someone please review my code and suggest potential reasons why the Fetch API might not be working as expected in a React Native environment? Any guidance or troubleshooting tips would be greatly appreciated. Thank you!

Tags:

2

Answers


  1. 0

    try adding the header info:

    
 const response = await fetch(`https://api.example.com/data`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
    const resData = await response.json()
    Login or Signup to reply.
  2. 0 
    Make that the programme has the appropriate permissions on the network. Verify that you have the required rights to access the internet in your Info.plist for iOS or AndroidManifest.xml file for Android.
You should have something akin to this in your AndroidManifest.xml file for 

Android : <uses-permission android:name="android.permission.INTERNET" />

It may be necessary for you to enable connections to your API under the App Transport Security (ATS) settings for iOS. Make sure to look for any ATS-related entries in your Info.plist file.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    console.log('Response status:', response.status);
    
    const data = await response.json();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search