Fix opacity animation duration

Expensify · Sep 15, 2024 · 1db6abb · 1db6abb
1 parent e5e4891
commit 1db6abb
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 6 deletions.
diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -221,7 +221,8 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                     }
                                 }}
                                 withoutFocusOnSecondaryInteraction
-                                activeOpacity={0.8}
+                                activeOpacity={variables.pressDimValue}
+                                opacityAnimationDuration={0}
                                 style={[
                                     styles.flexRow,
                                     styles.alignItemsCenter,

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -569,7 +569,8 @@ function MenuItem(
                                 onPressOut={ControlSelection.unblock}
                                 onSecondaryInteraction={onSecondaryInteraction}
                                 wrapperStyle={outerWrapperStyle}
-                                activeOpacity={0.8}
+                                activeOpacity={variables.pressDimValue}
+                                opacityAnimationDuration={0}
                                 style={({pressed}) =>
                                     [
                                         containerStyle,

diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx
@@ -24,11 +24,24 @@ type OpacityViewProps = {
      */
     dimmingValue?: number;
 
+    /**
+     * The duration of the dimming animation
+     * @default variables.dimAnimationDuration
+     */
+    dimAnimationDuration?: number;
+
     /** Whether the view needs to be rendered offscreen (for Android only) */
     needsOffscreenAlphaCompositing?: boolean;
 };
 
-function OpacityView({shouldDim, children, style = [], dimmingValue = variables.hoverDimValue, needsOffscreenAlphaCompositing = false}: OpacityViewProps) {
+function OpacityView({
+    shouldDim,
+    dimAnimationDuration = variables.dimAnimationDuration,
+    children,
+    style = [],
+    dimmingValue = variables.hoverDimValue,
+    needsOffscreenAlphaCompositing = false,
+}: OpacityViewProps) {
     const opacity = useSharedValue(1);
     const opacityStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -37,11 +50,11 @@ function OpacityView({shouldDim, children, style = [], dimmingValue = variables.
     React.useEffect(() => {
         if (shouldDim) {
             // eslint-disable-next-line react-compiler/react-compiler
-            opacity.value = withTiming(dimmingValue, {duration: 50});
+            opacity.value = withTiming(dimmingValue, {duration: dimAnimationDuration});
         } else {
-            opacity.value = withTiming(1, {duration: 50});
+            opacity.value = withTiming(1, {duration: dimAnimationDuration});
         }
-    }, [shouldDim, dimmingValue, opacity]);
+    }, [shouldDim, dimmingValue, opacity, dimAnimationDuration]);
 
     return (
         <Animated.View

diff --git a/src/components/Pressable/PressableWithFeedback.tsx b/src/components/Pressable/PressableWithFeedback.tsx
@@ -26,6 +26,12 @@ type PressableWithFeedbackProps = PressableProps & {
      */
     hoverDimmingValue?: number;
 
+    /**
+     * The duration of the dimming animation
+     * @default variables.dimAnimationDuration
+     */
+    dimAnimationDuration?: number;
+
     /** Whether the view needs to be rendered offscreen (for Android only) */
     needsOffscreenAlphaCompositing?: boolean;
 
@@ -40,6 +46,7 @@ function PressableWithFeedback(
         needsOffscreenAlphaCompositing = false,
         pressDimmingValue = variables.pressDimValue,
         hoverDimmingValue = variables.hoverDimValue,
+        dimAnimationDuration,
         ...rest
     }: PressableWithFeedbackProps,
     ref: PressableRef,
@@ -51,6 +58,7 @@ function PressableWithFeedback(
         <OpacityView
             shouldDim={!!(!rest.disabled && (isPressed || isHovered))}
             dimmingValue={isPressed ? pressDimmingValue : hoverDimmingValue}
+            dimAnimationDuration={dimAnimationDuration}
             style={wrapperStyle}
             needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
         >

diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx
@@ -20,6 +20,7 @@ function PressableWithSecondaryInteraction(
         preventDefaultContextMenu = true,
         onSecondaryInteraction,
         activeOpacity = 1,
+        opacityAnimationDuration,
         ...rest
     }: PressableWithSecondaryInteractionProps,
     ref: PressableRef,
@@ -100,6 +101,7 @@ function PressableWithSecondaryInteraction(
             wrapperStyle={[StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle), wrapperStyle]}
             onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             pressDimmingValue={activeOpacity}
+            dimAnimationDuration={opacityAnimationDuration}
             ref={pressableRef}
             style={(state) => [StyleUtils.parseStyleFromFunction(style, state), inlineStyle]}
             needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}

diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -40,6 +40,18 @@ type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
     /** Opacity to reduce to when active  */
     activeOpacity?: number;
 
+    /**
+     * The duration of the opacity animation
+     * @default variables.dimAnimationDuration
+     */
+    opacityAnimationDuration?: number;
+
+    /**
+     * The duration of the dimming animation
+     * @default variables.dimAnimationDuration
+     */
+    dimAnimationDuration?: number;
+
     /** Used to apply styles to the Pressable */
     style?: ParsableStyle;
 

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -221,6 +221,7 @@ export default {
     googleEmptyListViewHeight: 14,
     hoverDimValue: 1,
     pressDimValue: 0.8,
+    dimAnimationDuration: 50,
     qrShareHorizontalPadding: 32,
     menuIconSize: 48,