A WiFi connection manager for React Native
Java JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
android Creating more friendly names Jan 19, 2016
.gitignore first commit Jan 19, 2016
LICENSE first commit Jan 19, 2016
README.md Updating description and details Jan 19, 2016
package.json Updating keywords Jan 19, 2016
wifimanager.js first commit Jan 19, 2016

README.md

WiFi Manager for React Native (react-native-wifi-manager)

npm version

List, connect and get the status of the WiFi connection on the device.

Installation

First you need to install react-native-wifi-manager:

npm install react-native-wifi-manager --save
  • In android/app/src/main/AndroidManifest.xml add these permissions inside <manifest/>.
<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.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  • In android/setting.gradle
...
include ':WifiManager', ':app'
project(':WifiManager').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wifi-manager/android')
  • In android/app/build.gradle
...
dependencies {
    ...
    compile project(':WifiManager')
}
  • register module (in MainActivity.java)

On newer versions of React Native (0.18+):

import com.skierkowski.WifiManager.*;  // <--- import

public class MainActivity extends ReactActivity {
  ......
  
  /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new WifiManager(), // <------ add here
        new MainReactPackage());
    }
}

On older versions of React Native:

import com.skierkowski.WifiManager.*;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new WifiManager())              // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}

Example

Load module

var WifiManager = require('react-native-wifi-manager');

List available networks (list)

loadWifiListData: function() {
    WifiManager.list(
        (wifiArray) => {
            this.setState({
                // wifiArray is an array of strings, each string being the SSID
                dataSource: this.state.dataSource.cloneWithRows(wifiArray),
            });
        },
        (msg) => {
            console.log(msg);
        },
    );
},

Connect to a new network (connect)

// Attempts to connect to the network specified. This is an async call. Listen to connectionStatus for status
WifiManager.connect(ssid,password);

Get status of connection (status)

checkConnectionStatus: function() {
    // Possible States: 'CONNECTED', 'CONNECTING', 'DISCONNECTED', 'DISCONNECTING', 'SUSPENDED', 'UNKOWN'
    // from: http://developer.android.com/reference/android/net/NetworkInfo.State.html
    WifiManager.status((status) => {
        if (status == 'CONNECTED') {
            this.navigateToActivation();
        }
    });
},