Can't make API calls React Native

Question

I'm having a bit of trouble setting up an API call for authentication in react native. I use the following code:

fetch('http://myserver.ngrok.io/auth/login', {
        method: 'POST',
        body: {
            email: '[email protected]',
            password: 'password',
        },
    })
        .then(() => {
            this.props.navigation.navigate('Main');
        })
        .catch(() => {
            this.props.navigation.navigate('Auth');
            console.error('Request Failed');
        });

I'm using ngrok, because at first, I thought I was having issues with my android emulator/device QR scanning not being able to connect to my computer's localhost. I have tested the api call to this ngrok endpoint in postman, and it has worked perfectly. However, the above code always gives me my Request Failed.

I have tested this on both my android emulator and tunneling with my android phone via QR. Is this a syntax issue?

Use instead catch(console.log) so as to inspect and debug what error you're facing. — Nino Filiu
– Nino Filiu, Commented Jul 4, 2019 at 22:57

Nino Filiu · Accepted Answer · 2019-07-04 22:53:13Z

1

The correct way to use fetch to send JSON would be in your case:

fetch('http://myserver.ngrok.io/auth/login', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'}
  body: JSON.stringify({
    email: '[email protected]',
    password: 'password',
  }),
})

Note the JSON.stringify and the header.

Also, fetch will be successful even in case of a server error, and the user could enter invalid credentials, so check the server response before redirecting to main:

.then(resp => resp.json())
.then(data => this.props.navigation.navigate(data.correctCredentials ? 'Main' : 'Auth'))
.catch(...)

answered Jul 4, 2019 at 22:53

Nino Filiu

19k11 gold badges65 silver badges97 bronze badges

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

Collectives™ on Stack Overflow

Can't make API calls React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related