Merge pull request #1 from baptistelambert/feat/connection-infos

Add connection info and children as a function

Author: baptistelambert

README.md

@@ -22,12 +22,19 @@ import { NetInfoProvider } from 'react-native-netinfo';
 const App = () => (
   <View>
     <NetInfoProvider
-      onChange={({ isConnected }) => {
+      onChange={({ isConnected, connectionInfo }) => {
         console.log(isConnected);
+        console.log(connectionInfo);
       }}
-      render={({ isConnected }) =>
+      render={({ isConnected, connectionInfo }) =>
         isConnected ? (
-          <Text>Wonderful, you are connected!</Text>
+          <React.Fragment>
+            <Text>Wonderful, you are connected!</Text>
+            <Text>Connection type: {connectionInfo.type}</Text>
+            <Text>
+              Effective connection type:{connectionInfo.effectiveType}
+            </Text>
+          </React.Fragment>
         ) : (
           <Text>It looks like you encounter connectivity problems.</Text>
         )
@@ -37,23 +44,59 @@ const App = () => (
 );
 ```
 
+### With children as a function
+
+```js
+import { NetInfoProvider } from 'react-native-netinfo';
+
+const App = () => (
+  <View>
+    <NetInfoProvider
+      onChange={({ isConnected, connectionInfo }) => {
+        console.log(isConnected);
+        console.log(connectionInfo);
+      }}
+    >
+      {({ isConnected, connectionInfo }) =>
+        isConnected ? (
+          <React.Fragment>
+            <Text>Wonderful, you are connected!</Text>
+            <Text>Connection type: {connectionInfo.type}</Text>
+            <Text>
+              Effective connection type:{connectionInfo.effectiveType}
+            </Text>
+          </React.Fragment>
+        ) : (
+          <Text>It looks like you encounter connectivity problems.</Text>
+        )
+      }
+    </NetInfoProvider>
+  </View>
+);
+```
+
 ### With component injection
 
 ```js
 import { NetInfoProvider } from 'react-native-netinfo';
 
-const ConnectedComponent = ({ isConnected }) =>
+const ConnectedComponent = ({ isConnected, connectionInfo }) =>
   isConnected ? (
-    <Text>Wonderful, you are connected!</Text>
+    <React.Fragment>
+      <Text>Wonderful, you are connected!</Text>
+      <Text>Connection type: {connectionInfo.type}</Text>
+      <Text>Effective connection type:{connectionInfo.effectiveType}</Text>
+    </React.Fragment>
   ) : (
     <Text>It looks like you encounter connectivity problems.</Text>
   );
 
 const App = () => (
   <View>
     <NetInfoProvider
-      onChange={({ isConnected }) => {
+      onChange={({ isConnected, connectionInfo }) => {
         console.log(isConnected);
+        console.log(connectionInfo);
       }}
       component={ConnectedComponent}
     />
@@ -62,3 +105,22 @@ const App = () => (
 ```
 
 NB: you should not set both component and render props. If you were to do this, the render prop would be ignored.
+
+## Constants
+
+This package also exposes constants for connection info's types and effective types.
+
+You can use them like so:
+
+```js
+import { CONSTANTS } from 'react-native-netinfo';
+
+const App = () => (
+  <View>
+    <Text>{CONSTANTS.CONNECTION_INFO.TYPES.WIFI}</Text>
+    <Text>{CONSTANTS.CONNECTION_INFO.EFFECTIVE_TYPES['4G']}</Text>
+  </View>
+);
+```
+
+You can find the full list of types and effective types in the [official React Native documentation about NetInfo](https://facebook.github.io/react-native/docs/netinfo.html#connectiontype-enum).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-netinfo",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description":
     "Notifies your app when the network goes offline and back online.",
   "main": "src/index.js",

src/NetInfoProvider.js

@@ -1,43 +1,55 @@
-import { createElement, Component } from 'react';
+import React, { createElement, Component } from 'react';
 import { NetInfo } from 'react-native';
 
+const isEmptyChildren = children => React.Children.count(children) === 0;
+
 class NetInfoProvider extends Component {
   static defaultProps = {
-    render: () => null,
     onChange: () => {}
   };
 
   state = {
-    isConnected: true
+    isConnected: true,
+    connectionInfo: {
+      type: null,
+      effectiveType: null
+    }
   };
 
   componentDidMount() {
-    NetInfo.isConnected.addEventListener(
-      'connectionChange',
-      this.handleConnectionChange
-    );
+    NetInfo.addEventListener('connectionChange', this.handleConnectionChange);
   }
 
   componentWillUnmount() {
-    NetInfo.isConnected.removeEventListener(
+    NetInfo.removeEventListener(
       'connectionChange',
       this.handleConnectionChange
     );
   }
 
   handleConnectionChange = () => {
-    NetInfo.isConnected.fetch().then(isConnected => {
-      this.props.onChange({ isConnected });
-      this.setState({ isConnected });
+    Promise.all([
+      NetInfo.isConnected.fetch(),
+      NetInfo.getConnectionInfo()
+    ]).then(([isConnected, connectionInfo]) => {
+      this.props.onChange({ isConnected, connectionInfo });
+      this.setState({ isConnected, connectionInfo });
     });
   };
 
   render() {
-    const { component, render } = this.props;
+    const { children, component, render } = this.props;
 
     if (component) return createElement(component, this.state);
 
-    return render(this.state);
+    if (render) return render(this.state);
+
+    if (typeof children === 'function') return children(this.state);
+
+    if (children && !isEmptyChildren(children))
+      return React.Children.only(children);
+
+    return null;
   }
 }
 

src/constants.js

@@ -0,0 +1,21 @@
+const CONSTANTS = {
+  CONNECTION_INFO: {
+    TYPES: {
+      NONE: 'none',
+      WIFI: 'wifi',
+      CELLULAR: 'cellular',
+      UNKNOWN: 'unknown',
+      BLUETOOTH: 'bluetooth',
+      ETHERNET: 'ethernet',
+      WIMAX: 'wimax'
+    },
+    EFFECTIVE_TYPES: {
+      '2G': '2g',
+      '3G': '3g',
+      '4G': '4g',
+      UNKNOWN: 'unknown'
+    }
+  }
+};
+
+export { CONSTANTS };

src/index.js

@@ -1 +1,2 @@
 export { default as NetInfoProvider } from './NetInfoProvider';
+export { CONSTANTS } from './constants';