prettier

src/hooks/useAnimatedHighlightStyle.ts

@@ -1,39 +1,39 @@
 import {useFocusEffect} from '@react-navigation/native';
 import React from 'react';
 import {InteractionManager} from 'react-native';
-import {interpolateColor, interpolate, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated';
+import {interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated';
 import CONST from '@src/CONST';
 import useTheme from './useTheme';
 
 /**
- * Returns a highlight style that interpolates the colour giving a fading effect.
+ * Returns a highlight style that interpolates the colour, height and opacity giving a fading effect.
  */
 export default function useAnimatedHighlightStyle(shouldHighlight: boolean, highlightDuration: number = CONST.ANIMATED_TRANSITION, delay = 100) {
-    const highlightProgress = useSharedValue(0);
-    const heightProgress = useSharedValue(0);
+    const repeatableProgress = useSharedValue(0);
+    const nonRepeatableProgress = useSharedValue(0);
     const theme = useTheme();
 
     const highlightBackgroundStyle = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(highlightProgress.value, [0, 1], ['rgba(0, 0, 0, 0)', theme.border]),
-        flex: interpolate(heightProgress.value, [0, 1], [0, 1]),
-        opacity: interpolate(heightProgress.value, [0, 1], [0, 1]),
+        backgroundColor: interpolateColor(repeatableProgress.value, [0, 1], ['rgba(0, 0, 0, 0)', theme.border]),
+        flex: interpolate(nonRepeatableProgress.value, [0, 1], [0, 1]),
+        opacity: interpolate(nonRepeatableProgress.value, [0, 1], [0, 1]),
     }));
 
     useFocusEffect(
         React.useCallback(() => {
             if (!shouldHighlight) {
                 return;
             }
-            heightProgress.value = withTiming(1, {duration: highlightDuration});
+            nonRepeatableProgress.value = withTiming(1, {duration: highlightDuration});
             InteractionManager.runAfterInteractions(() => {
-                highlightProgress.value = withSequence(
+                repeatableProgress.value = withSequence(
                     withDelay(delay, withTiming(0)),
                     withTiming(1, {duration: highlightDuration}),
                     withDelay(delay, withTiming(1)),
                     withTiming(0, {duration: highlightDuration}),
                 );
             });
-        }, [shouldHighlight, highlightDuration, delay, highlightProgress, heightProgress]),
+        }, [shouldHighlight, highlightDuration, delay, repeatableProgress, nonRepeatableProgress]),
     );
 
     return highlightBackgroundStyle;

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -293,7 +293,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
                                     brickRoadIndicator={item.brickRoadIndicator}
                                     wrapperStyle={styles.sectionMenuItem}
                                     highlightStyle={enabledItem?.translationKey === item.translationKey ? [animatedHighlightStyle, {borderRadius: styles.border.borderRadius}] : undefined}
-                                    focused={!!(item.name && activeRoute?.startsWith(item.name))}
+                                    focused={!!(item.translationKey && activeRoute?.startsWith(item.name))}
                                     hoverAndPressStyle={styles.hoveredComponentBG}
                                     isPaneMenu
                                 />
@@ -328,4 +328,4 @@ export default withPolicyAndFullscreenLoading(
             key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route.params?.policyID ?? '0'}`,
         },
     })(WorkspaceInitialPage),
-);
+);