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

Improve slider animation performance

This commit is contained in:
Danish Ahmed Mirza 2022-06-16 03:19:28 +05:30 committed by Danish
parent 79975710e4
commit 497e631510
1 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react';
import { View, StyleProp, ViewStyle } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Touchable from 'react-native-platform-touchable';
import Animated, { useSharedValue, useAnimatedStyle, interpolate } from 'react-native-reanimated';
import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming } from 'react-native-reanimated';
import styles, { SLIDER_THUMB_RADIUS } from '../../styles';
import { useTheme } from '../../../../theme';
// import { debounce } from '../../../../lib/methods/helpers';
interface ISliderProps {
value: number;
@ -32,14 +32,15 @@ const Slider = React.memo(
}: ISliderProps) => {
const { colors } = useTheme();
const [sliderWidth, setSliderWidth] = useState<number>(0);
const position = useSharedValue(0);
const [isSliding, setSliding] = useState<boolean>(false);
const sliderThumbWidth = useSharedValue(2 * SLIDER_THUMB_RADIUS);
const currentValue = useSharedValue(0);
useEffect(() => {
if (value !== currentValue.value) {
if (!isSliding) {
currentValue.value = value;
}
}, [value]);
}, [value, isSliding]);
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
@ -49,20 +50,30 @@ const Slider = React.memo(
setSliderWidth(event.nativeEvent.layout.width);
};
const tapGesture = Gesture.Tap().onStart(e => {
position.value = clamp(e.x, 0, sliderWidth);
currentValue.value = equivalentValue(position.value);
onValueChange(currentValue.value);
});
// const debouncedOnValueChange = debounce((value: number) => onValueChange(value), 50);
const tapGesture = Gesture.Tap()
.hitSlop({ vertical: 10 })
.onStart(e => {
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
});
const dragGesture = Gesture.Pan()
.onChange(e => {
position.value = clamp(e.x, 0, sliderWidth);
currentValue.value = equivalentValue(position.value);
onValueChange(currentValue.value);
.hitSlop({ horizontal: 5, vertical: 20 })
.onStart(() => {
setSliding(true);
sliderThumbWidth.value = withTiming(3 * SLIDER_THUMB_RADIUS, { duration: 100 });
})
.onEnd(() => {
onValueChange(currentValue.value);
.onChange(e => {
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
})
.onEnd(e => {
sliderThumbWidth.value = withTiming(2 * SLIDER_THUMB_RADIUS, { duration: 100 });
currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
setSliding(false);
});
const animatedThumbStyles = useAnimatedStyle(() => ({
@ -70,7 +81,9 @@ const Slider = React.memo(
{
translateX: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth]) - SLIDER_THUMB_RADIUS
}
]
],
width: sliderThumbWidth.value,
height: sliderThumbWidth.value
}));
const animatedTrackStyles = useAnimatedStyle(() => ({
@ -81,20 +94,16 @@ const Slider = React.memo(
return (
<View style={[styles.sliderContainer, containerStyle]}>
<Touchable onPress={() => {}}>
<GestureDetector gesture={gesture}>
<View
style={[styles.track, { backgroundColor: maximumTrackTintColor || colors.buttonBackground }]}
onLayout={onLayout}>
<Animated.View
style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
/>
<Animated.View
style={[styles.activeTrack, { backgroundColor: minimumTrackTintColor || colors.tintColor }, animatedTrackStyles]}
/>
</View>
</GestureDetector>
</Touchable>
<GestureDetector gesture={gesture}>
<View style={[styles.track, { backgroundColor: maximumTrackTintColor || colors.buttonBackground }]} onLayout={onLayout}>
<Animated.View
style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
/>
<Animated.View
style={[styles.activeTrack, { backgroundColor: minimumTrackTintColor || colors.tintColor }, animatedTrackStyles]}
/>
</View>
</GestureDetector>
</View>
);
}