React Native NetInfo Example to Detect Internet Connection Android iOS

React Native’s NetInfo component is used to check internet connectivity status runtime in react native application. NetInfo is properly works in both android and iOS mobile platforms. Using the NetInfo component we can detect networks status like your mobile is connected to active internet connection or not and also which connection type your mobile phone is using 4G, 3G, 2G and WiFi. In this tutorial we would going to make a react native application with NetInfo Example to Detect Internet Connection in Live App mobile application in both android and iOS platforms. So let’s get started 🙂 .

What we are doing in this project: We are checking the internet connection status like device is connected to internet or not and according to that we would show a message on application screen with online and offline status text. This code runs in real time so if you minimize the app and reopen it then it will also detects internet connection in real time.

Contents in this project NetInfo Example to Detect Internet Connection in Live Mobile App in iOS Android Example Tutorial:

1. This step is very important for ANDROID applications, We need to put the ACCESS_NETWORK_STATE permission in AndroidManifest.xml file. So goto YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml and put below permission inside it. There is no configuration needed in iOS project.

2. Import StyleSheet, Text, View and NetInfo component in your project.

3. Create constructor() in your main export default class and inside the constructor() make a state named as connection_Status. This state is used to hold the connection status like Online and Offline.

4. Make a componentDidMount() inbuilt method in your class. Inside this method we would first implement the addEventListener() on the NetInfo and call the this._handleConnectivityChange function on connection change automatically. Now using the NetInfo.isConnected.fetch().done((isConnected)) we would detect the live internet connection status and if device is connected to live internet connection then set the state value.

5. Creating  componentWillUnmount() function in your class. Inside this function we would removing the listener from NetInfo using removeEventListener() method.

6. Creating the _handleConnectivityChange() function. We would calling this function each time when network connection status changed.

7. Creating a Text component inside render’s return block. In Text component we would show the connection status using State value.

8. Creating Style.

9. Complete source code for App.js File :

Screenshots in Android device:

React Native NetInfo Example to Detect Internet Connection

Screenshots in iOS device:

16 Comments

  1. Hey , You can create an example shopping cart
    thanks you !!
    You help me a lot !!

  2. very helpful actually I was looking fro something like this, I had an issue now soloved. thanks

  3. Hello Dear, your tutorials are very helpful to the new developers you are doing a great job. I need your assistance in my project.
    Actually, I want to load data from API in Flatlist using checkboxes, user will be able to select 2 or 3 listed items according to wish and on button click pass the selected items to next component thats it.
    Looking forward to your positive response
    Thank you 🙂

  4. how to create global function for check internet connection in any class i dont want write same code for every class

  5. ok , i will try

  6. netConnection = () => {
    NetInfo.isConnected.fetch().then(isConnected => {
    console.log(‘First, is ‘ + (isConnected ? ‘online’ : ‘offline’));
    return console.log(‘First, is ‘ + (isConnected ? ‘online’ : ‘offline’));
    });
    function handleFirstConnectivityChange(isConnected) {
    console.log(‘Then, is ‘ + (isConnected ? ‘online’ : ‘offline’));
    NetInfo.isConnected.removeEventListener(
    ‘connectionChange’,
    handleFirstConnectivityChange
    );
    }
    NetInfo.isConnected.addEventListener(
    ‘connectionChange’,
    handleFirstConnectivityChange
    );

    }
    i create like this in network class
    and import in main class Obj = new NetworkUtils();

    when i need to hit api before check internet then use Obj.netConnection()

    Now my question this is the right way or not

  7. thanks a lot ……………..very useful one saved lots of time

  8. Netinfo is being removed from react-native and moved to @react-native-community/netinfo. The script fails with

    Unhandled JS Exception: TypeError: Cannot read property ‘isConnected’ of undefined

    This error is located at:
    in App (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

  9. Thaaaankyou! u saved me a lot of timee too!

Leave a Reply

Your email address will not be published. Required fields are marked *