How to make localhost rest api work with react-native?

Question

I have been trying to fetch some values from my spring boot localhost restapi. It is throwing a network error. I have tried to fetch with Axios.get() too but no result.I have given CORS(origins='*') in my springboot class and method too.

async componentDidMount()
{

  const response = await fetch('http://localhost:8080/jobSeeker/allJobSeekers');  

   const body = await response.json();   

   this.setState({ users: body, isLoading: false });

   console.log(users);
}

[Unhandled promise rejection: TypeError: Network request failed]
- node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:504:29 in onerror
- node_modules\event-target-shim\lib\event-target.js:172:43 in dispatchEvent
- ... 8 more stack frames from framework internals

azundo · Accepted Answer · 2019-08-19 16:47:46Z

1

The localhost of your emulator or device is not the same as the localhost of your computer. You can map ports between the two, in this case adb reverse tcp:8080 tcp:8080 will map localhost:8080 on your emulator/device to localhost:8080 on your computer.

answered Aug 19, 2019 at 16:47

azundo

6,0521 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lokesh Ch Over a year ago

Thank you so much, brother !! Working like a charm. This is my first question in StackOverflow. You've saved my time. Thank you so much !!!

Doug Watkins Over a year ago

@Lokeshch if this answered your question, please select it as the answer.

lepe · Accepted Answer · 2019-12-28 02:00:01Z

0

For people like me who are searching for a solution (add android-dev in scripts), replace the port with your localhost port and rerun the application.

package.json file:

{
   "main": "node_modules/expo/AppEntry.js",
   "proxy": "http://localhost:8080",
   "scripts": {
   "start": "expo start",
   "android": "expo start --android",
   "ios": "expo start --ios",
   "web": "expo start --web",
   "eject": "expo eject",
   "android-dev": "adb reverse tcp:8080 tcp:8080 && react-native run- android"
}

edited Dec 28, 2019 at 2:00

lepe

25.4k9 gold badges107 silver badges119 bronze badges

answered Aug 20, 2019 at 0:45

Lokesh Ch

218 bronze badges

Comments

Harshit · Accepted Answer · 2020-05-05 17:18:49Z

0

The solution that worked for me was :

1.) Check your IPv4 address. Google on how you can get the IP address for your system.

Let the IP be: 192.168.xx.xx

2.) Replace -

const response = await fetch('http://localhost:8080/jobSeeker/allJobSeekers');

With -

const response = await fetch('http://192.168.xx.xx:8080/jobSeeker/allJobSeekers');

Notice the replacement of localhost with your IP address.

And that's it.

answered May 5, 2020 at 17:18

Harshit

11 bronze badge

Collectives™ on Stack Overflow

How to make localhost rest api work with react-native?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related