NetInfo usage pattern in React Native

Question

I'm trying to create a robust pattern in my React Native app so that if Internet connection is not there, I won't make API calls but display a "Connection lost..." message.

I created the following util function and trying to incorporate it into my API calls using fetch but it doesn't seem to hit the then block after getting a response.

Here's the function that checks the connection:

import NetInfo from "@react-native-community/netinfo";

export const isConnectedToInternet = () => {

   NetInfo.fetch().then(state => {
      return state.isConnected;
    });
};

And here's how I'm trying to use it:

import { isConnectedToInternet } from '../my-utils';

export const someApiCall = () => {

   isConnectedToInternet()
      .then(result => {

         if(result) {
          
             return (dispatch) => fetch ('https://myapi/someendpoint', fetchOptionsGet())
                               .then(response => {

                                  // Process data...
                               })
         } else {
    
             Alert.alert('No Internet connection!');
         }
   })
};

Any idea why I'm not hitting the then block or suggestions to make this a robust pattern?

`isConnectedToInternet` returns nothing from your sample – Anthony Jul 22 '20 at 17:12 — Anthony, Jul 22 '20 at 17:12

score 2 · Answer 1 · answered Jul 22 '20 at 18:04

2

If you want to have the then on your isConnectedToInternet you should then make it return a promise. Try something like this:

import NetInfo from "@react-native-community/netinfo";

export const isConnectedToInternet = () => {
    return new Promise((resolve, reject) => {
        NetInfo.fetch().then(state => {
            resolve(state.isConnected);
        }).catch(e => reject(e));
    })
};

answered Jul 22 '20 at 18:04

Bogdan

34
4

Thank you for your answer. It definitely indicates what was wrong with my code but as it turns out, it's not a good idea for me to call a function to check on Internet connection within my action that handles the API call. I did upvote your answer though. Thanks again! – Sam Jul 22 '20 at 19:21
No problem Sam. It answers your issue why .then doesn't work. However, I agree that for your case an Event Listener or a hook is a way better choice. Thanks for the upvote. – Bogdan Jul 23 '20 at 09:17

score 0 · Accepted Answer · answered Jul 22 '20 at 18:51

In mobile software, a best practice is to always try the remote API, and then handle the exception if there's no internet. The reachability APIs provided by iOS and Android are not always accurate - they need to poll to determine connectivity. So an app is better off always trying the fetch, even if it thinks the internet may be down, in case the device got connectivity restored since the last reachability check.

If you want to model some state that shows UI when the app thinks it's offline, you can do that using the NetInfo.addEventListener() function. There's a React hook for that too I think.

Thank you for this important point. Even after implementing @Bogdan's answer, I was getting a warning that "Actions must be plain objects". So `Redux` wasn't very happy about my calling another function within my action. Thanks again! — Sam, Jul 22 '20 at 19:20

NetInfo usage pattern in React Native

2 Answers2