verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animationConfig prop to the Slider

This commit is contained in:
Danish Ahmed Mirza 2022-06-16 23:44:50 +05:30 committed by Danish
parent 497e631510
commit aa0b9f164e
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/containers/message/Components/Audio/Slider.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { View, StyleProp, ViewStyle } from 'react-native'; import { View, StyleProp, ViewStyle } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler'; 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 styles, { SLIDER_THUMB_RADIUS } from '../../styles';
import { useTheme } from '../../../../theme'; import { useTheme } from '../../../../theme';
@ -17,6 +17,7 @@ interface ISliderProps {
disabled?: boolean; disabled?: boolean;
thumbImage?: { uri: string; scale: number | undefined }; thumbImage?: { uri: string; scale: number | undefined };
containerStyle?: StyleProp<ViewStyle>; containerStyle?: StyleProp<ViewStyle>;
animationConfig?: { duration: number; easing: Animated.EasingFunction };
} }
const Slider = React.memo( const Slider = React.memo(
@ -28,7 +29,11 @@ const Slider = React.memo(
minimumTrackTintColor, minimumTrackTintColor,
maximumTrackTintColor, maximumTrackTintColor,
disabled, disabled,
containerStyle containerStyle,
animationConfig = {
duration: 200,
easing: Easing.linear
}
}: ISliderProps) => { }: ISliderProps) => {
const { colors } = useTheme(); const { colors } = useTheme();
const [sliderWidth, setSliderWidth] = useState<number>(0); const [sliderWidth, setSliderWidth] = useState<number>(0);
@ -38,7 +43,7 @@ const Slider = React.memo(
useEffect(() => { useEffect(() => {
if (!isSliding) { if (!isSliding) {
currentValue.value = value; currentValue.value = withTiming(value, animationConfig);
} }
}, [value, isSliding]); }, [value, isSliding]);