How to check internet connection in React Native application for both iOS and Android?

When developing React Native applications, it is crucial to ensure that the app can detect the internet connection status, as this directly impacts user experience and functionality. For both iOS and Android platforms, the same approach can be used to check network connectivity. Below are the detailed steps to implement this functionality:

Step 1: Install the Dependency Library

First, install the @react-native-community/netinfo library, a recommended React Native community library for detecting network status. Use the following command:

bash
npm install --save @react-native-community/netinfo

Step 2: Link the Library (for older React Native versions)

If your React Native version is below 0.60, manually link the library. Starting from version 0.60, React Native supports automatic linking. For manual linking, run:

bash
react-native link @react-native-community/netinfo

Step 3: Use the NetInfo API

After installing and linking the library, use NetInfo to detect network status. Here is an example implementation in your React Native application:

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

// Subscribe to network status changes
const unsubscribe = NetInfo.addEventListener(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
});

// Fetch the current network status
NetInfo.fetch().then(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
});

// Unsubscribe
unsubscribe();

Example Code Explanation:

• addEventListener: This method listens for network status changes. When the status changes, it triggers the callback with the latest network information.
• fetch: This method retrieves the current network connection status. It returns a promise that can be handled using .then() to access the network state.

Important Notes:

• Always unsubscribe from event listeners when the component unmounts to prevent memory leaks.
• Given that users' network environments may change frequently, schedule network status checks at appropriate intervals and times to optimize performance and user experience.

By implementing this approach, React Native applications can effectively detect network status on both iOS and Android platforms, executing corresponding actions such as prompting users during no-connection scenarios or automatically retrying network requests upon restoration. This is essential for enhancing application robustness and user satisfaction.