Show Connected via Pusher status

android/app/src/debug/AndroidManifest.xml

@@ -3,6 +3,6 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
     <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
 </manifest>

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
   package="com.expensifyreactnative.chat">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 
     <application
       android:name=".MainApplication"

ios/Podfile.lock

@@ -240,7 +240,7 @@ PODS:
     - react-native-config/App (= 1.3.3)
   - react-native-config/App (1.3.3):
     - React
-  - react-native-netinfo (5.9.5):
+  - react-native-netinfo (5.9.6):
     - React
   - react-native-safe-area-context (3.1.4):
     - React
@@ -473,9 +473,9 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 8ca588cc921e70590820ce72b8789b02c67cce38
   React-jsinspector: b14e62ebe7a66e9231e9581279909f2fc3db6606
   react-native-config: 9a061347e0136fdb32d43a34d60999297d672361
-  react-native-netinfo: 7f3f3ed9e8f0e7ab3e7cac00cbfdc6997e25ecaf
-  react-native-safe-area-context: 0ed9288ed4409beabb0817b54efc047286fc84da
-  react-native-webview: 797f50d16bb271c4270bc742040a64c79ec7147c
+  react-native-netinfo: d2c312fa4b151214e1d5c8456ddb5f28ff24a576
+  react-native-safe-area-context: eb91fe1fb3f7b87d9c30a7f0808407d8569d539d
+  react-native-webview: df9ff59f76e991aefa7174831a0af48ddbac5f1b
   React-RCTActionSheet: 910163b6b09685a35c4ebbc52b66d1bfbbe39fc5
   React-RCTAnimation: 9a883bbe1e9d2e158d4fb53765ed64c8dc2200c6
   React-RCTBlob: 39cf0ece1927996c4466510e25d2105f67010e13
@@ -486,7 +486,7 @@ SPEC CHECKSUMS:
   React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
-  RNCAsyncStorage: db711e29e5e0500d9bd21aa0c2e397efa45302b1
+  RNCAsyncStorage: d059c3ee71738c39834a627476322a5a8cd5bf36
   Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.11.0",
-    "@react-native-community/netinfo": "^5.9.5",
+    "@react-native-community/netinfo": "^5.9.6",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "dotenv": "^8.2.0",
     "electron-serve": "^1.0.0",

src/lib/Network.js

@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import NetInfo from '@react-native-community/netinfo';
 import Ion from './Ion';
 import CONFIG from '../CONFIG';
 import IONKEYS from '../IONKEYS';
@@ -18,6 +19,13 @@ let reauthenticating = false;
 // Queue for network requests so we don't lose actions done by the user while offline
 const networkRequestQueue = [];
 
+// Subscribe to the state change event via NetInfo so we can update
+// whether a user has internet connectivity or not. This is more reliable
+// than the Pusher `disconnected` event which takes about 10-15 seconds to emit
+NetInfo.addEventListener((state) => {
+    Ion.merge(IONKEYS.NETWORK, {isOffline: !state.isConnected});
+});
+
 /**
  * Events that happen on the pusher socket are used to determine if the app is online or offline. The offline setting
  * is stored in Ion so the rest of the app has access to it.

src/page/HomePage/SidebarView.js

@@ -76,6 +76,10 @@ class SidebarView extends React.Component {
     render() {
         const reports = this.props.reports;
         this.updateUnreadReportIndicator();
+        const indicatorStyles = [
+            styles.statusIndicator,
+            this.props.isOffline ? styles.statusIndicatorOffline : styles.statusIndicatorOnline
+        ];
         return (
             <View style={[styles.flex1, styles.sidebar]}>
                 <View style={[styles.sidebarHeader, {marginTop: this.props.insets.top}]}>
@@ -106,9 +110,7 @@ class SidebarView extends React.Component {
                             source={{uri: this.props.avatarURL}}
                             style={[styles.historyItemAvatar]}
                         />
-                        {this.props.isOffline && (
-                        <View style={[styles.statusIndicator]} />
-                        )}
+                        <View style={indicatorStyles} />
                     </View>
                     <View style={[styles.flexColumn]}>
                         {this.props.userDisplayName && (

src/style/StyleSheet.js

@@ -233,7 +233,6 @@ const styles = {
     },
 
     statusIndicator: {
-        backgroundColor: colors.icon,
         borderColor: colors.heading,
         borderRadius: 7,
         borderWidth: 2,
@@ -245,6 +244,14 @@ const styles = {
         zIndex: 10,
     },
 
+    statusIndicatorOnline: {
+        backgroundColor: colors.green,
+    },
+
+    statusIndicatorOffline: {
+        backgroundColor: colors.icon,
+    },
+
     sidebarFooterUsername: {
         color: '#FFFFFF',
         fontSize: 15,

webpack.common.js

@@ -69,5 +69,9 @@ module.exports = {
             'react-native-config': 'react-web-config',
             'react-native$': 'react-native-web',
         },
+
+        // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`
+        // without this, web will try to use native implementations and break in not very obvious ways
+        extensions: ['.web.js', '.js'],
     },
 };