A cross-platform API that provides access to network information.
GitHub
npm
@react-native-community/netinfo
allows you to get information about connection type and connection quality.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
npx expo install @react-native-community/netinfo
If you are installing this in an existing React Native app (bare workflow), start by installing expo
in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.
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();
To access the ssid
property (available under state.details.ssid
), there are few additional configuration steps:
Location.requestPermissionsAsync()
Add the com.apple.developer.networking.wifi-info
entitlement to your app.json under ios.entitlements
:
"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
For more information on API and usage, see react-native-netinfo documentation.