Merge pull request #272 from infinitered/feature/netinfo

Add NetInfo to DeviceInfoScreen

Author: GantMan

ignite-base/App/Containers/DeviceInfoScreen.js

@@ -1,6 +1,6 @@
 // An All Components Screen is a great way to dev and quick-test components
 import React, {PropTypes} from 'react'
-import { View, ScrollView, Text, Image } from 'react-native'
+import { View, ScrollView, Text, Image, NetInfo } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 import { Metrics, Images } from '../Themes'
 
@@ -35,6 +35,56 @@ export default class DeviceInfoScreen extends React.Component {
   static propTypes = {
   }
 
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isConnected: false,
+      connectionInfo: null,
+      connectionInfoHistory: []
+    }
+
+    this.setConnected = this.setConnected.bind(this)
+    this.setConnectionInfo = this.setConnectionInfo.bind(this)
+    this.updateConnectionInfoHistory = this.updateConnectionInfoHistory.bind(this)
+  }
+
+  componentDidMount () {
+    NetInfo.isConnected.addEventListener('change', this.setConnected)
+    NetInfo.isConnected.fetch().done(this.setConnected)
+    NetInfo.addEventListener('change', this.setConnectionInfo)
+    NetInfo.fetch().done(this.setConnectionInfo)
+    NetInfo.addEventListener('change', this.updateConnectionInfoHistory)
+  }
+
+  componentWillUnmount () {
+    NetInfo.isConnected.removeEventListener('change', this.setConnected)
+    NetInfo.removeEventListener('change', this.setConnectionInfo)
+    NetInfo.removeEventListener('change', this.updateConnectionInfoHistory)
+  }
+
+  setConnected (isConnected) {
+    this.setState({isConnected})
+  }
+
+  setConnectionInfo (connectionInfo) {
+    this.setState({connectionInfo})
+  }
+
+  updateConnectionInfoHistory (connectionInfo) {
+    const connectionInfoHistory = this.state.connectionInfoHistory.slice()
+    connectionInfoHistory.push(connectionInfo)
+    this.setState({connectionInfoHistory})
+  }
+
+  netInfo () {
+    return ([
+      {title: 'Connection', info: (this.state.isConnected ? 'Online' : 'Offline')},
+      {title: 'Connection Info', info: this.state.connectionInfo},
+      {title: 'Connection Info History', info: JSON.stringify(this.state.connectionInfoHistory)}
+    ])
+  }
+
   renderCard (cardTitle, rowData) {
     return (
       <View style={styles.cardContainer}>
@@ -73,6 +123,7 @@ export default class DeviceInfoScreen extends React.Component {
           {this.renderCard('Device Hardware', HARDWARE_DATA)}
           {this.renderCard('Device OS', OS_DATA)}
           {this.renderCard('App Info', APP_DATA)}
+          {this.renderCard('Net Info', this.netInfo())}
         </ScrollView>
       </View>
     )

ignite-base/android/app/src/main/AndroidManifest.xml

@@ -7,9 +7,10 @@
     <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.permission.VIBRATE" />
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
     <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.BLUETOOTH"/>
+    <uses-permission android:name="android.permission.BLUETOOTH" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 
     <application
       android:name=".MainApplication"