Internet Network Check

In this story, we simply going to handle internet availability validation

Internet check

As one of my team member (Tamil Prakash) had solved me this need for one of our client’s projects. This story is to make him feel proud of his work.

Our Problem

In React-native, we face a problem. That we need to switch the Error screen when the internet is turned on or off. I threw this problem to my team and they made me feel proud of their solution.

First, we need to install react-native-community/NetInfo

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

Next start jump into our code,

1. Import the package in your class,

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

2. Create a class and export it, We name it here as NetworkManager

class NetworkManagerClass {
}
const NetworkManager = new NetworkManagerClass(); //singleton object
export default NetworkManager;

3. Declare some variables to take over the control of internet coverage inside the constructor.

constructor() {
    this.IsInternetAvailable = true; // internet avail bool
    this.ConnectionType = undefined; // Wifi or mobile data
    this._listeners = []; // internet change callbacks
    this.Initialize();
}

4. Declare a function, We named it as Initialize and add a listener inside it.

Initialize()
{
  NetInfo.addEventListener((connectionInfo)=>                        {this.ConnectionChanged(connectionInfo)});
  this.CheckAndUpdateConnection();
}

5. Now we need to create an async function for the background change on the internet.

async CheckAndUpdateConnection()
{
  let connectionInfo = await NetInfo.fetch();
  this.IsInternetAvailable = connectionInfo.isInternetReachable;
  this.ConnectionType = connectionInfo.type;
  return this.IsInternetAvailable;
}

6. Now Create another function for Registering connection callback

RegisterConnectionChangeCallback(event)
{
  this._listeners.push(event);
}

7. Create another function for the Connection Changed event.

ConnectionChanged(connectionInfo)
{
this.IsInternetAvailable = connectionInfo.isInternetReachable;
this.ConnectionType = connectionInfo.type;
for(var i = 0; i < this.Listeners.length; i++)
  {
   this._listeners[i](this.IsInternetAvailable,   this.ConnectionType);
  }
}

Now your final code looks like this,

import NetInfo from '@react-native-community/netinfo';
class NetworkManagerClass {
  constructor() {
   this.IsInternetAvailable = true; // internet avail bool
   this.ConnectionType = undefined; // Wifi or mobile data
   this._listeners = [];  // register for callbacks
   this.Initialize();
 }
 Initialize()
 {
  NetInfo.addEventListener((connectionInfo)=>{this.ConnectionChanged(connectionInfo)});
  this.CheckAndUpdateConnection();
 }
  async CheckAndUpdateConnection()
 {
  let connectionInfo = await NetInfo.fetch();
  this.IsInternetAvailable = connectionInfo.isInternetReachable;
  this.ConnectionType = connectionInfo.type;
  return this.IsInternetAvailable;
 }
RegisterConnectionChangeCallback(event)
{
  this._listeners.push(event);
}
ConnectionChanged(connectionInfo)
{
  this.IsInternetAvailable = connectionInfo.isInternetReachable;
  this.ConnectionType = connectionInfo.type;
  for(var i = 0; i < this.Listeners.length; i++)
  {
   this._listeners[i](this.IsInternetAvailable, this.ConnectionType);
  }
 }
}
const NetworkManager = new NetworkManagerClass();
export default NetworkManager;

8. Now import and use this class with ease in your component.

Finally, we got this,

I hope it will be helpful to you, All credits to my team.

Thanks from,

Build for Billions