[fix] latest NetInfo API

Update the NetInfo API to conform to the latest React Native
implementation. Web-only properties are also included now.

Fix #662
Close #663

docs/apis/NetInfo.md

@@ -1,9 +1,19 @@
 # NetInfo
 
 `NetInfo` asynchronously determines the online/offline status of the
-application.
+application and depending on browser support via
+[NetworkInformation API](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation),
+additional information about the connection.
 
-Connection types:
+EffectiveConnectionType:
+
+* `4g`
+* `3g`
+* `2g`
+* `slow-2g`
+* `unknown`
+
+ConnectionType:
 
 * `bluetooth` - The user agent is using a Bluetooth connection.
 * `cellular` - The user agent is using a cellular connection (e.g., EDGE, HSPA, LTE, etc.).
@@ -18,12 +28,12 @@ Connection types:
 ## Methods
 
 Note that support for retrieving the connection type depends upon browswer
-support (and is limited to mobile browsers). It will default to `unknown` when
+support and the current platform. It will default to `unknown` when
 support is missing.
 
 static **addEventListener**(eventName: ChangeEventName, handler: Function)
 
-static **fetch**(): Promise
+static **getConnectionInfo**(): Promise
 
 static **removeEventListener**(eventName: ChangeEventName, handler: Function)
 
@@ -36,7 +46,7 @@ internet connectivity. Use this if you are only interested with whether the devi
 
 **isConnected.addEventListener**(eventName: ChangeEventName, handler: Function)
 
-**isConnected.fetch**(): Promise
+**isConnected.getConnectionInfo**(): Promise
 
 **isConnected.removeEventListener**(eventName: ChangeEventName, handler: Function)
 
@@ -45,24 +55,25 @@ internet connectivity. Use this if you are only interested with whether the devi
 Fetching the connection type:
 
 ```js
-NetInfo.fetch().then((connectionType) => {
-  console.log('Connection type:', connectionType);
+NetInfo.getConnectionInfo().then(({ effectiveType, type }) => {
+  console.log('Effective connection type:', effectiveType);
+  console.log('Connection type:', type);
 });
 ```
 
 Subscribing to changes in the connection type:
 
 ```js
-const handleConnectivityTypeChange = (connectionType) => {
-  console.log('Current connection type:', connectionType);
+const handleConnectivityTypeChange = ({ effectiveType }) => {
+  console.log('Current effective connection type:', effectiveType);
 }
-NetInfo.addEventListener('change', handleConnectivityTypeChange);
+NetInfo.addEventListener('connectionChange', handleConnectivityTypeChange);
 ```
 
 Fetching the connection status:
 
 ```js
-NetInfo.isConnected.fetch().then((isConnected) => {
+NetInfo.isConnected.getConnectionInfo().then((isConnected) => {
   console.log('Connection status:', (isConnected ? 'online' : 'offline'));
 });
 ```
@@ -73,5 +84,5 @@ Subscribing to changes in the connection status:
 const handleConnectivityStatusChange = (isConnected) => {
   console.log('Current connection status:', (isConnected ? 'online' : 'offline'));
 }
-NetInfo.isConnected.addEventListener('change', handleConnectivityStatusChange);
+NetInfo.isConnected.addEventListener('connectionChange', handleConnectivityStatusChange);
 ```

docs/storybook/2-apis/NetInfo/NetInfoScreen.js

@@ -8,61 +8,94 @@ import UIExplorer, {
   Code,
   Description,
   DocItem,
+  ExternalLink,
   Section,
-  storiesOf,
-  TextList
+  storiesOf
 } from '../../ui-explorer';
 
 const NetInfoScreen = () => (
   <UIExplorer title="NetInfo" url="2-apis/NetInfo">
     <Description>
       <AppText>
-        NetInfo asynchronously determines the online/offline status of the application.
+        NetInfo asynchronously determines the online/offline status and additional connection
+        information (where available) of the application.
       </AppText>
       <AppText>
-        Note that support for retrieving the connection type depends upon browser support (and is
-        limited to mobile browsers). It will default to <Code>unknown</Code> when support is
-        missing.
+        Note that connection type information is limited to how well the browser supports the{' '}
+        <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation">
+          NetworkInformation API
+        </ExternalLink>. Connection types will be <Code>unknown</Code> when support is missing.
       </AppText>
     </Description>
 
+    <Section title="Types">
+      <DocItem
+        description={
+          <AppText>
+            One of <Code>slow-2g</Code>, <Code>2g</Code>, <Code>3g</Code>, <Code>4g</Code>,{' '}
+            <Code>unknown</Code>.
+          </AppText>
+        }
+        name="ConnectionType"
+      />
+      <DocItem
+        description={
+          <AppText>
+            One of <Code>bluebooth</Code>, <Code>cellular</Code>, <Code>ethernet</Code>,{' '}
+            <Code>mixed</Code>, <Code>mixed</Code>, <Code>none</Code>, <Code>other</Code>,{' '}
+            <Code>unknown</Code>, <Code>wifi</Code>, <Code>wimax</Code>
+          </AppText>
+        }
+        name="EffectiveConnectionType"
+      />
+
+      <DocItem
+        description={
+          <Code>{`{
+  effectiveType: EffectiveConnectionType;
+  type: ConnectionType;
+  downlink?: number;
+  downlinkMax?: number;
+  rtt?: number;
+}`}</Code>
+        }
+        name="ConnectionEventType"
+      />
+    </Section>
+
     <Section title="Methods">
       <DocItem
-        description={[
+        description={
           <AppText>
-            Invokes the listener whenever network status changes. The listener receives one of the
-            following connectivity types (from the DOM connection API):
-          </AppText>,
-          <TextList
-            items={[
-              'bluetooth',
-              'cellular',
-              'ethernet',
-              'mixed',
-              'none',
-              'other',
-              'unknown',
-              'wifi',
-              'wimax'
-            ]}
-          />
-        ]}
+            Adds an event handler. The <Code>connectionChange</Code> event fires when the network
+            status changes. The argument to the event handler is an object of type{' '}
+            <Code>ConnectionEventType</Code>.
+          </AppText>
+        }
         example={{
-          code: "NetInfo.addEventListener('change', (connectionType) => {})"
+          code: `NetInfo.addEventListener('connectionChange', ({ effectiveType, type }) => {
+  console.log('Effective connection type:', effectiveType);
+  console.log('Connection type:', type);
+})`
         }}
         name="static addEventListener"
         typeInfo="(eventName, handler) => void"
       />
 
       <DocItem
-        description="Returns a promise that resolves with one of the connectivity types listed above."
+        description={
+          <AppText>
+            Returns a promise that resolves with an object of type <Code>ConnectionEventType</Code>.
+          </AppText>
+        }
         example={{
-          code: `NetInfo.fetch().then((connectionType) => {
-  console.log('Connection type:', connectionType);
+          code: `NetInfo.getConnectionInfo().then(({ effectiveType, type }) => {
+  console.log('Effective connection type:', effectiveType);
+  console.log('Connection type:', type);
 });`
         }}
-        name="static fetch"
-        typeInfo="() => Promise<string>"
+        name="static getConnectionInfo"
+        typeInfo="() => Promise<ConnectionEventType>"
       />
 
       <DocItem
@@ -76,7 +109,7 @@ const NetInfoScreen = () => (
       <DocItem
         description="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."
         example={{
-          code: `NetInfo.isConnected.fetch().then((isConnected) => {
+          code: `NetInfo.isConnected.getConnectionInfo().then((isConnected) => {
   console.log('Connection status:', (isConnected ? 'online' : 'offline'));
 });`
         }}