NetInfo #

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 offline
  • wifi - device is online and connected via wifi, or is the iOS simulator
  • cell - device is connected via Edge, 3G, WiMax, or LTE
  • unknown - 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.

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: [object Object] #

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.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; const React = require('react'); const ReactNative = require('react-native'); const { NetInfo, Text, View, TouchableWithoutFeedback, } = ReactNative; class ConnectionInfoSubscription extends React.Component { state = { connectionInfoHistory: [], }; componentDidMount() { NetInfo.addEventListener( 'change', this._handleConnectionInfoChange ); } componentWillUnmount() { NetInfo.removeEventListener( 'change', this._handleConnectionInfoChange ); } _handleConnectionInfoChange = (connectionInfo) => { const connectionInfoHistory = this.state.connectionInfoHistory.slice(); connectionInfoHistory.push(connectionInfo); this.setState({ connectionInfoHistory, }); }; render() { return ( <View> <Text>{JSON.stringify(this.state.connectionInfoHistory)}</Text> </View> ); } } class ConnectionInfoCurrent extends React.Component { state = { connectionInfo: null, }; componentDidMount() { NetInfo.addEventListener( 'change', this._handleConnectionInfoChange ); NetInfo.fetch().done( (connectionInfo) => { this.setState({connectionInfo}); } ); } componentWillUnmount() { NetInfo.removeEventListener( 'change', this._handleConnectionInfoChange ); } _handleConnectionInfoChange = (connectionInfo) => { this.setState({ connectionInfo, }); }; render() { return ( <View> <Text>{this.state.connectionInfo}</Text> </View> ); } } class IsConnected extends React.Component { state = { isConnected: null, }; componentDidMount() { NetInfo.isConnected.addEventListener( 'change', this._handleConnectivityChange ); NetInfo.isConnected.fetch().done( (isConnected) => { this.setState({isConnected}); } ); } componentWillUnmount() { NetInfo.isConnected.removeEventListener( 'change', this._handleConnectivityChange ); } _handleConnectivityChange = (isConnected) => { this.setState({ isConnected, }); }; render() { return ( <View> <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text> </View> ); } } class IsConnectionExpensive extends React.Component { state = { 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(): React.Element<any> { return <IsConnected />; } }, { title: 'NetInfo.update', description: 'Asynchronously load and observe connectionInfo', render(): React.Element<any> { return <ConnectionInfoCurrent />; } }, { title: 'NetInfo.updateHistory', description: 'Observed updates to connectionInfo', render(): React.Element<any> { return <ConnectionInfoSubscription />; } }, { platform: 'android', title: 'NetInfo.isConnectionExpensive (Android)', description: 'Asynchronously check isConnectionExpensive', render(): React.Element<any> { return <IsConnectionExpensive />; } }, ];