second flow

src/components/Slider.js

@@ -2,17 +2,25 @@ import { useEffect, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
-  runOnJS,
 } from "react-native-reanimated";
-import { LinearGradient } from "./LinearGradient/LinearGradient";
 import { Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
 
 const INITIAL_BOX_SIZE = 6;
 
-export default ({ value, maxValue, progress, onSeek, onSeekStart, onSeekEnd, seekEnabled = false }) => {
+export default ({
+  value,
+  maxValue,
+  progress,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  seekEnabled = false,
+}) => {
   const offset = useSharedValue(0);
   const boxWidth = useSharedValue(INITIAL_BOX_SIZE);
   const [layout, setLayout] = useState(null);
@@ -23,7 +31,7 @@ export default ({ value, maxValue, progress, onSeek, onSeekStart, onSeekEnd, see
   const pan = Gesture.Pan()
     .enabled(seekEnabled)
     .onBegin(() => {
-      if (seekEnabled && typeof onSeekStart === 'function') {
+      if (seekEnabled && typeof onSeekStart === "function") {
         // Notify JS thread that user started seeking (e.g., pause audio)
         runOnJS(onSeekStart)();
       }
@@ -34,8 +42,8 @@ export default ({ value, maxValue, progress, onSeek, onSeekStart, onSeekEnd, see
           ? offset.value + event.changeX <= 0
             ? 0
             : offset.value + event.changeX >= MAX_VALUE
-            ? MAX_VALUE
-            : offset.value + event.changeX
+              ? MAX_VALUE
+              : offset.value + event.changeX
           : offset.value;
 
       const newWidth = INITIAL_BOX_SIZE + offset.value;
@@ -43,12 +51,13 @@ export default ({ value, maxValue, progress, onSeek, onSeekStart, onSeekEnd, see
     })
     .onEnd(() => {
       if (!seekEnabled || !onSeek || !MAX_VALUE) return;
-      const ratio = MAX_VALUE > 0 ? Math.min(1, Math.max(0, offset.value / MAX_VALUE)) : 0;
+      const ratio =
+        MAX_VALUE > 0 ? Math.min(1, Math.max(0, offset.value / MAX_VALUE)) : 0;
       // Reanimated -> JS thread bridge
       runOnJS(onSeek)(ratio);
     })
     .onFinalize(() => {
-      if (seekEnabled && typeof onSeekEnd === 'function') {
+      if (seekEnabled && typeof onSeekEnd === "function") {
         runOnJS(onSeekEnd)();
       }
     });