Merge pull request #42026 from allroundexperts/fix-39481

fix: re-add finetunings

src/CONST.ts

@@ -78,8 +78,13 @@ const CONST = {
     // Note: Group and Self-DM excluded as these are not tied to a Workspace
     WORKSPACE_ROOM_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL, chatTypes.POLICY_ROOM, chatTypes.POLICY_EXPENSE_CHAT],
     ANDROID_PACKAGE_NAME,
-    ANIMATED_HIGHLIGHT_DELAY: 500,
-    ANIMATED_HIGHLIGHT_DURATION: 500,
+    WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY: 100,
+    ANIMATED_HIGHLIGHT_ENTRY_DELAY: 50,
+    ANIMATED_HIGHLIGHT_ENTRY_DURATION: 300,
+    ANIMATED_HIGHLIGHT_START_DELAY: 10,
+    ANIMATED_HIGHLIGHT_START_DURATION: 300,
+    ANIMATED_HIGHLIGHT_END_DELAY: 800,
+    ANIMATED_HIGHLIGHT_END_DURATION: 2000,
     ANIMATED_TRANSITION: 300,
     ANIMATED_TRANSITION_FROM_VALUE: 100,
     ANIMATION_IN_TIMING: 100,
@@ -90,6 +95,7 @@ const CONST = {
     // Multiplier for gyroscope animation in order to make it a bit more subtle
     ANIMATION_GYROSCOPE_VALUE: 0.4,
     BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,
+    SCREEN_TRANSITION_END_TIMEOUT: 1000,
     ARROW_HIDE_DELAY: 3000,
 
     API_ATTACHMENT_VALIDATIONS: {

src/components/ScreenWrapper.tsx

@@ -169,12 +169,18 @@ function ScreenWrapper(
     ).current;
 
     useEffect(() => {
+        // On iOS, the transitionEnd event doesn't trigger some times. As such, we need to set a timeout
+        const timeout = setTimeout(() => {
+            setDidScreenTransitionEnd(true);
+            onEntryTransitionEnd?.();
+        }, CONST.SCREEN_TRANSITION_END_TIMEOUT);
+
         const unsubscribeTransitionEnd = navigation.addListener('transitionEnd', (event) => {
             // Prevent firing the prop callback when user is exiting the page.
             if (event?.data?.closing) {
                 return;
             }
-
+            clearTimeout(timeout);
             setDidScreenTransitionEnd(true);
             onEntryTransitionEnd?.();
         });
@@ -192,6 +198,7 @@ function ScreenWrapper(
             : undefined;
 
         return () => {
+            clearTimeout(timeout);
             unsubscribeTransitionEnd();
 
             if (beforeRemoveSubscription) {

src/hooks/useAnimatedHighlightStyle/index.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {InteractionManager} from 'react-native';
 import {Easing, interpolate, interpolateColor, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated';
+import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus';
 import useTheme from '@hooks/useTheme';
 import CONST from '@src/CONST';
-import {DELAY_FACTOR} from './config';
 
 type Props = {
     /** Border radius of the wrapper */
@@ -12,14 +12,26 @@ type Props = {
     /** Height of the item that is to be faded */
     height: number;
 
-    /** Whether the item should be highlighted */
-    shouldHighlight: boolean;
+    /** Delay before the highlighted item enters */
+    itemEnterDelay?: number;
+
+    /** Duration in which the item enters */
+    itemEnterDuration?: number;
+
+    /** Delay before the item starts to get highlighted */
+    highlightStartDelay?: number;
+
+    /** Duration in which the item gets fully highlighted */
+    highlightStartDuration?: number;
+
+    /** Delay before the item starts to get un-highlighted */
+    highlightEndDelay?: number;
 
-    /** Duration of the highlight animation */
-    highlightDuration?: number;
+    /** Duration in which the item gets fully un-highlighted */
+    highlightEndDuration?: number;
 
-    /** Delay before the highlight animation starts */
-    delay?: number;
+    /** Whether the item should be highlighted */
+    shouldHighlight: boolean;
 };
 
 /**
@@ -28,37 +40,68 @@ type Props = {
 export default function useAnimatedHighlightStyle({
     borderRadius,
     shouldHighlight,
-    highlightDuration = CONST.ANIMATED_HIGHLIGHT_DURATION,
-    delay = CONST.ANIMATED_HIGHLIGHT_DELAY,
+    itemEnterDelay = CONST.ANIMATED_HIGHLIGHT_ENTRY_DELAY,
+    itemEnterDuration = CONST.ANIMATED_HIGHLIGHT_ENTRY_DURATION,
+    highlightStartDelay = CONST.ANIMATED_HIGHLIGHT_START_DELAY,
+    highlightStartDuration = CONST.ANIMATED_HIGHLIGHT_START_DURATION,
+    highlightEndDelay = CONST.ANIMATED_HIGHLIGHT_END_DELAY,
+    highlightEndDuration = CONST.ANIMATED_HIGHLIGHT_END_DURATION,
     height,
 }: Props) {
-    const actualDelay = delay * DELAY_FACTOR;
+    const [startHighlight, setStartHighlight] = useState(false);
     const repeatableProgress = useSharedValue(0);
     const nonRepeatableProgress = useSharedValue(shouldHighlight ? 0 : 1);
+    const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus();
     const theme = useTheme();
 
     const highlightBackgroundStyle = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(repeatableProgress.value, [0, 1], ['rgba(0, 0, 0, 0)', theme.border]),
+        backgroundColor: interpolateColor(repeatableProgress.value, [0, 1], [theme.appBG, theme.border]),
         height: interpolate(nonRepeatableProgress.value, [0, 1], [0, height]),
         opacity: interpolate(nonRepeatableProgress.value, [0, 1], [0, 1]),
         borderRadius,
     }));
 
     React.useEffect(() => {
-        if (!shouldHighlight) {
+        if (!shouldHighlight || startHighlight) {
             return;
         }
+        setStartHighlight(true);
+    }, [shouldHighlight, startHighlight]);
 
+    React.useEffect(() => {
+        if (!startHighlight || !didScreenTransitionEnd) {
+            return;
+        }
+        setStartHighlight(false);
         InteractionManager.runAfterInteractions(() => {
             runOnJS(() => {
-                nonRepeatableProgress.value = withDelay(actualDelay, withTiming(1, {duration: highlightDuration, easing: Easing.inOut(Easing.ease)}));
-                repeatableProgress.value = withSequence(
-                    withDelay(actualDelay, withTiming(1, {duration: highlightDuration, easing: Easing.inOut(Easing.ease)})),
-                    withDelay(actualDelay, withTiming(0, {duration: highlightDuration, easing: Easing.inOut(Easing.ease)})),
+                nonRepeatableProgress.value = withDelay(
+                    itemEnterDelay,
+                    withTiming(1, {duration: itemEnterDuration, easing: Easing.inOut(Easing.ease)}, (finished) => {
+                        if (!finished) {
+                            return;
+                        }
+
+                        repeatableProgress.value = withSequence(
+                            withDelay(highlightStartDelay, withTiming(1, {duration: highlightStartDuration, easing: Easing.inOut(Easing.ease)})),
+                            withDelay(highlightEndDelay, withTiming(0, {duration: highlightEndDuration, easing: Easing.inOut(Easing.ease)})),
+                        );
+                    }),
                 );
             })();
         });
-    }, [shouldHighlight, highlightDuration, actualDelay, repeatableProgress, nonRepeatableProgress]);
+    }, [
+        didScreenTransitionEnd,
+        startHighlight,
+        itemEnterDelay,
+        itemEnterDuration,
+        highlightStartDelay,
+        highlightStartDuration,
+        highlightEndDelay,
+        highlightEndDuration,
+        repeatableProgress,
+        nonRepeatableProgress,
+    ]);
 
     return highlightBackgroundStyle;
 }

src/libs/actions/Policy.ts

@@ -72,7 +72,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import type {PolicySelector} from '@pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import type {
     InvitedEmailsToAccountIDs,
@@ -3997,26 +3996,10 @@ function openPolicyDistanceRatesPage(policyID?: string) {
     API.read(READ_COMMANDS.OPEN_POLICY_DISTANCE_RATES_PAGE, params);
 }
 
-function navigateWhenEnableFeature(policyID: string, featureRoute: Route) {
-    const isNarrowLayout = getIsNarrowLayout();
-    if (isNarrowLayout) {
-        setTimeout(() => {
-            Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
-        }, 1000);
-        return;
-    }
-
-    /**
-     * The app needs to set a navigation action to the microtask queue, it guarantees to execute Onyx.update first, then the navigation action.
-     * More details - https://github.com/Expensify/App/issues/37785#issuecomment-1989056726.
-     */
-    new Promise<void>((resolve) => {
-        resolve();
-    }).then(() => {
-        requestAnimationFrame(() => {
-            Navigation.navigate(featureRoute);
-        });
-    });
+function navigateWhenEnableFeature(policyID: string) {
+    setTimeout(() => {
+        Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
+    }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
 }
 
 function enablePolicyCategories(policyID: string, enabled: boolean) {
@@ -4062,8 +4045,8 @@ function enablePolicyCategories(policyID: string, enabled: boolean) {
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_CATEGORIES, parameters, onyxData);
 
-    if (enabled) {
-        navigateWhenEnableFeature(policyID, ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID));
+    if (enabled && getIsNarrowLayout()) {
+        navigateWhenEnableFeature(policyID);
     }
 }
 
@@ -4154,8 +4137,8 @@ function enablePolicyDistanceRates(policyID: string, enabled: boolean) {
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_DISTANCE_RATES, parameters, onyxData);
 
-    if (enabled) {
-        navigateWhenEnableFeature(policyID, ROUTES.WORKSPACE_DISTANCE_RATES.getRoute(policyID));
+    if (enabled && getIsNarrowLayout()) {
+        navigateWhenEnableFeature(policyID);
     }
 }
 
@@ -4246,8 +4229,8 @@ function enablePolicyTags(policyID: string, enabled: boolean) {
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_TAGS, parameters, onyxData);
 
-    if (enabled) {
-        navigateWhenEnableFeature(policyID, ROUTES.WORKSPACE_TAGS.getRoute(policyID));
+    if (enabled && getIsNarrowLayout()) {
+        navigateWhenEnableFeature(policyID);
     }
 }
 
@@ -4359,8 +4342,8 @@ function enablePolicyTaxes(policyID: string, enabled: boolean) {
     }
     API.write(WRITE_COMMANDS.ENABLE_POLICY_TAXES, parameters, onyxData);
 
-    if (enabled) {
-        navigateWhenEnableFeature(policyID, ROUTES.WORKSPACE_TAXES.getRoute(policyID));
+    if (enabled && getIsNarrowLayout()) {
+        navigateWhenEnableFeature(policyID);
     }
 }
 
@@ -4450,8 +4433,8 @@ function enablePolicyWorkflows(policyID: string, enabled: boolean) {
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_WORKFLOWS, parameters, onyxData);
 
-    if (enabled) {
-        navigateWhenEnableFeature(policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID));
+    if (enabled && getIsNarrowLayout()) {
+        navigateWhenEnableFeature(policyID);
     }
 }