From 483c840a0b37b0f797d144064254eef01468fca7 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Wed, 2 Dec 2015 20:17:13 +0000 Subject: [PATCH] update website --- docs/netinfo.html | 180 +++++++++++++--------------------------------- 1 file changed, 50 insertions(+), 130 deletions(-) diff --git a/docs/netinfo.html b/docs/netinfo.html index 3e3031feb24..ca42afe5588 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,135 +1,55 @@ -NetInfo – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

NetInfo

Methods #

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

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

static fetch() #

Properties #

isConnected: ObjectExpression #

isConnectionMetered: TypeCastExpression #

Edit on GitHubExamples #

'use strict'; - -var React = require('react-native'); -var { - NetInfo, - Text, - View -} = React; - -var ReachabilitySubscription = React.createClass({ - getInitialState() { - return { - reachabilityHistory: [], - }; - }, - componentDidMount: function() { - NetInfo.addEventListener( - 'change', - this._handleReachabilityChange - ); - }, - componentWillUnmount: function() { - NetInfo.removeEventListener( - 'change', - this._handleReachabilityChange - ); - }, - _handleReachabilityChange: function(reachability) { - var reachabilityHistory = this.state.reachabilityHistory.slice(); - reachabilityHistory.push(reachability); - this.setState({ - reachabilityHistory, - }); - }, - render() { - return ( - <View> - <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text> - </View> - ); - } +NetInfo – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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.

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 />; } - }, -];
Next →
© 2015 Facebook Inc.