I am working on a React Native app and there was a need to manage a Wifi network on the device. It needed to do the following,

  • Verify if the mobile WIFI is enabled or not
  • Fetch the WIFI network list
  • Connect with the selected WIFI from the list
  • Disconnect the WIFI
  • Forget the WIFI network from the mobile

Approach…

So first I looked at the React Native docs and found the NetInfo class which allows to access the Wifi on the native OS. But, when I looked at it closely, I found that it only checks the following,

  • Device is connected with internet
  • Connection type if the device is connected, otherwise ‘none’

It does not allow to manage the WIFI! Now what!

“When it’s not supported in React Native, we look at the Native OS API!”

Then I looked at what native Android integration bridges are available for wifi, and found the package react-native-android-wifi. This module requires the following permission on the Android platform, which we can configure in the AndroidManifest.xml

<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/
After installation, I have used it as following,
var wifi = require('react-native-android-wifi');
//Is the wifi is enabled or disabled?
wifi.isEnabled((isEnabled)=>{
if (isEnabled){
console.log("wifi service enabled");
}else{
console.log("wifi service is disabled");
}
});

I also wanted to forget/remove the wifi network from my mobile’s wifi network list and forcefully re-scan the wifi network list from the app itself. But, these were not implemented in the original sourcecode.

So I have added these new APIs as following, in the forked repo.

Remove / Forget the Wifi network from mobile by SSID, returns boolean

wifi.isRemoveWifiNetwork(ssid, (isRemoved) => {
console.log("Forgetting the wifi device - " + ssid);
});

Starts native Android wifi network scanning and returns list

wifi.reScanAndLoadWifiList((wifiStringList) => {
var wifiArray = JSON.parse(wifiStringList);
console.log('Detected wifi networks - ',wifiArray);
});

There are other APIs which you can check at https://github.com/BoTreeConsultingTeam/react-native-android-wifi

At BoTree Technologies, we build enterprise applications with our React Native team of 10+ engineers.

We also specialize in Ruby on Rails, Python, RPA, AI, Django, NodeJS and ReactJS.

Consulting is free – let us help you grow!