react native api calls using axios

Question

I have nodeJs back end where i have created this api

app.post("/addInvoice", (req, res) => {
  let invoice = req.body;
  var sql =
    "INSERT INTO invoice (address, email, billnumber, price, status) VALUES(?, ?, ?, ?, 'sent');";
  mysqlConnection.query(
    sql,
    [
      invoice.address,
      invoice.customeremail,
      invoice.billnumber,
      invoice.totalprice,
    ],
    (err, rows, fields) => {
      if (!err) {
        res.send(rows);
      } else {
        res.send(err);
      }
    }
  );
});

when I call this API using post man it works perfectly.

but now i need to call it on buttonclick from my react-native app.

axios
      .post("http://localhost:3000/addInvoice", {
        address: address,
        customeremail: email,
        billnumber: invoicenumber,
        totalprice: totalPrice,
      })
      .then((response) => {
        alert(response);
      });

I nothing happens when I send this and the alert(responce) returns nothing.

what could be the problem?

try this: then((response) => { console.log(response); }).catch((error)=> console.log("error",error), what will be logged??? — Zahra Mirali
– Zahra Mirali, Commented Sep 19, 2020 at 11:57
I think it has something to do with the app being run on my cell phone -> a different url should be used? — jayzee
– jayzee, Commented Sep 19, 2020 at 12:09

Zahra Mirali · Accepted Answer · 2020-09-19 12:10:49Z

2

Your Emulator (or Phone) is a device on it's own that is not running on the same IP(localhost or 127.0.0.1) as your web browser, postman or your server.

In order to make request to your server from your emulator (or phone) you need to access your server via your computer IP Address: On windows get your IP Address by running ipconfig on the command prompt, or maybe here: system preferences > Network > Advanced > TCP/IP > IPv4 Address.

Instead of http://localhost:port you should use http://your_ip_address:port

edited Sep 19, 2020 at 12:10

answered Sep 19, 2020 at 12:09

Zahra Mirali

5553 silver badges11 bronze badges

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

8 Comments

jayzee Over a year ago

yes exactly but im scanning a QR code and testing the app on my cell phone

jayzee Over a year ago

okay it worked i put my IP address instead. THANKS a lot but i have a question, if i want to send the project to someone else he should change the url in the whole code? or is there a solution?

Zahra Mirali Over a year ago

if he is your coworker and you want to send him both backend and frontend, he can change the IP address, but if you want to send your application to somebody to test it, no he should not change the IP, solution: 1.your pc should be turn on when he is testing your app (otherwise your application can not call the Api) 2. deploy your nodeJs back end to a server and replace "localhost" with the server address

jayzee Over a year ago

hello again, i'm sorry for bothering you but can you help me with one more small issue in react native?

Zahra Mirali Over a year ago

sure, if I be able to answer :)

|

Collectives™ on Stack Overflow

react native api calls using axios

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related