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 offline
+- BLUETOOTH - 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 21
+- WIFI - 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.
isConnectionMetered #
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.isConnectionMetered((isConnectionMetered) => {
+ console.log('Connection is ' + (isConnectionMetered ? 'Metered' : 'Not Metered'));
+});
+### isConnected
-var ReachabilityCurrent = React.createClass({
- getInitialState() {
- return {
- reachability: null,
- };
- },
- componentDidMount: function() {
- NetInfo.addEventListener(
- 'change',
- this._handleReachabilityChange
- );
- NetInfo.fetch().done(
- (reachability) => { this.setState({reachability}); }
- );
- },
- componentWillUnmount: function() {
- NetInfo.removeEventListener(
- 'change',
- this._handleReachabilityChange
- );
- },
- _handleReachabilityChange: function(reachability) {
- this.setState({
- reachability,
- });
- },
- render() {
- return (
- <View>
- <Text>{this.state.reachability}</Text>
- </View>
- );
- }
-});
-
-var 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>
- );
- }
-});
-
-exports.title = 'NetInfo';
-exports.description = 'Monitor network status';
-exports.examples = [
- {
- title: 'NetInfo.isConnected',
- description: 'Asynchronously load and observe connectivity',
- render(): ReactElement { return <IsConnected />; }
- },
- {
- title: 'NetInfo.reachabilityIOS',
- description: 'Asynchronously load and observe iOS reachability',
- render(): ReactElement { return <ReachabilityCurrent />; }
- },
- {
- title: 'NetInfo.reachabilityIOS',
- description: 'Observed updates to iOS reachability',
- render(): ReactElement { return <ReachabilitySubscription />; }
- },
-];
React Native