fix: resolve conflicts

.imgbotconfig

@@ -1,6 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade.png" // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040601
-        versionName "1.4.6-1"
+        versionCode 1001040602
+        versionName "1.4.6-2"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.1</string>
+	<string>1.4.6.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.1</string>
+	<string>1.4.6.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.6-1",
+  "version": "1.4.6-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/App.js

@@ -6,8 +6,10 @@ import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 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 ErrorBoundary from './components/ErrorBoundary';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
@@ -66,11 +68,14 @@ function App() {
                     ThemeProvider,
                     ThemeStylesProvider,
                     ThemeIllustrationsProvider,
+                    CustomStatusBarContextProvider,
                 ]}
             >
                 <CustomStatusBar />
                 <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
-                    <Expensify />
+                    <ColorSchemeWrapper>
+                        <Expensify />
+                    </ColorSchemeWrapper>
                 </ErrorBoundary>
             </ComposeProviders>
         </GestureHandlerRootView>

src/CONST.ts

@@ -699,6 +699,14 @@ const CONST = {
         DARK: 'dark',
         SYSTEM: 'system',
     },
+    COLOR_SCHEME: {
+        LIGHT: 'light',
+        DARK: 'dark',
+    },
+    STATUS_BAR_STYLE: {
+        LIGHT_CONTENT: 'light-content',
+        DARK_CONTENT: 'dark-content',
+    },
     TRANSACTION: {
         DEFAULT_MERCHANT: 'Request',
         UNKNOWN_MERCHANT: 'Unknown Merchant',

src/components/ColorSchemeWrapper/index.native.tsx

@@ -0,0 +1,5 @@
+function ColorSchemeWrapper({children}: React.PropsWithChildren) {
+    return children;
+}
+
+export default ColorSchemeWrapper;

src/components/ColorSchemeWrapper/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {View} from 'react-native';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+
+function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
+    const theme = useTheme();
+    const themeStyles = useThemeStyles();
+
+    return <View style={[themeStyles.flex1, themeStyles.colorSchemeStyle(theme.colorScheme)]}>{children}</View>;
+}
+
+export default ColorSchemeWrapper;

src/components/CustomStatusBar/CustomStatusBarContext.tsx

@@ -0,0 +1,11 @@
+import {createContext} from 'react';
+
+type CustomStatusBarContextType = {
+    isRootStatusBarDisabled: boolean;
+    disableRootStatusBar: (isDisabled: boolean) => void;
+};
+
+const CustomStatusBarContext = createContext<CustomStatusBarContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
+
+export default CustomStatusBarContext;
+export {type CustomStatusBarContextType};

src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx

@@ -0,0 +1,17 @@
+import React, {useMemo, useState} from 'react';
+import CustomStatusBarContext from './CustomStatusBarContext';
+
+function CustomStatusBarContextProvider({children}: React.PropsWithChildren) {
+    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
+    const value = useMemo(
+        () => ({
+            isRootStatusBarDisabled,
+            disableRootStatusBar,
+        }),
+        [isRootStatusBarDisabled],
+    );
+
+    return <CustomStatusBarContext.Provider value={value}>{children}</CustomStatusBarContext.Provider>;
+}
+
+export default CustomStatusBarContextProvider;

src/components/CustomStatusBar/index.tsx

@@ -1,29 +1,91 @@
-import React, {useEffect} from 'react';
-import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
+import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native';
+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 type CustomStatusBarType from './types';
+import CustomStatusBarContext from './CustomStatusBarContext';
+
+type CustomStatusBarProps = {
+    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 = () => {
+const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
+    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
     const theme = useTheme();
+
+    const isDisabled = !isNested && isRootStatusBarDisabled;
+
     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 = theme.appBG;
-            if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_BACKGROUND_COLORS) {
-                currentScreenBackgroundColor = theme.PAGE_BACKGROUND_COLORS[currentRoute.name];
+        if (isNested) {
+            disableRootStatusBar(true);
+        }
+
+        return () => {
+            if (!isNested) {
+                return;
             }
-            StatusBar.setBarStyle('light-content', true);
-            StatusBar.setBackgroundColor(currentScreenBackgroundColor);
-        });
-    }, [theme.PAGE_BACKGROUND_COLORS, theme.appBG]);
+            disableRootStatusBar(false);
+        };
+    }, [disableRootStatusBar, isNested]);
+
+    const updateStatusBarStyle = useCallback<EventListenerCallback<NavigationContainerEventMap, 'state'>>(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        // 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 = theme.appBG;
+        let statusBarStyle = theme.statusBarStyle;
+        if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
+            const screenTheme = theme.PAGE_THEMES[currentRoute.name];
+            currentScreenBackgroundColor = screenTheme.backgroundColor;
+            statusBarStyle = screenTheme.statusBarStyle;
+        }
+
+        StatusBar.setBackgroundColor(currentScreenBackgroundColor, true);
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
+
+    useEffect(() => {
+        navigationRef.addListener('state', updateStatusBarStyle);
+
+        return () => navigationRef.removeListener('state', updateStatusBarStyle);
+    }, [updateStatusBarStyle]);
+
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        StatusBar.setBarStyle(theme.statusBarStyle, true);
+    }, [isDisabled, theme.statusBarStyle]);
+
+    if (isDisabled) {
+        return null;
+    }
+
     return <StatusBar />;
 };
 
 CustomStatusBar.displayName = 'CustomStatusBar';
+CustomStatusBar.propTypes = propTypes;
 
 export default CustomStatusBar;

src/components/FeatureList.js

@@ -42,6 +42,7 @@ function FeatureList({menuItems, headline, description}) {
                     iconHeight={60}
                     iconStyles={[styles.mr3, styles.ml3]}
                     interactive={false}
+                    wrapperStyle={[styles.cursorAuto]}
                 />
             ))}
         </>

src/components/TabSelector/TabSelector.js

@@ -102,7 +102,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
             {_.map(state.routes, (route, index) => {
                 const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs);
                 const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs);
-                const backgroundColor = getBackgroundColor(position, state.routes.length, index, affectedAnimatedTabs);
+                const backgroundColor = getBackgroundColor(state.routes.length, index, affectedAnimatedTabs);
                 const isFocused = index === state.index;
                 const {icon, title} = getIconAndTitle(route.name, translate);
 

src/libs/Navigation/NavigationRoot.tsx

@@ -1,12 +1,9 @@
 import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} from '@react-navigation/native';
 import React, {useEffect, useMemo, useRef} from 'react';
-import {ColorValue} from 'react-native';
-import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
-import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
@@ -42,8 +39,8 @@ function parseAndLogRoute(state: NavigationState) {
 
 function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
     useFlipper(navigationRef);
-    const theme = useTheme();
     const firstRenderRef = useRef(true);
+    const theme = useTheme();
 
     const currentReportIDValue = useCurrentReportID();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -82,46 +79,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
         navigationRef.resetRoot(navigationRef.getRootState());
     }, [isSmallScreenWidth, authenticated]);
 
-    const prevStatusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarAnimation = useSharedValue(0);
-
-    const updateStatusBarBackgroundColor = (color: ColorValue) => 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 (previous === null || current === null || current <= previous) {
-                return;
-            }
-            const color = interpolateColor(statusBarAnimation.value, [0, 1], [prevStatusBarBackgroundColor.current, statusBarBackgroundColor.current]);
-            runOnJS(updateStatusBarBackgroundColor)(color);
-        },
-    );
-
-    const animateStatusBarBackgroundColor = () => {
-        const currentRoute = navigationRef.getCurrentRoute();
-
-        const backgroundColorFromRoute =
-            currentRoute?.params && 'backgroundColor' in currentRoute.params && typeof currentRoute.params.backgroundColor === 'string' && currentRoute.params.backgroundColor;
-        const backgroundColorFallback = currentRoute?.name ? theme.PAGE_BACKGROUND_COLORS[currentRoute.name] || theme.appBG : theme.appBG;
-
-        // It's possible for backgroundColorFromRoute to be empty string, so we must use "||" to fallback to backgroundColorFallback.
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const currentScreenBackgroundColor = backgroundColorFromRoute || backgroundColorFallback;
-
-        prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
-        statusBarBackgroundColor.current = currentScreenBackgroundColor;
-
-        if (currentScreenBackgroundColor === theme.appBG && prevStatusBarBackgroundColor.current === theme.appBG) {
-            return;
-        }
-
-        statusBarAnimation.value = 0;
-        statusBarAnimation.value = withDelay(300, withTiming(1));
-    };
-
     const handleStateChange = (state: NavigationState | undefined) => {
         if (!state) {
             return;
@@ -132,7 +89,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
             currentReportIDValue?.updateCurrentReportID(state);
         }, 0);
         parseAndLogRoute(state);
-        animateStatusBarBackgroundColor();
     };
 
     return (

src/libs/StatusBar/index.android.ts

@@ -1,10 +1,14 @@
 import StatusBar from './types';
 
-// Only has custom web implementation
-StatusBar.getBackgroundColor = () => null;
+const setBackgroundColor = StatusBar.setBackgroundColor;
 
-// We override this because it's not used – on Android our app display edge-to-edge.
-// Also because Reanimated's interpolateColor gives Android native colors instead of hex strings, causing this to display a warning.
-StatusBar.setBackgroundColor = () => null;
+let statusBarColor: string | null = null;
+
+StatusBar.getBackgroundColor = () => statusBarColor;
+
+StatusBar.setBackgroundColor = (color, animated = false) => {
+    statusBarColor = color as string;
+    setBackgroundColor(color, animated);
+};
 
 export default StatusBar;