I'm trying to send JSON data using react-native, axios and Expo, but when I press "Send" on my application, I get this warning:

Possible unhandled promise rejection, Error: Network Error

My API is correctly receiving the notification (JSON) when I try to send it via POSTman, but when I try to send it using axios, I get the above warning message, so maybe react is not sending the data correctly.

export default class NotificationsInput extends React.Component {

state = {
    token: '',
    title: '',
    body: ''
}

handleToken = event => {
    this.setState({ token: event.target.value })
}

handleTitle = event => {
    this.setState({ title: event.target.value })
}

handleBody = event => {
    this.setState({ body: event.target.value })
}

handleSubmit = event => {
    event.preventDefault();

    let notification = JSON.stringify({
        token: this.state.token,
        title: this.state.title,
        body: this.state.body
    })

    let headers = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

    }
    axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
        .then(res => {
            console.log(res);
            console.log(res.data)
        })
        .then(error => console.log(error));

}

render() {
    return (
        <View>
            <TextInput onChange={this.handleToken}
                style={{ height: 25, width: 200, borderColor: 'black', borderWidth: 1 }}
            />
            <TextInput onChange={this.handleTitle}
                style={{ height: 40, width: 200, borderColor: 'black', borderWidth: 1 }}
            />
            <TextInput onChange={this.handleBody}
                style={{ height: 40, width: 200, borderColor: 'black', borderWidth: 1 }}
            />
            <Button onPress={this.handleSubmit} title="Send">Send</Button>
        </View>
    )
}

}

Edit :

I added the catch() function, but the error now is only Network Error in the console.

handleSubmit = event => {
    event.preventDefault();

    let notification = JSON.stringify({
        token: this.state.token,
        title: this.state.title,
        body: this.state.body
    })

    let headers = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

    }
    axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
    .then(res => {
        console.log(res);
        console.log(res.data)
    })
    .catch(error => console.log(error));

}

I'm trying to send JSON data using react-native, axios and Expo, but when I press "Send" on my application, I get this warning:

Possible unhandled promise rejection, Error: Network Error

My API is correctly receiving the notification (JSON) when I try to send it via POSTman, but when I try to send it using axios, I get the above warning message, so maybe react is not sending the data correctly.

export default class NotificationsInput extends React.Component {

state = {
    token: '',
    title: '',
    body: ''
}

handleToken = event => {
    this.setState({ token: event.target.value })
}

handleTitle = event => {
    this.setState({ title: event.target.value })
}

handleBody = event => {
    this.setState({ body: event.target.value })
}

handleSubmit = event => {
    event.preventDefault();

    let notification = JSON.stringify({
        token: this.state.token,
        title: this.state.title,
        body: this.state.body
    })

    let headers = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

    }
    axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
        .then(res => {
            console.log(res);
            console.log(res.data)
        })
        .then(error => console.log(error));

}

render() {
    return (
        <View>
            <TextInput onChange={this.handleToken}
                style={{ height: 25, width: 200, borderColor: 'black', borderWidth: 1 }}
            />
            <TextInput onChange={this.handleTitle}
                style={{ height: 40, width: 200, borderColor: 'black', borderWidth: 1 }}
            />
            <TextInput onChange={this.handleBody}
                style={{ height: 40, width: 200, borderColor: 'black', borderWidth: 1 }}
            />
            <Button onPress={this.handleSubmit} title="Send">Send</Button>
        </View>
    )
}

}

Edit :

I added the catch() function, but the error now is only Network Error in the console.

handleSubmit = event => {
    event.preventDefault();

    let notification = JSON.stringify({
        token: this.state.token,
        title: this.state.title,
        body: this.state.body
    })

    let headers = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

    }
    axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
    .then(res => {
        console.log(res);
        console.log(res.data)
    })
    .catch(error => console.log(error));

}

• javascript
• reactjs
• react-native
• axios
• expo

• what is the warning message you are getting – aravind_reddy Commented Sep 25, 2018 at 4:25
• possible unhandled promise rejection (id: 0): Error: Network Error – Biel Borba Commented Sep 25, 2018 at 4:28
• your error suggests you are not handling the promise rejection which is to add .catch as mentioned by other users also check this :stackoverflow.com/questions/38842499/… – aravind_reddy Commented Sep 25, 2018 at 4:33
• after adding the .catch block what is the error you are getting ? – aravind_reddy Commented Sep 25, 2018 at 4:36
• only network error – Biel Borba Commented Sep 25, 2018 at 4:37

6 Answers 6

I can see you have chained two, .then which is not correct. You need a catch block to catch network errors. Take a look below

  axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
    .then(res => {
        console.log(res);
        console.log(res.data)
    })
    .catch(error => console.log(error));

Use catch instead of then for error handling.

.catch(error => console.log(error));

Solved. Changed:

return axios.get('http://localhost:3000/hello')

to:

return axios.get('http://10.0.0.2:3000/hello')

and it works. In Android emulator, the localhost refers its device.

https://github.com/facebook/react-native/issues/10404

If you have cors enabled in your backend stack,

then try replacing 127.0.0.1 with 10.0.2.2

Hope this helps.

Check again your api_url.

It should include 'http' or 'https'

If you are using a database like ngrok on your local machine, make sure that you are getting the new forwarding address after restarting the server.

Took me a while to find out why I couldn't use parts of my app all of a sudden even though my code looked fine. I restarted my ngrok server, replaced the forwarding address in my server file, and it was fixed! :)