React Native wifi hotspot

In this article, I will explain how to access system wifi hotspot settings from our application.

hotspot users

In application, I used one third-party plugin for access hotspot settings in my app.

Once you created application install this plugin.

npm i --save react-native-wifi-hotspot
OR
yarn add react-native-wifi-hotspot

Link with native modules

react-native link react-native-wifi-hotspot

If above code throw error, do not worry, just type below the line in your terminal.

react-native link 

Once it is successfully linked, you should do the following steps.

1. In your android/settings.gradle add below lines

include ':hotspotmanager'
project(':hotspotmanager').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wifi-hotspot/android/hotspotmanager')

2. It needs some permissions to access your system hotspot. So add below line in your AndroidManifest.xml file.

<uses-permission android:name="android.permission.WRITE_SETTINGS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />

3. I faced one error while I ran my application. That error is, It was not updated properly MainApplication.java. Please ensure below code is in your application properly.

On top, where imports are:

import reactnative.hotspot.HotspotPackage;

Add the HotspotPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new HotspotPackage()
    );
}

Ok Cool, installation part is finished. Then run the application it will work successfully.

How does this application work?

Watch the above video.

Operations can perform using in this plugin:

1. Enable hotspot
2. Disable hotspot
3. Create hotspot(SSID, password)
4. Fetch
5. PeersList

Oh! friend, please wait now I will come to the point.

import Hotspot from "react-native-wifi-hotspot";

Enable operation

doEnable = () => {
    // console.warn("do Enable called");
    Hotspot.enable(
      () => {
        ToastAndroid.show("Hotspot Enable", ToastAndroid.SHORT);
      },
      err => {
        ToastAndroid.show(err.toString(), ToastAndroid.SHORT);
      }
    );
  };

Disable operation

doDisable = () => {
    Hotspot.disable(
      () => {
        ToastAndroid.show("Hotspot Disabled", ToastAndroid.SHORT);
      },
      err => {
        ToastAndroid.show(err.toString(), ToastAndroid.SHORT);
      }
    );
  };

Create Operation

//Create your hotspot
//This work succesfully once you enable hotspot. Otherwise it throw errors
  onCreate = () => {
    Hotspot.create(
      this.state,
      () => {
        ToastAndroid.show("Hotspot Established", ToastAndroid.SHORT);
        this.props.navigation.pop();
      },
      err => {
        ToastAndroid.show(err.toString(), ToastAndroid.SHORT);
      }
    );
  };

Set your SSID name and password in your state.

this.state = {
      SSID: "",
      password: ""
    };

Fetch Operation

Using fetch operation, we can get SSID and password.

doFetch = () => {
    Hotspot.getConfig(
      config => {
        ToastAndroid.show(config.ssid, ToastAndroid.SHORT);
      },
      err => {
        ToastAndroid.show(err.toString(), ToastAndroid.SHORT);
      }
    );
  };

PeersList Operation

//get peers
  doPeers = () => {
    Hotspot.peersList(
      data => {
        const peers = JSON.parse(data);
      },
      err => {
        ToastAndroid.show(err.toString(), ToastAndroid.SHORT);
      }
    );
  };

Hey friend, if you something cannot understand properly, I attached git link below for my code. I feel it may help you.

Thank you for reading this. Have a great day!

EdisonDevadoss/react-native-wifi-hotspot-manager

Plugin which I used in this application

https://github.com/assemmohamedali/react-native-wifi-hotspot