fix: global background

src/App.js

@@ -8,8 +8,8 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
-import CustomStatusBar from './components/CustomStatusBar';
-import CustomStatusBarContextProvider from './components/CustomStatusBar/CustomStatusBarContextProvider';
+import CustomStatusBarAndBackground from './components/CustomStatusBarAndBackground';
+import CustomStatusBarContextProvider from './components/CustomStatusBarAndBackground/CustomStatusBarContextProvider';
 import ErrorBoundary from './components/ErrorBoundary';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
@@ -71,7 +71,7 @@ function App() {
                     CustomStatusBarContextProvider,
                 ]}
             >
-                <CustomStatusBar />
+                <CustomStatusBarAndBackground />
                 <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
                     <ColorSchemeWrapper>
                         <Expensify />

src/Expensify.js

@@ -37,7 +37,6 @@ import Visibility from './libs/Visibility';
 import ONYXKEYS from './ONYXKEYS';
 import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu';
 import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';
-import useTheme from './styles/themes/useTheme';
 
 Onyx.registerLogger(({level, message}) => {
     if (level === 'alert') {
@@ -99,7 +98,6 @@ const defaultProps = {
 const SplashScreenHiddenContext = React.createContext({});
 
 function Expensify(props) {
-    const theme = useTheme();
     const appStateChangeListener = useRef(null);
     const [isNavigationReady, setIsNavigationReady] = useState(false);
     const [isOnyxMigrated, setIsOnyxMigrated] = useState(false);
@@ -204,11 +202,6 @@ function Expensify(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
     }, []);
 
-    useEffect(() => {
-        const htmlElement = document.getElementsByTagName('html')[0];
-        htmlElement.style.setProperty('background-color', theme.appBG);
-    }, [theme.appBG]);
-
     // Display a blank page until the onyx migration completes
     if (!isOnyxMigrated) {
         return null;

src/components/CustomStatusBar/index.tsx → src/components/CustomStatusBarAndBackground/index.tsx

@@ -1,34 +1,25 @@
-import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useEffect} from 'react';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
 import CustomStatusBarContext from './CustomStatusBarContext';
+import updateGlobalBackgroundColor from './updateGlobalBackgroundColor';
 import updateStatusBarAppearance from './updateStatusBarAppearance';
 
-type CustomStatusBarProps = {
+type CustomStatusBarAndBackgroundProps = {
     isNested: boolean;
 };
 
-const propTypes = {
-    /** Whether the CustomStatusBar is nested within another CustomStatusBar.
-     *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
-    isNested: PropTypes.bool,
-};
-
-type CustomStatusBarType = {
-    (props: CustomStatusBarProps): React.ReactNode;
-    displayName: string;
-    propTypes: typeof propTypes;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
+function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) {
     const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
     const theme = useTheme();
 
     const isDisabled = !isNested && isRootStatusBarDisabled;
 
+    useEffect(() => {
+        updateGlobalBackgroundColor(theme);
+    }, [theme]);
+
     useEffect(() => {
         if (isNested) {
             disableRootStatusBar(true);
@@ -85,9 +76,8 @@ const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
     }
 
     return <StatusBar />;
-};
+}
 
-CustomStatusBar.displayName = 'CustomStatusBar';
-CustomStatusBar.propTypes = propTypes;
+CustomStatusBarAndBackground.displayName = 'CustomStatusBar';
 
-export default CustomStatusBar;
+export default CustomStatusBarAndBackground;

src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts

@@ -0,0 +1,5 @@
+import type UpdateGlobalBackgroundColor from './types';
+
+const updateGlobalBackgroundColor: UpdateGlobalBackgroundColor = () => undefined;
+
+export default updateGlobalBackgroundColor;

src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.web.ts

@@ -0,0 +1,8 @@
+import UpdateGlobalBackgroundColor from './types';
+
+const updateGlobalBackgroundColor: UpdateGlobalBackgroundColor = (theme) => {
+    const htmlElement = document.getElementsByTagName('html')[0];
+    htmlElement.style.setProperty('background-color', theme.appBG);
+};
+
+export default updateGlobalBackgroundColor;

src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts

@@ -0,0 +1,5 @@
+import {ThemeColors} from '@styles/themes/types';
+
+type UpdateGlobalBackgroundColor = (theme: ThemeColors) => void;
+
+export default UpdateGlobalBackgroundColor;

src/pages/signin/SignInPage.js

@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
-import CustomStatusBar from '@components/CustomStatusBar';
+import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackground';
 import useLocalize from '@hooks/useLocalize';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -288,7 +288,7 @@ function SignInPage(props) {
         <ThemeProvider theme={CONST.THEME.DARK}>
             <ThemeStylesProvider>
                 <ColorSchemeWrapper>
-                    <CustomStatusBar isNested />
+                    <CustomStatusBarAndBackground isNested />
                     <SignInPageInner
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...props}