Merge pull request #34409 from ishpaul777/fix/status-bar-color-on-mweb

Fix/status bar color on mweb

Author: roryabraham

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

@@ -14,28 +14,29 @@ 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 prevStatusBarBackgroundColor = useRef(theme.splashBG);
+    const statusBarBackgroundColor = useRef(theme.splashBG);
     const statusBarAnimation = useSharedValue(0);
 
     useAnimatedReaction(
@@ -57,7 +58,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/libs/getSplashBackgroundColor/index.native.ts

@@ -0,0 +1,7 @@
+import colors from '@styles/theme/colors';
+
+function getSplashBackgroundColor() {
+    return colors.green400;
+}
+
+export default getSplashBackgroundColor;

src/libs/getSplashBackgroundColor/index.ts

@@ -0,0 +1,7 @@
+import colors from '@styles/theme/colors';
+
+function getSplashBackgroundColor() {
+    return colors.productDark100;
+}
+
+export default getSplashBackgroundColor;

src/styles/theme/themes/dark.ts

@@ -1,3 +1,4 @@
+import getSplashBackgroundColor from '@libs/getSplashBackgroundColor';
 import colors from '@styles/theme/colors';
 import type {ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
@@ -6,7 +7,7 @@ import SCREENS from '@src/SCREENS';
 const darkTheme = {
     // Figma keys
     appBG: colors.productDark100,
-    splashBG: colors.green400,
+    splashBG: getSplashBackgroundColor(),
     highlightBG: colors.productDark200,
     border: colors.productDark400,
     borderLighter: colors.productDark400,

src/styles/theme/themes/light.ts

@@ -1,3 +1,4 @@
+import getSplashBackgroundColor from '@libs/getSplashBackgroundColor';
 import colors from '@styles/theme/colors';
 import type {ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
@@ -6,7 +7,7 @@ import SCREENS from '@src/SCREENS';
 const lightTheme = {
     // Figma keys
     appBG: colors.productLight100,
-    splashBG: colors.green400,
+    splashBG: getSplashBackgroundColor(),
     highlightBG: colors.productLight200,
     border: colors.productLight400,
     borderLighter: colors.productLight400,