Animate StatusBar background color

src/components/withCurrentReportId.js

@@ -69,4 +69,4 @@ export default function withCurrentReportId(WrappedComponent) {
     return WithCurrentReportId;
 }
 
-export {withCurrentReportIdPropTypes, CurrentReportIdContextProvider};
+export {withCurrentReportIdPropTypes, CurrentReportIdContextProvider, CurrentReportIdContext};

src/hooks/useCurrentReportID.js

@@ -0,0 +1,6 @@
+import {useContext} from 'react';
+import {CurrentReportIdContext} from '../components/withCurrentReportId';
+
+export default function useCurrentReportID() {
+    return useContext(CurrentReportIdContext);
+}

src/libs/Navigation/NavigationRoot.js

@@ -2,14 +2,15 @@ import React, {useRef} from 'react';
 import PropTypes from 'prop-types';
 import {NavigationContainer, DefaultTheme, getPathFromState} from '@react-navigation/native';
 import {useFlipper} from '@react-navigation/devtools';
+import {useSharedValue, useAnimatedReaction, interpolateColor, withTiming, withDelay, Easing, runOnJS} from 'react-native-reanimated';
 import Navigation, {navigationRef} from './Navigation';
 import linkingConfig from './linkingConfig';
 import AppNavigator from './AppNavigator';
 import themeColors from '../../styles/themes/default';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import Log from '../Log';
-import withCurrentReportId, {withCurrentReportIdPropTypes} from '../../components/withCurrentReportId';
-import compose from '../compose';
+import StatusBar from '../StatusBar';
+import useCurrentReportID from '../../hooks/useCurrentReportID';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 // https://reactnavigation.org/docs/themes
 const navigationTheme = {
@@ -21,14 +22,11 @@ const navigationTheme = {
 };
 
 const propTypes = {
-    ...windowDimensionsPropTypes,
-
     /** Whether the current user is logged in with an authToken */
     authenticated: PropTypes.bool.isRequired,
 
     /** Fired when react-navigation is ready */
     onReady: PropTypes.func.isRequired,
-    ...withCurrentReportIdPropTypes,
 };
 
 /**
@@ -56,18 +54,54 @@ function NavigationRoot(props) {
     useFlipper(navigationRef);
     const navigationStateRef = useRef(undefined);
 
+    const {updateCurrentReportId} = useCurrentReportID();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const prevStatusBarBackgroundColor = useRef(themeColors.appBG);
+    const statusBarBackgroundColor = useRef(themeColors.appBG);
+    const statusBarAnimation = useSharedValue(0);
+
+    useAnimatedReaction(
+        () => statusBarAnimation.value,
+        () => {
+            const color = interpolateColor(statusBarAnimation.value, [0, 1], [prevStatusBarBackgroundColor.current, statusBarBackgroundColor.current]);
+            runOnJS(StatusBar.setBackgroundColor)(color);
+        },
+    );
+
+    const animateStatusBarBackgroundColor = () => {
+        const currentRoute = navigationRef.getCurrentRoute();
+        const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG;
+
+        prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
+        statusBarBackgroundColor.current = currentScreenBackgroundColor;
+        if (prevStatusBarBackgroundColor.current === statusBarBackgroundColor.current) {
+            return;
+        }
+
+        statusBarAnimation.value = 0;
+        statusBarAnimation.value = withDelay(
+            300,
+            withTiming(1, {
+                duration: 300,
+                easing: Easing.in,
+            }),
+        );
+    };
+
     const updateSavedNavigationStateAndLogRoute = (state) => {
         if (!state) {
             return;
         }
         navigationStateRef.current = state;
-        props.updateCurrentReportId(state);
+        updateCurrentReportId(state);
         parseAndLogRoute(state);
+        animateStatusBarBackgroundColor();
     };
 
     return (
         <NavigationContainer
-            key={props.isSmallScreenWidth ? 'small' : 'big'}
+            key={isSmallScreenWidth ? 'small' : 'big'}
             onStateChange={updateSavedNavigationStateAndLogRoute}
             initialState={navigationStateRef.current}
             onReady={props.onReady}
@@ -85,4 +119,4 @@ function NavigationRoot(props) {
 
 NavigationRoot.displayName = 'NavigationRoot';
 NavigationRoot.propTypes = propTypes;
-export default compose(withWindowDimensions, withCurrentReportId)(NavigationRoot);
+export default NavigationRoot;

src/styles/themes/default.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import colors from '../colors';
+import SCREENS from '../../SCREENS';
 
 const darkTheme = {
     // Figma keys
@@ -77,6 +78,10 @@ const darkTheme = {
     ourMentionBG: colors.green600,
 };
 
+darkTheme.PAGE_BACKGROUND_COLORS = {
+    [SCREENS.HOME]: darkTheme.sidebar,
+};
+
 const oldTheme = {
     shadow: colors.black,
     link: colors.blue,