Detect Network Status in React native

Introduction

React Native is a popular framework for building cross-platform mobile apps using JavaScript and React. One of the challenges of developing mobile apps is dealing with network connectivity. Sometimes, the network may be unavailable, slow, or unstable, which can affect the user experience and functionality of the app. Therefore, it is important to detect the network status and react accordingly in our app.

To detect the network status in React Native, we can use a library called @react-native-community/netinfo. This library provides an API to access information about the device’s network state, such as whether it is connected, what type of connection it has (wifi, cellular, etc.), and other details. We can use this library to get the network state once or subscribe to network state updates and receive callbacks when the state changes.

Installation (@react-native-community/netinfo)

To use @react-native-community/netinfo in our React Native project, we need to install it using npm or yarn. We can run the following command in our project directory:

Manual Linking in iOS

1. Open your project in Xcode and go to the project navigator.
2. Right-click on the Libraries folder and select Add Files to [your project name].
3. Navigate to node_modules/@react-native-community/netinfo/ios and select RNCNetInfo.xcodeproj.
4. Click on Add.
5. Go to your project’s Build Phases and expand the Link Binary With Libraries section.
6. Click on the + button and select libRNCNetInfo.a from the list.
7. Click on Add.
8. Run your project.

Manual Linking in Android

1. Open your project in Android Studio and go to the project view. Expand the android/app/src/main/java/[...]/MainApplication.java file and add the following import statement at the top:

2. In the same file, find the getPackages() method and add the following line inside the List:

3. Expand the android/settings.gradle file and add the following lines at the end:

4. Expand the android/app/build.gradle file and find the dependencies section. Add the following line inside the dependencies section:

5. Run your project.

Get the Network State Once

To get the network state once in our app, we can use the fetch method from @react-native-community/netinfo. This method returns a promise that resolves to an object containing information about the network state. The object has the following properties:

type: The type of connection that is currently active. Possible values are: none, unknown, cellular, wifi, bluetooth, ethernet, wimax, vpn, or other. isConnected: A boolean value indicating whether the device is connected to a network or not. isInternetReachable: A boolean value indicating whether the device can access the internet or not. details: An object containing more details about the connection type. The properties of this object depend on the connection type. For example, for cellular connections, it may have properties like cellularGeneration, carrier, or isRoaming. We can use the fetch method as follows:

Subscribe and Unsubscribe to Network State Updates

To subscribe and unsubscribe to network state updates in our app, we can use the addEventListener and removeEventListener methods from @react-native-community/netinfo. These methods allow us to register and unregister callbacks that will be invoked whenever the network state changes.

The callback function receives an object containing information about the network state as a parameter. The object has the same properties as described in the previous section.

We can use these methods as follows:

Note that we need to store the return value of addEventListener() in a variable (in this case, unsubscribe) and call it when we want to unsubscribe from the updates. Alternatively, we can use a useEffect hook in our functional component to subscribe and unsubscribe automatically when the component mounts and unmounts.

Make a React Native App to Check and Display Network Status with Code Example

To demonstrate how to use @react-native-community/netinfo in a React Native app, we will make a simple app that checks and displays the network status on the screen. The app will have a text component that shows the connection type and a color indicator that shows whether the device is connected, internet reachable, or disconnected.

To make this app, we will use the following steps:

1. Create a new React Native project using npx react-native init NetworkStatusApp.
2. Install and link @react-native-community/netinfo using the instructions from the previous sections.
3. Open the App.js file and import the necessary modules:

4. Define some colors for the indicator:

5. Define a functional component called NetworkStatus that will display the network status on the screen:

6. Define some styles for the components:

7. Render the NetworkStatus component in the App component:

8. Run the app on an emulator or a device and test the network status detection.