add easing to effect

Expensify · Dec 20, 2024 · be4015e · be4015e
1 parent 408750f
commit be4015e
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
-import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 type AccordionProps = {
@@ -27,12 +27,14 @@ function Accordion({isExpanded, children, duration = 300, style}: AccordionProps
     const derivedHeight = useDerivedValue(() =>
         withTiming(height.value * Number(isExpanded.value), {
             duration,
+            easing: Easing.inOut(Easing.quad),
         }),
     );
 
     const derivedOpacity = useDerivedValue(() =>
         withTiming(isExpanded.value ? 1 : 0, {
             duration,
+            easing: Easing.inOut(Easing.quad),
         }),
     );