diff --git a/src/Slider.tsx b/src/Slider.tsx index 92db71b..d28d05f 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -52,6 +52,7 @@ const RNVerticalSlider = React.forwardRef( renderIndicator = () => null, containerStyle = {}, sliderStyle = {}, + animationConfig = { damping: 15 }, }, ref ) => { @@ -71,32 +72,36 @@ const RNVerticalSlider = React.forwardRef( width, ]); // Gesture handler - const handleGesture = ( - props: - | GestureStateChangeEvent - | GestureUpdateEvent< - PanGestureHandlerEventPayload & PanGestureChangeEventPayload - > - ) => { - if (disabledProp.value) return; - let value = calculateValue(props.y, min, max, step, height); - point.value = withSpring(value, { damping: 15 }); - runOnJS(onChange)(value); - }; - const handleGestureEnd = ( - props: GestureStateChangeEvent - ) => { - if (disabledProp.value) return; - runOnJS(onComplete)(calculateValue(props.y, min, max, step, height)); - }; + const handleGesture = + (type: 'BEGIN' | 'CHANGE' | 'END') => (eventY: number) => { + if (disabledProp.value) return; + let value = calculateValue(eventY, min, max, step, height); + point.value = withSpring(value, animationConfig); + runOnJS(type === 'BEGIN' || type === 'CHANGE' ? onChange : onComplete)( + value + ); + }; + const onGestureStart = ( + event: GestureStateChangeEvent + ) => handleGesture('BEGIN')(event.y); + const onGestureChange = ( + event: GestureUpdateEvent< + PanGestureHandlerEventPayload & PanGestureChangeEventPayload + > + ) => handleGesture('CHANGE')(event.y); + const onGestureEnd = ( + event: GestureStateChangeEvent + ) => handleGesture('END')(event.y); const panGesture = Gesture.Pan() - .onBegin(handleGesture) - .onChange(handleGesture) - .onEnd(handleGestureEnd); + .onBegin(onGestureStart) + .onChange(onGestureChange) + .onEnd(onGestureEnd) + .onFinalize(onGestureEnd) + .runOnJS(true); // Ref methods React.useImperativeHandle(ref, () => ({ setValue: (value: number) => { - point.value = withSpring(value, { damping: 15 }); + point.value = withSpring(value, animationConfig); onChange(value); }, setState: (state: boolean) => { @@ -111,7 +116,7 @@ const RNVerticalSlider = React.forwardRef( height: `${heightPercentage}%`, }; return style; - }, [point.value, minimumTrackTintColor, borderRadius, height, max]); + }, [point.value]); // indicator styles const indicator = useAnimatedStyle(() => { const style: ViewStyle = {}; @@ -121,7 +126,7 @@ const RNVerticalSlider = React.forwardRef( style.bottom = bottom; } return style; - }, [showIndicator, point.value]); + }, [point.value]); return ( diff --git a/src/types.ts b/src/types.ts index cfe67d3..4a004ad 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,5 @@ import { StyleProp, ViewStyle } from 'react-native'; +import { SpringConfig } from 'react-native-reanimated/lib/typescript/reanimated2/animation/springUtils'; export type TSliderProps = { min: number; @@ -18,6 +19,7 @@ export type TSliderProps = { containerStyle?: StyleProp; sliderStyle?: StyleProp; renderIndicatorHeight?: number; + animationConfig?: SpringConfig; }; export type TSliderRef = {