From aa0b9f164e3607da3cebf71231beeaf74b184e3a Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <danishmirza30602@gmail.com>
Date: Thu, 16 Jun 2022 23:44:50 +0530
Subject: [PATCH] Add animationConfig prop to the Slider

---
 app/containers/message/Components/Audio/Slider.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/containers/message/Components/Audio/Slider.tsx b/app/containers/message/Components/Audio/Slider.tsx
index c1c967ad5..592b4af22 100644
--- a/app/containers/message/Components/Audio/Slider.tsx
+++ b/app/containers/message/Components/Audio/Slider.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming, Easing } from 'react-native-reanimated';
 
 import styles, { SLIDER_THUMB_RADIUS } from '../../styles';
 import { useTheme } from '../../../../theme';
@@ -17,6 +17,7 @@ interface ISliderProps {
 	disabled?: boolean;
 	thumbImage?: { uri: string; scale: number | undefined };
 	containerStyle?: StyleProp<ViewStyle>;
+	animationConfig?: { duration: number; easing: Animated.EasingFunction };
 }
 
 const Slider = React.memo(
@@ -28,7 +29,11 @@ const Slider = React.memo(
 		minimumTrackTintColor,
 		maximumTrackTintColor,
 		disabled,
-		containerStyle
+		containerStyle,
+		animationConfig = {
+			duration: 200,
+			easing: Easing.linear
+		}
 	}: ISliderProps) => {
 		const { colors } = useTheme();
 		const [sliderWidth, setSliderWidth] = useState<number>(0);
@@ -38,7 +43,7 @@ const Slider = React.memo(
 
 		useEffect(() => {
 			if (!isSliding) {
-				currentValue.value = value;
+				currentValue.value = withTiming(value, animationConfig);
 			}
 		}, [value, isSliding]);