Merge pull request #25908 from allroundexperts/fix-23345

fix: maintain consistent topbar colour on login
Expensify · Sep 12, 2023 · d59ef09 · d59ef09
2 parents 64a067b + d55d166
commit d59ef09
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js
@@ -1,11 +1,22 @@
 import React, {useEffect} from 'react';
 import StatusBar from '../../libs/StatusBar';
+import Navigation, {navigationRef} from '../../libs/Navigation/Navigation';
 import themeColors from '../../styles/themes/default';
 
 function CustomStatusBar() {
     useEffect(() => {
-        StatusBar.setBarStyle('light-content', true);
-        StatusBar.setBackgroundColor(themeColors.appBG);
+        Navigation.isNavigationReady().then(() => {
+            // Set the status bar colour depending on the current route.
+            // If we don't have any colour defined for a route, fall back to
+            // appBG color.
+            const currentRoute = navigationRef.getCurrentRoute();
+            let currentScreenBackgroundColor = themeColors.appBG;
+            if (currentRoute && 'name' in currentRoute && currentRoute.name in themeColors.PAGE_BACKGROUND_COLORS) {
+                currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name];
+            }
+            StatusBar.setBarStyle('light-content', true);
+            StatusBar.setBackgroundColor(currentScreenBackgroundColor);
+        });
     }, []);
     return <StatusBar />;
 }

diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
@@ -86,7 +86,12 @@ function NavigationRoot(props) {
     const updateStatusBarBackgroundColor = (color) => StatusBar.setBackgroundColor(color);
     useAnimatedReaction(
         () => statusBarAnimation.value,
-        () => {
+        (current, previous) => {
+            // Do not run if either of the animated value is null
+            // or previous animated value is greater than or equal to the current one
+            if ([current, previous].includes(null) || current <= previous) {
+                return;
+            }
             const color = interpolateColor(statusBarAnimation.value, [0, 1], [prevStatusBarBackgroundColor.current, statusBarBackgroundColor.current]);
             runOnJS(updateStatusBarBackgroundColor)(color);
         },