From 1e8778c4ec1f2fc0b083f2bc0c33fa237ccb88ae Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 17 Jan 2024 16:44:02 +0700 Subject: [PATCH 1/5] fix: status bar style not update --- .../CustomStatusBarAndBackground/index.tsx | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index f66a0204ac5e..9ca5edeb7ed8 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -3,6 +3,7 @@ import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDela import useTheme from '@hooks/useTheme'; import {navigationRef} from '@libs/Navigation/Navigation'; import StatusBar from '@libs/StatusBar'; +import {StatusBarStyle} from '@styles/index'; import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext'; import updateGlobalBackgroundColor from './updateGlobalBackgroundColor'; import updateStatusBarAppearance from './updateStatusBarAppearance'; @@ -16,7 +17,7 @@ type CustomStatusBarAndBackgroundProps = { function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) { const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarAndBackgroundContext); const theme = useTheme(); - const [statusBarStyle, setStatusBarStyle] = useState(theme.statusBarStyle); + const [statusBarStyle, setStatusBarStyle] = useState(); const isDisabled = !isNested && isRootStatusBarDisabled; @@ -34,6 +35,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack }; }, [disableRootStatusBar, isNested]); + const didForceUpdateStatusBarRef = useRef(false); + const prevIsRootStatusBarDisabled = useRef(isRootStatusBarDisabled); const prevStatusBarBackgroundColor = useRef(theme.appBG); const statusBarBackgroundColor = useRef(theme.appBG); const statusBarAnimation = useSharedValue(0); @@ -94,27 +97,40 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack } // Don't update the status bar style if it's the same as the current one, to prevent flashing. - if (newStatusBarStyle !== statusBarStyle) { + // Force update if the root status bar is back on active or it won't overwirte the nested status bar style + if ((!didForceUpdateStatusBarRef.current && prevIsRootStatusBarDisabled.current && !isRootStatusBarDisabled) || newStatusBarStyle !== statusBarStyle) { updateStatusBarAppearance({statusBarStyle: newStatusBarStyle}); setStatusBarStyle(newStatusBarStyle); + + if (prevIsRootStatusBarDisabled.current && !isRootStatusBarDisabled) { + didForceUpdateStatusBarRef.current = true; + } } }, - [statusBarAnimation, statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle], + [isRootStatusBarDisabled, statusBarAnimation, statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle], ); - // Add navigation state listeners to update the status bar every time the route changes - // We have to pass a count as the listener id, because "react-navigation" somehow doesn't remove listeners properly + useEffect(() => { + prevIsRootStatusBarDisabled.current = isRootStatusBarDisabled; + didForceUpdateStatusBarRef.current = false; + }, [isRootStatusBarDisabled]); + useEffect(() => { if (isDisabled) { return; } + // Update status bar when theme changes + updateStatusBarStyle(); + + // Add navigation state listeners to update the status bar every time the route changes + // We have to pass a count as the listener id, because "react-navigation" somehow doesn't remove listeners properly const listenerId = ++listenerCount.current; const listener = () => updateStatusBarStyle(listenerId); navigationRef.addListener('state', listener); return () => navigationRef.removeListener('state', listener); - }, [isDisabled, theme.appBG, updateStatusBarStyle]); + }, [isDisabled, updateStatusBarStyle]); // Update the global background (on web) everytime the theme changes. // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web. From 84b4eb44595dbe70a5752cb6e9f044a61975af89 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 17 Jan 2024 17:00:55 +0700 Subject: [PATCH 2/5] use usePrevious --- src/components/CustomStatusBarAndBackground/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index 9ca5edeb7ed8..576a7249fe03 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -7,6 +7,7 @@ import {StatusBarStyle} from '@styles/index'; import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext'; import updateGlobalBackgroundColor from './updateGlobalBackgroundColor'; import updateStatusBarAppearance from './updateStatusBarAppearance'; +import usePrevious from '@hooks/usePrevious'; type CustomStatusBarAndBackgroundProps = { /** Whether the CustomStatusBar is nested within another CustomStatusBar. @@ -36,7 +37,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack }, [disableRootStatusBar, isNested]); const didForceUpdateStatusBarRef = useRef(false); - const prevIsRootStatusBarDisabled = useRef(isRootStatusBarDisabled); + const prevIsRootStatusBarDisabled = usePrevious(isRootStatusBarDisabled); const prevStatusBarBackgroundColor = useRef(theme.appBG); const statusBarBackgroundColor = useRef(theme.appBG); const statusBarAnimation = useSharedValue(0); @@ -98,11 +99,11 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack // Don't update the status bar style if it's the same as the current one, to prevent flashing. // Force update if the root status bar is back on active or it won't overwirte the nested status bar style - if ((!didForceUpdateStatusBarRef.current && prevIsRootStatusBarDisabled.current && !isRootStatusBarDisabled) || newStatusBarStyle !== statusBarStyle) { + if ((!didForceUpdateStatusBarRef.current && prevIsRootStatusBarDisabled && !isRootStatusBarDisabled) || newStatusBarStyle !== statusBarStyle) { updateStatusBarAppearance({statusBarStyle: newStatusBarStyle}); setStatusBarStyle(newStatusBarStyle); - if (prevIsRootStatusBarDisabled.current && !isRootStatusBarDisabled) { + if (prevIsRootStatusBarDisabled && !isRootStatusBarDisabled) { didForceUpdateStatusBarRef.current = true; } } @@ -111,7 +112,6 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack ); useEffect(() => { - prevIsRootStatusBarDisabled.current = isRootStatusBarDisabled; didForceUpdateStatusBarRef.current = false; }, [isRootStatusBarDisabled]); From acfc8233be9c2382d77a7aa3bd4da6371deca33e Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 17 Jan 2024 17:06:24 +0700 Subject: [PATCH 3/5] fix lint --- src/components/CustomStatusBarAndBackground/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index 576a7249fe03..fa1ab2362151 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -1,13 +1,13 @@ import React, {useCallback, useContext, useEffect, useRef, useState} from 'react'; import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated'; +import usePrevious from '@hooks/usePrevious'; import useTheme from '@hooks/useTheme'; import {navigationRef} from '@libs/Navigation/Navigation'; import StatusBar from '@libs/StatusBar'; -import {StatusBarStyle} from '@styles/index'; +import type {StatusBarStyle} from '@styles/index'; import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext'; import updateGlobalBackgroundColor from './updateGlobalBackgroundColor'; import updateStatusBarAppearance from './updateStatusBarAppearance'; -import usePrevious from '@hooks/usePrevious'; type CustomStatusBarAndBackgroundProps = { /** Whether the CustomStatusBar is nested within another CustomStatusBar. @@ -108,7 +108,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack } } }, - [isRootStatusBarDisabled, statusBarAnimation, statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle], + [prevIsRootStatusBarDisabled, isRootStatusBarDisabled, statusBarAnimation, statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle], ); useEffect(() => { From 56824378197d9893f86bab6568db2eb70d58ed2d Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 30 Jan 2024 01:31:35 +0700 Subject: [PATCH 4/5] fix variable cap --- src/components/CustomStatusBarAndBackground/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index fa1ab2362151..33a9003d1f64 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -60,9 +60,9 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack // Updates the status bar style and background color depending on the current route and theme // This callback is triggered everytime the route changes or the theme changes const updateStatusBarStyle = useCallback( - (listenerId?: number) => { + (listenerID?: number) => { // Check if this function is either called through the current navigation listener or the general useEffect which listens for theme changes. - if (listenerId !== undefined && listenerId !== listenerCount.current) { + if (listenerID !== undefined && listenerID !== listenerCount.current) { return; } @@ -125,8 +125,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack // Add navigation state listeners to update the status bar every time the route changes // We have to pass a count as the listener id, because "react-navigation" somehow doesn't remove listeners properly - const listenerId = ++listenerCount.current; - const listener = () => updateStatusBarStyle(listenerId); + const listenerID = ++listenerCount.current; + const listener = () => updateStatusBarStyle(listenerID); navigationRef.addListener('state', listener); return () => navigationRef.removeListener('state', listener); From eb50d450940d30b3d946f705ad795e695cbf8448 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 30 Jan 2024 20:00:30 +0700 Subject: [PATCH 5/5] add missing mock functions for navigationRef --- tests/perf-test/SignInPage.perf-test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx index 80964c3c49cd..c7c3eebc25a4 100644 --- a/tests/perf-test/SignInPage.perf-test.tsx +++ b/tests/perf-test/SignInPage.perf-test.tsx @@ -25,6 +25,8 @@ jest.mock('../../src/libs/Navigation/Navigation', () => { navigationRef: { addListener: () => jest.fn(), removeListener: () => jest.fn(), + isReady: () => jest.fn(), + getCurrentRoute: () => jest.fn(), }, } as typeof Navigation; });