React NativeNetInfo # | Edit on GitHub |
NetInfo exposes info about online/offline status
NetInfo.fetch().done((reach) => {
console.log('Initial: ' + reach);
});
function handleFirstConnectivityChange(reach) {
console.log('First change: ' + reach);
NetInfo.removeEventListener(
'change',
handleFirstConnectivityChange
);
}
NetInfo.addEventListener(
'change',
handleFirstConnectivityChange
);
IOS #
Asynchronously determine if the device is online and on a cellular network.
none- device is offlinewifi- device is online and connected via wifi, or is the iOS simulatorcell- device is connected via Edge, 3G, WiMax, or LTEunknown- error case and the network status is unknown
Android #
To request network info, you need to add the following line to your
app's AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Asynchronously determine if the device is connected and details about that connection.
Android Connectivity Types.
NONE- device is offlineBLUETOOTH- The Bluetooth data connection.DUMMY- Dummy data connection.ETHERNET- The Ethernet data connection.MOBILE- The Mobile data connection.MOBILE_DUN- A DUN-specific Mobile data connection.MOBILE_HIPRI- A High Priority Mobile data connection.MOBILE_MMS- An MMS-specific Mobile data connection.MOBILE_SUPL- A SUPL-specific Mobile data connection.VPN- A virtual network using one or more native bearers. Requires API Level 21WIFI- The WIFI data connection.WIMAX- The WiMAX data connection.UNKNOWN- Unknown data connection.
The rest ConnectivityStates are hidden by the Android API, but can be used if necessary.
isConnectionExpensive #
Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.
NetInfo.isConnectionExpensive()
.then(isConnectionExpensive => {
console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
})
.catch(error => {
console.error(error);
});
isConnected #
Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.
NetInfo.isConnected.fetch().then(isConnected => {
console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
NetInfo.isConnected.removeEventListener(
'change',
handleFirstConnectivityChange
);
}
NetInfo.isConnected.addEventListener(
'change',
handleFirstConnectivityChange
);
Methods #
static addEventListener(eventName, handler) #
Invokes the listener whenever network status changes. The listener receives one of the connectivity types listed above.
static removeEventListener(eventName, handler) #
Removes the listener for network status changes.
static fetch() #
Returns a promise that resolves with one of the connectivity types listed above.
static isConnectionExpensive() #
Properties #
isConnected: ObjectExpression #
An object with the same methods as above but the listener receives a boolean which represents the internet connectivity. Use this if you are only interested with whether the device has internet connectivity.
Examples # | Edit on GitHub |
'use strict';
const React = require('react');
const ReactNative = require('react-native');
const {
NetInfo,
Text,
View,
TouchableWithoutFeedback,
} = ReactNative;
const ConnectionInfoSubscription = React.createClass({
getInitialState() {
return {
connectionInfoHistory: [],
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleConnectionInfoChange
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleConnectionInfoChange
);
},
_handleConnectionInfoChange: function(connectionInfo) {
const connectionInfoHistory = this.state.connectionInfoHistory.slice();
connectionInfoHistory.push(connectionInfo);
this.setState({
connectionInfoHistory,
});
},
render() {
return (
<View>
<Text>{JSON.stringify(this.state.connectionInfoHistory)}</Text>
</View>
);
}
});
const ConnectionInfoCurrent = React.createClass({
getInitialState() {
return {
connectionInfo: null,
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleConnectionInfoChange
);
NetInfo.fetch().done(
(connectionInfo) => { this.setState({connectionInfo}); }
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleConnectionInfoChange
);
},
_handleConnectionInfoChange: function(connectionInfo) {
this.setState({
connectionInfo,
});
},
render() {
return (
<View>
<Text>{this.state.connectionInfo}</Text>
</View>
);
}
});
const IsConnected = React.createClass({
getInitialState() {
return {
isConnected: null,
};
},
componentDidMount: function() {
NetInfo.isConnected.addEventListener(
'change',
this._handleConnectivityChange
);
NetInfo.isConnected.fetch().done(
(isConnected) => { this.setState({isConnected}); }
);
},
componentWillUnmount: function() {
NetInfo.isConnected.removeEventListener(
'change',
this._handleConnectivityChange
);
},
_handleConnectivityChange: function(isConnected) {
this.setState({
isConnected,
});
},
render() {
return (
<View>
<Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
</View>
);
}
});
const IsConnectionExpensive = React.createClass({
getInitialState() {
return {
isConnectionExpensive: (null : ?boolean),
};
},
_checkIfExpensive() {
NetInfo.isConnectionExpensive().then(
isConnectionExpensive => { this.setState({isConnectionExpensive}); }
);
},
render() {
return (
<View>
<TouchableWithoutFeedback onPress={this._checkIfExpensive}>
<View>
<Text>Click to see if connection is expensive:
{this.state.isConnectionExpensive === true ? 'Expensive' :
this.state.isConnectionExpensive === false ? 'Not expensive'
: 'Unknown'}
</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
});
exports.title = 'NetInfo';
exports.description = 'Monitor network status';
exports.examples = [
{
title: 'NetInfo.isConnected',
description: 'Asynchronously load and observe connectivity',
render(): ReactElement<any> { return <IsConnected />; }
},
{
title: 'NetInfo.update',
description: 'Asynchronously load and observe connectionInfo',
render(): ReactElement<any> { return <ConnectionInfoCurrent />; }
},
{
title: 'NetInfo.updateHistory',
description: 'Observed updates to connectionInfo',
render(): ReactElement<any> { return <ConnectionInfoSubscription />; }
},
{
platform: 'android',
title: 'NetInfo.isConnectionExpensive (Android)',
description: 'Asynchronously check isConnectionExpensive',
render(): ReactElement<any> { return <IsConnectionExpensive />; }
},
];
