@react-native-community/netinfo - Expo

import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';

import { APIInstallSection } from '~~/components/plugins/InstallSection'; import { BoxLink } from '~~/ui/components/BoxLink';

@react-native-community/netinfo allows you to get information about connection type and connection quality.

Installation

API

To import this library, use:

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

If you want to grab information about the network connection just once, you can use:

NetInfo.fetch().then(state => {
  console.log('Connection type', state.type);
  console.log('Is connected?', state.isConnected);
});

Or, if you'd rather subscribe to updates about the network state (which then allows you to run code/perform actions anytime the network state changes) use:

const unsubscribe = NetInfo.addEventListener(state => {
  console.log('Connection type', state.type);
  console.log('Is connected?', state.isConnected);
});

// To unsubscribe to these update, just use:
unsubscribe();

Accessing the SSID

To access the ssid property (available under state.details.ssid), there are a few additional configuration steps:

Request location permissions with Location.requestForegroundPermissionsAsync() or Location.requestBackgroundPermissionsAsync().

iOS only

Add the com.apple.developer.networking.wifi-info entitlement to your app.json under ios.entitlements:

json

  "ios": {
    "entitlements": {
      "com.apple.developer.networking.wifi-info": true
    }
  }

Check the Access Wi-Fi Information box in your app's App Identifier, which can be found here.
Rebuild your app with eas build --platform ios or npx expo run:ios.

Learn more