From 352b7d30fe4aa50bec87df2d982ec2a7ab6f41d7 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 28 Mar 2024 04:58:55 +0500 Subject: [PATCH] add easing --- src/hooks/useAnimatedHighlightStyle.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useAnimatedHighlightStyle.ts b/src/hooks/useAnimatedHighlightStyle.ts index 1712f7c54492..735079ea0023 100644 --- a/src/hooks/useAnimatedHighlightStyle.ts +++ b/src/hooks/useAnimatedHighlightStyle.ts @@ -1,6 +1,6 @@ import React from 'react'; import {InteractionManager} from 'react-native'; -import {interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated'; +import {Easing, interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated'; import CONST from '@src/CONST'; import useTheme from './useTheme'; @@ -30,12 +30,12 @@ export default function useAnimatedHighlightStyle({shouldHighlight, highlightDur return; } InteractionManager.runAfterInteractions(() => { - nonRepeatableProgress.value = withTiming(1, {duration: highlightDuration}); + nonRepeatableProgress.value = withTiming(1, {duration: highlightDuration, easing: Easing.inOut(Easing.ease)}); repeatableProgress.value = withSequence( withDelay(delay, withTiming(0)), - withTiming(1, {duration: highlightDuration}), + withTiming(1, {duration: highlightDuration, easing: Easing.inOut(Easing.ease)}), withDelay(delay, withTiming(1)), - withTiming(0, {duration: highlightDuration}), + withTiming(0, {duration: highlightDuration, easing: Easing.inOut(Easing.ease)}), ); }); }, [shouldHighlight, highlightDuration, delay, repeatableProgress, nonRepeatableProgress]);