react-native/website/_versioned_docs/version-0.21/netinfo.md

id, original_id, title

id	original_id	title
version-0.21-netinfo	netinfo	netinfo

NetInfo #

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 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((isConnectionExpensive) => { console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); });

isConnected #

Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.

NetInfo.isConnected.fetch().done((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: ChangeEventName, handler: Function) #

static removeEventListener(eventName: ChangeEventName, handler: Function) #

static fetch() #

static isConnectionExpensive(callback: (metered: ?boolean, error?: string) => void) #

Properties #

isConnected: ObjectExpression #

Examples #

Edit on GitHub

'use strict';

const React = require('react-native'); const { NetInfo, Text, View, TouchableWithoutFeedback, } = React;

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( (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 { return <IsConnected />; } }, { title: 'NetInfo.update', description: 'Asynchronously load and observe connectionInfo', render(): ReactElement { return <ConnectionInfoCurrent />; } }, { title: 'NetInfo.updateHistory', description: 'Observed updates to connectionInfo', render(): ReactElement { return <ConnectionInfoSubscription />; } }, { platform: 'android', title: 'NetInfo.isConnectionExpensive (Android)', description: 'Asynchronously check isConnectionExpensive', render(): ReactElement { return <IsConnectionExpensive />; } }, ];

Next →