diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 1686ed1c62d2..276e364e26c1 100644 --- 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 index f1cf55674184..2524658d6ffc 100644 --- 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 index d4a5c05167a0..f4884fd3c0f8 100644 --- 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 ( diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index cbcf8523d9a4..810aa45ebf07 100644 --- 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 index b07c867daeb3..e097a6930654 100644 --- 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 index 2a84efc72814..300574514e59 100644 --- 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,