fix: remove refs from the progress bars

Author: khushal87

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -77,7 +77,6 @@ export const ProgressControl = (props: ProgressControlProps) => {
   const { filledColor: filledColorFromProp, onEndDrag, onStartDrag, progress, testID } = props;
 
   const state = useSharedValue(progress);
-  const isSliding = useRef(false);
   const {
     theme: {
       colors: { grey_dark },
@@ -88,19 +87,16 @@ export const ProgressControl = (props: ProgressControlProps) => {
   useAnimatedReaction(
     () => progress,
     (newProgress) => {
-      if (!isSliding.current) {
-        state.value = newProgress;
-      }
+      state.value = newProgress;
     },
-    [progress, isSliding],
+    [progress],
   );
 
   const pan = useMemo(
     () =>
       Gesture.Pan()
         .maxPointers(1)
         .onStart(() => {
-          isSliding.current = true;
           if (onStartDrag) {
             runOnJS(onStartDrag)(state.value);
           }
@@ -110,7 +106,6 @@ export const ProgressControl = (props: ProgressControlProps) => {
           state.value = newProgress;
         })
         .onEnd(() => {
-          isSliding.current = false;
           if (onEndDrag) {
             runOnJS(onEndDrag)(state.value);
           }

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -89,7 +89,6 @@ export const WaveProgressBar = React.memo(
     const eachWaveformWidth = WAVEFORM_WIDTH * 2;
     const fullWidth = (amplitudesCount - 1) * eachWaveformWidth;
     const state = useSharedValue(progress);
-    const isSliding = useRef(false);
     const [currentWaveformProgress, setCurrentWaveformProgress] = useState<number>(0);
 
     const waveFormNumberFromProgress = useCallback(
@@ -106,9 +105,7 @@ export const WaveProgressBar = React.memo(
     useAnimatedReaction(
       () => progress,
       (newProgress) => {
-        if (!isSliding.current) {
-          state.value = newProgress;
-        }
+        state.value = newProgress;
         waveFormNumberFromProgress(newProgress);
       },
       [progress],
@@ -125,7 +122,6 @@ export const WaveProgressBar = React.memo(
       .enabled(showProgressDrag)
       .maxPointers(1)
       .onStart(() => {
-        isSliding.current = true;
         if (onStartDrag) {
           runOnJS(onStartDrag)(state.value);
         }
@@ -136,7 +132,6 @@ export const WaveProgressBar = React.memo(
         waveFormNumberFromProgress(newProgress);
       })
       .onEnd(() => {
-        isSliding.current = false;
         if (onEndDrag) {
           runOnJS(onEndDrag)(state.value);
         }