Fix/status bar color on mweb

src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx

@@ -1,11 +1,12 @@
 import {createContext} from 'react';
 
 type CustomStatusBarAndBackgroundContextType = {
-    isRootStatusBarDisabled: boolean;
-    disableRootStatusBar: (isDisabled: boolean) => void;
+    isRootStatusBarEnabled: boolean;
+    setRootStatusBarEnabled: (isEnabled: boolean) => void;
 };
 
-const CustomStatusBarAndBackgroundContext = createContext<CustomStatusBarAndBackgroundContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
+// Signin page has its seperate Statusbar and ThemeProvider, so when user is on the SignInPage we need to disable the root statusbar so there is no double status bar in component stack, first in Root and other in SignInPage
+const CustomStatusBarAndBackgroundContext = createContext<CustomStatusBarAndBackgroundContextType>({isRootStatusBarEnabled: true, setRootStatusBarEnabled: () => undefined});
 
 export default CustomStatusBarAndBackgroundContext;
 export {type CustomStatusBarAndBackgroundContextType};

src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx

@@ -2,13 +2,13 @@ import React, {useMemo, useState} from 'react';
 import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext';
 
 function CustomStatusBarAndBackgroundContextProvider({children}: React.PropsWithChildren) {
-    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
+    const [isRootStatusBarEnabled, setRootStatusBarEnabled] = useState(true);
     const value = useMemo(
         () => ({
-            isRootStatusBarDisabled,
-            disableRootStatusBar,
+            isRootStatusBarEnabled,
+            setRootStatusBarEnabled,
         }),
-        [isRootStatusBarDisabled],
+        [isRootStatusBarEnabled],
     );
 
     return <CustomStatusBarAndBackgroundContext.Provider value={value}>{children}</CustomStatusBarAndBackgroundContext.Provider>;

src/components/CustomStatusBarAndBackground/index.tsx

@@ -1,8 +1,10 @@
 import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
 import useTheme from '@hooks/useTheme';
+import getPlatform from '@libs/getPlatform';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
+import CONST from '@src/CONST';
 import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext';
 import updateGlobalBackgroundColor from './updateGlobalBackgroundColor';
 import updateStatusBarAppearance from './updateStatusBarAppearance';
@@ -14,28 +16,30 @@ type CustomStatusBarAndBackgroundProps = {
 };
 
 function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) {
-    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarAndBackgroundContext);
+    const {isRootStatusBarEnabled, setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext);
     const theme = useTheme();
     const [statusBarStyle, setStatusBarStyle] = useState(theme.statusBarStyle);
 
-    const isDisabled = !isNested && isRootStatusBarDisabled;
+    const isDisabled = !isNested && !isRootStatusBarEnabled;
 
     // Disable the root status bar when a nested status bar is rendered
     useEffect(() => {
         if (isNested) {
-            disableRootStatusBar(true);
+            setRootStatusBarEnabled(false);
         }
 
         return () => {
             if (!isNested) {
                 return;
             }
-            disableRootStatusBar(false);
+            setRootStatusBarEnabled(true);
         };
-    }, [disableRootStatusBar, isNested]);
+    }, [isNested, setRootStatusBarEnabled]);
 
-    const prevStatusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarBackgroundColor = useRef(theme.appBG);
+    // the prev and current status bar background color refs are initialized with the splash screen background color so the status bar color is changed from the splash screen color to the expected color atleast once on first render - https://github.com/Expensify/App/issues/34154
+    const initialBgColor = getPlatform() === CONST.PLATFORM.WEB ? theme.splashBGWeb : theme.splashBG;
+    const prevStatusBarBackgroundColor = useRef(initialBgColor);
+    const statusBarBackgroundColor = useRef(initialBgColor);
     const statusBarAnimation = useSharedValue(0);
 
     useAnimatedReaction(
@@ -57,7 +61,9 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
     // This callback is triggered everytime the route changes or the theme changes
     const updateStatusBarStyle = useCallback(
         (listenerId?: number) => {
-            // Check if this function is either called through the current navigation listener or the general useEffect which listens for theme changes.
+            // Check if this function is either called through the current navigation listener
+            // react-navigation library has a bug internally, where it can't keep track of the listeners, therefore, sometimes when the useEffect would re-render and we run navigationRef.removeListener the listener isn't removed and we end up with two or more listeners.
+            // https://github.com/Expensify/App/issues/34154#issuecomment-1898519399
             if (listenerId !== undefined && listenerId !== listenerCount.current) {
                 return;
             }

src/styles/theme/themes/dark.ts

@@ -62,6 +62,7 @@ const darkTheme = {
     placeholderText: colors.productDark700,
     heroCard: colors.blue400,
     uploadPreviewActivityIndicator: colors.productDark200,
+    splashBGWeb: colors.productDark100,
     dropUIBG: 'rgba(6,27,9,0.92)',
     receiptDropUIBG: 'rgba(3, 212, 124, 0.84)',
     checkBox: colors.green400,

src/styles/theme/themes/light.ts

@@ -56,6 +56,7 @@ const lightTheme = {
     offline: colors.productLight700,
     modalBackground: colors.productLight100,
     cardBG: colors.productLight200,
+    splashBGWeb: colors.productDark100,
     cardBorder: colors.productLight200,
     spinner: colors.productLight800,
     unreadIndicator: colors.green400,

src/styles/theme/types.ts

@@ -78,6 +78,7 @@ type ThemeColors = {
     mentionBG: Color;
     ourMentionText: Color;
     ourMentionBG: Color;
+    splashBGWeb: Color;
     tooltipSupportingText: Color;
     tooltipPrimaryText: Color;
     skeletonLHNIn: Color;