From 7bd9bdb6cdebbbd78f66be666a63e1cc53bea26f Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 25 Aug 2023 04:07:24 +0500 Subject: [PATCH 1/4] fix: maintain consistent topbar colour on login --- src/components/CustomStatusBar/index.js | 9 +++++++-- src/libs/Navigation/NavigationRoot.js | 7 ++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 76752cb549e1..85eda64bcb18 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -1,11 +1,16 @@ 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(() => { + const currentRoute = navigationRef.getCurrentRoute(); + const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; + StatusBar.setBarStyle('light-content', true); + StatusBar.setBackgroundColor(currentScreenBackgroundColor); + }); }, []); return ; } diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index 23c320eb991c..4dc4acd677fe 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -79,7 +79,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); }, From c736a71601586466fc9673f39249f41441d4bf59 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 25 Aug 2023 04:21:12 +0500 Subject: [PATCH 2/4] fix: prettier --- src/components/CustomStatusBar/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 85eda64bcb18..342796ede969 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -7,9 +7,9 @@ function CustomStatusBar() { useEffect(() => { Navigation.isNavigationReady().then(() => { const currentRoute = navigationRef.getCurrentRoute(); - const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; + const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; StatusBar.setBarStyle('light-content', true); - StatusBar.setBackgroundColor(currentScreenBackgroundColor); + StatusBar.setBackgroundColor(currentScreenBackgroundColor); }); }, []); return ; From 18cec5e3bdb26d65d72c3215de07af6431068967 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 25 Aug 2023 04:33:23 +0500 Subject: [PATCH 3/4] fix: failing tests --- src/components/CustomStatusBar/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 342796ede969..4d2aa919e73b 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -7,7 +7,10 @@ function CustomStatusBar() { useEffect(() => { Navigation.isNavigationReady().then(() => { const currentRoute = navigationRef.getCurrentRoute(); - const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; + 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); }); From 9d281557e187a502e9c36c8a4212730fe0270301 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 31 Aug 2023 15:49:36 +0500 Subject: [PATCH 4/4] fix: add a comment --- src/components/CustomStatusBar/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 4d2aa919e73b..4848e6e35f59 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -6,6 +6,9 @@ import themeColors from '../../styles/themes/default'; function CustomStatusBar() { useEffect(() => { 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) {