Animate StatusBar background color

src/components/withCurrentReportId.js

@@ -9,6 +9,10 @@ const CurrentReportIdContext = createContext(null);
 const withCurrentReportIdPropTypes = {
     /** Actual content wrapped by this component */
     children: PropTypes.node.isRequired,
+
+    /** Function used to update the current reportId. Should probably only ever be used in one place in the whole app. */
+    // eslint-disable-next-line react/no-unused-prop-types
+    updateCurrentReportId: PropTypes.func.isRequired,
 };
 
 class CurrentReportIdContextProvider extends React.Component {
@@ -61,6 +65,7 @@ export default function withCurrentReportId(WrappedComponent) {
         </CurrentReportIdContext.Consumer>
     ));
 
+    WithCurrentReportId.propTypes = withCurrentReportIdPropTypes;
     WithCurrentReportId.displayName = `withCurrentReportId(${getComponentDisplayName(WrappedComponent)})`;
 
     return WithCurrentReportId;

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 from '../../components/withCurrentReportId';
-import compose from '../compose';
+import withCurrentReportId, {withCurrentReportIdPropTypes} from '../../components/withCurrentReportId';
+import StatusBar from '../StatusBar';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 // https://reactnavigation.org/docs/themes
 const navigationTheme = {
@@ -21,13 +22,13 @@ 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,
 };
 
 /**
@@ -52,18 +53,52 @@ function parseAndLogRoute(state) {
 }
 
 const NavigationRoot = (props) => {
+    const {isSmallScreenWidth} = useWindowDimensions();
     useFlipper(navigationRef);
     const navigationStateRef = useRef(undefined);
 
+    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) => {
         navigationStateRef.current = state;
         props.updateCurrentReportId(state);
         parseAndLogRoute(state);
+        animateStatusBarBackgroundColor();
     };
 
     return (
         <NavigationContainer
-            key={props.isSmallScreenWidth ? 'small' : 'big'}
+            key={isSmallScreenWidth ? 'small' : 'big'}
             onStateChange={updateSavedNavigationStateAndLogRoute}
             initialState={navigationStateRef.current}
             onReady={props.onReady}
@@ -81,4 +116,4 @@ const NavigationRoot = (props) => {
 
 NavigationRoot.displayName = 'NavigationRoot';
 NavigationRoot.propTypes = propTypes;
-export default compose(withWindowDimensions, withCurrentReportId)(NavigationRoot);
+export default withCurrentReportId(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,