Fix: Blank screen after creating an account

src/SCREENS.js

@@ -4,6 +4,7 @@
  */
 export default {
     HOME: 'Home',
+    LOADING: 'Loading',
     REPORT: 'Report',
     SIGN_IN: 'SignIn',
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -84,15 +84,11 @@ const propTypes = {
         isOffline: PropTypes.bool,
     }),
 
-    // The initial report for the home screen
-    initialReportID: PropTypes.string,
-
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     network: {isOffline: true},
-    initialReportID: null,
 };
 
 class AuthScreens extends React.Component {
@@ -101,8 +97,6 @@ class AuthScreens extends React.Component {
 
         Timing.start(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
         Timing.start(CONST.TIMING.HOMEPAGE_REPORTS_LOADED);
-
-        this.initialReportID = props.initialReportID;
     }
 
     componentDidMount() {
@@ -148,15 +142,6 @@ class AuthScreens extends React.Component {
             return true;
         }
 
-        // Skip when `this.initialReportID` is already assigned. We no longer want to update it
-        if (!this.initialReportID) {
-            // Either we have a reportID or fetchAllReports resolved with no reports. Otherwise keep waiting
-            if (nextProps.initialReportID || nextProps.initialReportID === '') {
-                this.initialReportID = nextProps.initialReportID;
-                return true;
-            }
-        }
-
         return false;
     }
 
@@ -168,11 +153,6 @@ class AuthScreens extends React.Component {
     }
 
     render() {
-        // Wait to resolve initial Home route params.
-        if (!this.initialReportID) {
-            return null;
-        }
-
         const modalScreenOptions = {
             headerShown: false,
             cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
@@ -196,12 +176,6 @@ class AuthScreens extends React.Component {
                         headerShown: false,
                         title: 'Expensify.cash',
                     }}
-                    initialParams={{
-                        screen: SCREENS.REPORT,
-                        params: {
-                            reportID: this.initialReportID,
-                        },
-                    }}
                     component={MainDrawerNavigator}
                 />
                 <RootStack.Screen
@@ -278,8 +252,5 @@ export default compose(
         network: {
             key: ONYXKEYS.NETWORK,
         },
-        initialReportID: {
-            key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
-        },
     }),
 )(AuthScreens);

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -1,22 +1,62 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
 import {createDrawerNavigator} from '@react-navigation/drawer';
+import {withOnyx} from 'react-native-onyx';
 
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 import styles, {
     getNavigationDrawerType,
     getNavigationDrawerStyle,
 } from '../../../styles/styles';
+import ONYXKEYS from '../../../ONYXKEYS';
+import compose from '../../compose';
+import SCREENS from '../../../SCREENS';
 
 // Screens
 import SidebarScreen from '../../../pages/home/sidebar/SidebarScreen';
 import ReportScreen from '../../../pages/home/ReportScreen';
 
+const LoadingScreen = React.memo(() => <FullScreenLoadingIndicator visible />, () => true);
+
 const propTypes = {
+    // Initial report to be used if nothing else is specified by routing
+    initialReportID: PropTypes.string,
+
+    // Route data passed by react navigation
+    route: PropTypes.shape({
+        state: PropTypes.shape({
+            // A list of mounted screen names
+            routeNames: PropTypes.arrayOf(PropTypes.string),
+        }),
+    }).isRequired,
+
     ...windowDimensionsPropTypes,
 };
 
+const defaultProps = {
+    initialReportID: null,
+};
+
 const Drawer = createDrawerNavigator();
 
+/**
+ * Derives whether it's time to mount the ReportScreen from current component props
+ *
+ * @param {String} initialReportID
+ * @param {Object} route
+ * @returns {boolean}
+ */
+const shouldMountReportScreen = ({initialReportID, route}) => {
+    if (_.isString(initialReportID)) {
+        return true;
+    }
+
+    // After the ReportScreen is mounted it should stay mounted no matter initial report ID
+    return Boolean(route.state) && route.state.routeNames.includes(SCREENS.REPORT);
+};
+
 const MainDrawerNavigator = props => (
     <Drawer.Navigator
         openByDefault
@@ -28,22 +68,33 @@ const MainDrawerNavigator = props => (
         sceneContainerStyle={styles.navigationSceneContainer}
         edgeWidth={500}
         drawerContent={() => <SidebarScreen />}
+        screenOptions={{
+            cardStyle: styles.navigationScreenCardStyle,
+            headerShown: false,
+        }}
     >
-        <Drawer.Screen
-            name="Report"
-            component={ReportScreen}
-
-            // Providing an empty string here will ensure that the ReportScreen does not show as '/r/undefined'
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            initialParams={{reportID: ''}}
-            options={{
-                cardStyle: styles.navigationScreenCardStyle,
-                headerShown: false,
-            }}
-        />
+        {
+            shouldMountReportScreen(props)
+                ? (
+                    <Drawer.Screen
+                        name={SCREENS.REPORT}
+                        component={ReportScreen}
+                        initialParams={{reportID: props.initialReportID}}
+                    />
+                )
+                : <Drawer.Screen name={SCREENS.LOADING} component={LoadingScreen} />
+        }
     </Drawer.Navigator>
 );
 
 MainDrawerNavigator.propTypes = propTypes;
+MainDrawerNavigator.defaultProps = defaultProps;
 MainDrawerNavigator.displayName = 'MainDrawerNavigator';
-export default withWindowDimensions(MainDrawerNavigator);
+export default compose(
+    withWindowDimensions,
+    withOnyx({
+        initialReportID: {
+            key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+        },
+    }),
+)(MainDrawerNavigator);

src/libs/Navigation/linkingConfig.js

@@ -18,6 +18,7 @@ export default {
                 screens: {
                     // Report route
                     [SCREENS.REPORT]: ROUTES.REPORT_WITH_ID,
+                    [SCREENS.LOADING]: ROUTES.REPORT,
                 },
             },
 

src/libs/actions/Report.js

@@ -727,15 +727,20 @@ function fetchAllReports(
                 return;
             }
 
-            // The string cast here is necessary as Get rvl='chatList' may return an int
-            reportIDs = String(response.chatList).split(',');
+            // The cast here is necessary as Get rvl='chatList' may return an int or Array
+            reportIDs = String(response.chatList)
+                .split(',')
+                .filter(_.identity);
 
             // Get all the chat reports if they have any, otherwise create one with concierge
-            if (reportIDs.length) {
+            if (reportIDs.length > 0) {
                 return fetchChatReportsByIDs(reportIDs);
             }
 
-            return fetchOrCreateChatReport([currentUserEmail, 'concierge@expensify.com']);
+            return fetchOrCreateChatReport([currentUserEmail, 'concierge@expensify.com'])
+                .then((createdReportID) => {
+                    reportIDs = [createdReportID];
+                });
         })
         .then(() => {
             Onyx.set(ONYXKEYS.INITIAL_REPORT_DATA_LOADED, true);
@@ -754,16 +759,15 @@ function fetchAllReports(
             // We are waiting 8 seconds since this provides a good time window to allow the UI to finish loading before
             // bogging it down with more requests and operations.
             }, shouldDelayActionsFetch ? 8000 : 0);
-
+        })
+        .finally(() => {
             // Update currentlyViewedReportID to be our first reportID from our report collection if we don't have
             // one already.
-            if (!shouldRedirectToReport || lastViewedReportID) {
-                return;
+            if (shouldRedirectToReport || !lastViewedReportID) {
+                const firstReportID = _.first(reportIDs);
+                // eslint-disable-next-line no-use-before-define
+                updateCurrentlyViewedReportID(firstReportID);
             }
-
-            const firstReportID = _.first(reportIDs);
-            const currentReportID = firstReportID ? String(firstReportID) : '';
-            Onyx.merge(ONYXKEYS.CURRENTLY_VIEWED_REPORTID, currentReportID);
         });
 }
 
@@ -950,7 +954,7 @@ function handleReportChanged(report) {
  * @param {Number} reportID
  */
 function updateCurrentlyViewedReportID(reportID) {
-    Onyx.merge(ONYXKEYS.CURRENTLY_VIEWED_REPORTID, String(reportID));
+    Onyx.merge(ONYXKEYS.CURRENTLY_VIEWED_REPORTID, String(reportID || ''));
 }
 
 Onyx.connect({