Call listenForReconnect on App init

src/Expensify.js

@@ -21,6 +21,7 @@ import ConfirmModal from './components/ConfirmModal';
 import compose from './libs/compose';
 import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
 import * as User from './libs/actions/User';
+import NetworkConnection from './libs/NetworkConnection';
 
 Onyx.registerLogger(({level, message}) => {
     if (level === 'alert') {
@@ -91,6 +92,9 @@ class Expensify extends PureComponent {
             isOnyxMigrated: false,
             isSplashShown: true,
         };
+
+        // Used for the offline indicator appearing when someone is offline
+        NetworkConnection.subscribeToNetInfo();
     }
 
     componentDidMount() {

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -102,6 +102,10 @@ class AuthScreens extends React.Component {
 
     componentDidMount() {
         NetworkConnection.listenForReconnect();
+        NetworkConnection.onReconnect(() => {
+            App.getAppData();
+            App.reconnectApp();
+        });
         PusherConnectionManager.init();
         Pusher.init({
             appKey: CONFIG.PUSHER.APP_KEY,

src/libs/NetworkConnection.js

@@ -81,8 +81,6 @@ function listenForReconnect() {
     unsubscribeFromAppState = AppStateMonitor.addBecameActiveListener(() => {
         triggerReconnectionCallbacks('app became active');
     });
-
-    subscribeToNetInfo();
 }
 
 /**
@@ -130,4 +128,5 @@ export default {
     onReconnect,
     triggerReconnectionCallbacks,
     recheckNetworkConnection,
+    subscribeToNetInfo,
 };

src/libs/actions/App.js

@@ -14,7 +14,6 @@ import Timing from './Timing';
 import * as Report from './Report';
 import * as BankAccounts from './BankAccounts';
 import * as Policy from './Policy';
-import NetworkConnection from '../NetworkConnection';
 import Navigation from '../Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import * as SessionUtils from '../SessionUtils';
@@ -251,12 +250,6 @@ function openProfile() {
     Navigation.navigate(ROUTES.SETTINGS_PROFILE);
 }
 
-// When the app reconnects from being offline, fetch all initialization data
-NetworkConnection.onReconnect(() => {
-    getAppData();
-    reconnectApp();
-});
-
 export {
     setLocale,
     setSidebarLoaded,
@@ -265,4 +258,5 @@ export {
     setUpPoliciesAndNavigate,
     openProfile,
     openApp,
+    reconnectApp,
 };

src/libs/actions/SignInRedirect.js

@@ -16,12 +16,19 @@ Onyx.connect({
     callback: val => currentPreferredLocale = val,
 });
 
+let currentIsOffline;
+Onyx.connect({
+    key: ONYXKEYS.NETWORK,
+    callback: val => currentIsOffline = val.isOffline,
+});
+
 /**
  * @param {String} errorMessage
  */
 function clearStorageAndRedirect(errorMessage) {
     const activeClients = currentActiveClients;
     const preferredLocale = currentPreferredLocale;
+    const isOffline = currentIsOffline;
 
     // Clearing storage discards the authToken. This causes a redirect to the SignIn screen
     Onyx.clear()
@@ -32,6 +39,9 @@ function clearStorageAndRedirect(errorMessage) {
             if (activeClients && activeClients.length > 0) {
                 Onyx.set(ONYXKEYS.ACTIVE_CLIENTS, activeClients);
             }
+            if (isOffline) {
+                Onyx.set(ONYXKEYS.NETWORK, {isOffline});
+            }
 
             // `Onyx.clear` reinitialize the Onyx instance with initial values so use `Onyx.merge` instead of `Onyx.set`.
             Onyx.merge(ONYXKEYS.SESSION, {error: errorMessage});

src/pages/signin/LoginForm.js

@@ -18,6 +18,9 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as LoginUtils from '../../libs/LoginUtils';
 import withToggleVisibilityView, {toggleVisibilityViewPropTypes} from '../../components/withToggleVisibilityView';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
+import OfflineIndicator from '../../components/OfflineIndicator';
+import {withNetwork} from '../../components/OnyxProvider';
+import networkPropTypes from '../../components/networkPropTypes';
 
 const propTypes = {
     /** Should we dismiss the keyboard when transitioning away from the page? */
@@ -37,6 +40,9 @@ const propTypes = {
         isLoading: PropTypes.bool,
     }),
 
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -113,6 +119,10 @@ class LoginForm extends React.Component {
      * Check that all the form fields are valid, then trigger the submit callback
      */
     validateAndSubmitForm() {
+        if (this.props.network.isOffline) {
+            return;
+        }
+
         const login = this.state.login.trim();
         if (!login) {
             this.setState({formError: 'common.pleaseEnterEmailOrPhoneNumber'});
@@ -181,6 +191,7 @@ class LoginForm extends React.Component {
                         containerStyles={[styles.mh0]}
                     />
                 </View>
+                <OfflineIndicator containerStyles={[styles.mv1]} />
             </>
         );
     }
@@ -196,4 +207,5 @@ export default compose(
     withWindowDimensions,
     withLocalize,
     withToggleVisibilityView,
+    withNetwork(),
 )(LoginForm);