Don't show the Download App Banner until Past Sign in

src/Expensify.js

@@ -196,10 +196,10 @@ function Expensify(props) {
         <DeeplinkWrapper isAuthenticated={isAuthenticated}>
             {shouldInit && (
                 <>
+                    <DownloadAppModal isAuthenticated={isAuthenticated} />
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
-                    <DownloadAppModal />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
                     {props.updateAvailable ? <UpdateAppModal /> : null}

src/components/DownloadAppModal.js

@@ -16,14 +16,17 @@ const propTypes = {
     /** ONYX PROP to hide banner for a user that has dismissed it */
     // eslint-disable-next-line react/forbid-prop-types
     showDownloadAppBanner: PropTypes.bool,
+
+    /** Whether the user is logged in */
+    isAuthenticated: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
     showDownloadAppBanner: true,
 };
 
-function DownloadAppModal({showDownloadAppBanner}) {
-    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner);
+function DownloadAppModal({isAuthenticated, showDownloadAppBanner}) {
+    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && isAuthenticated && showDownloadAppBanner);
 
     const {translate} = useLocalize();
 

src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js

@@ -5,6 +5,7 @@ import lodashGet from 'lodash/get';
 import {View} from 'react-native';
 import styles from '../../../../styles/styles';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
+import * as Browser from '../../../../libs/Browser';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
 import NAVIGATORS from '../../../../NAVIGATORS';
@@ -61,6 +62,9 @@ const propTypes = {
     /** Indicated whether the report data is loading */
     isLoading: PropTypes.bool,
 
+    /** For first time users, whether the download app banner should show */
+    shouldShowDownloadAppBanner: PropTypes.bool,
+
     /** Forwarded ref to FloatingActionButtonAndPopover */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
@@ -71,6 +75,7 @@ const defaultProps = {
     betas: [],
     isLoading: false,
     innerRef: null,
+    shouldShowDownloadAppBanner: true,
 };
 
 /**
@@ -146,19 +151,19 @@ function FloatingActionButtonAndPopover(props) {
         }
     };
 
-    useEffect(
-        () => {
-            const navigationState = props.navigation.getState();
-            const routes = lodashGet(navigationState, 'routes', []);
-            const currentRoute = routes[navigationState.index];
-            if (currentRoute && ![NAVIGATORS.CENTRAL_PANE_NAVIGATOR, SCREENS.HOME].includes(currentRoute.name)) {
-                return;
-            }
-            Welcome.show({routes, showCreateMenu});
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
-    );
+    useEffect(() => {
+        const navigationState = props.navigation.getState();
+        const routes = lodashGet(navigationState, 'routes', []);
+        const currentRoute = routes[navigationState.index];
+        if (currentRoute && ![NAVIGATORS.CENTRAL_PANE_NAVIGATOR, SCREENS.HOME].includes(currentRoute.name)) {
+            return;
+        }
+        // Avoid rendering the create menu for first-time users until they have dismissed the download app banner (mWeb only).
+        if (props.shouldShowDownloadAppBanner || Browser.isMobile()) {
+            return;
+        }
+        Welcome.show({routes, showCreateMenu});
+    }, [props.shouldShowDownloadAppBanner, props.navigation, showCreateMenu]);
 
     useEffect(() => {
         if (!didScreenBecomeInactive()) {
@@ -286,6 +291,9 @@ export default compose(
         isLoading: {
             key: ONYXKEYS.IS_LOADING_REPORT_DATA,
         },
+        shouldShowDownloadAppBanner: {
+            key: ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER,
+        },
     }),
 )(
     forwardRef((props, ref) => (