From 7df29e8f9edf3997bb024eab79541fe9b946f3ca Mon Sep 17 00:00:00 2001
From: bvelasquez <bvelasquez@gmail.com>
Date: Fri, 5 Jan 2024 12:31:47 -0800
Subject: [PATCH 1/2] Added GestureHandlerRootView as base View.

---
 index.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/index.js b/index.js
index 66dcc64..99b7b0b 100644
--- a/index.js
+++ b/index.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { View, StyleSheet, Text, Animated } from "react-native";
 
 import {
+  GestureHandlerRootView,
   PanGestureHandler,
   TapGestureHandler,
   State,
@@ -75,7 +76,7 @@ export default class extends Component {
           },
         },
       ],
-      { useNativeDriver: false }
+      { useNativeDriver: false },
     );
 
     this.initiateAnimator();
@@ -113,7 +114,7 @@ export default class extends Component {
       const initialX = currentPercent * this.state.dimensionWidth;
       const boundedX = Math.min(
         Math.max(initialX, 0),
-        this.state.dimensionWidth - TrackSliderSize
+        this.state.dimensionWidth - TrackSliderSize,
       );
 
       this.panResonderMoved = false;
@@ -135,7 +136,7 @@ export default class extends Component {
 
       const boundedX = Math.min(
         Math.max(this._lastOffset.x, 0),
-        dimensionWidth
+        dimensionWidth,
       );
 
       const percentScrubbed = boundedX / dimensionWidth;
@@ -184,16 +185,16 @@ export default class extends Component {
   };
 
   onSlidingStart = () => {
-    if (typeof this.props.onSlidingStart === 'function') {
+    if (typeof this.props.onSlidingStart === "function") {
       this.props.onSlidingStart();
     }
-  }
+  };
 
   onSlide = (scrubbingValue) => {
-    if (typeof this.props.onSlide === 'function') {
+    if (typeof this.props.onSlide === "function") {
       this.props.onSlide(scrubbingValue);
     }
-  }
+  };
 
   onLayoutContainer = async (e) => {
     await this.setState({
@@ -237,10 +238,11 @@ export default class extends Component {
     this._translateX.addListener(({ value }) => {
       const boundedValue = Math.min(
         Math.max(value, 0),
-        this.state.dimensionWidth
+        this.state.dimensionWidth,
       );
-    
-      const startingNumberValue = (boundedValue / this.state.dimensionWidth) * this.props.totalDuration;
+
+      const startingNumberValue =
+        (boundedValue / this.state.dimensionWidth) * this.props.totalDuration;
 
       this.setState({
         startingNumberValue,
@@ -248,7 +250,7 @@ export default class extends Component {
           (1 - boundedValue / this.state.dimensionWidth) *
           this.props.totalDuration,
       });
-    
+
       this.onSlide(startingNumberValue);
       return;
     });
@@ -323,7 +325,7 @@ export default class extends Component {
     const scaleStyle = { scale: scaleValue };
 
     return (
-      <View style={styles.root}>
+      <GestureHandlerRootView style={styles.root}>
         <View style={styles.trackContainer} onLayout={this.onLayoutContainer}>
           <TapGestureHandler
             onHandlerStateChange={this.onTap}
@@ -384,7 +386,7 @@ export default class extends Component {
             </Text>
           </View>
         ) : null}
-      </View>
+      </GestureHandlerRootView>
     );
   }
 }

From 7cb7cac2e4f85465b5dc389ccc457d52ab3ffa09 Mon Sep 17 00:00:00 2001
From: bvelasquez <bvelasquez@gmail.com>
Date: Fri, 5 Jan 2024 13:03:02 -0800
Subject: [PATCH 2/2] Removed unnecessary edits.

---
 index.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/index.js b/index.js
index 99b7b0b..9fef7bf 100644
--- a/index.js
+++ b/index.js
@@ -76,7 +76,7 @@ export default class extends Component {
           },
         },
       ],
-      { useNativeDriver: false },
+      { useNativeDriver: false }
     );
 
     this.initiateAnimator();
@@ -114,7 +114,7 @@ export default class extends Component {
       const initialX = currentPercent * this.state.dimensionWidth;
       const boundedX = Math.min(
         Math.max(initialX, 0),
-        this.state.dimensionWidth - TrackSliderSize,
+        this.state.dimensionWidth - TrackSliderSize
       );
 
       this.panResonderMoved = false;
@@ -136,7 +136,7 @@ export default class extends Component {
 
       const boundedX = Math.min(
         Math.max(this._lastOffset.x, 0),
-        dimensionWidth,
+        dimensionWidth
       );
 
       const percentScrubbed = boundedX / dimensionWidth;
@@ -185,16 +185,16 @@ export default class extends Component {
   };
 
   onSlidingStart = () => {
-    if (typeof this.props.onSlidingStart === "function") {
+    if (typeof this.props.onSlidingStart === 'function') {
       this.props.onSlidingStart();
     }
-  };
+  }
 
   onSlide = (scrubbingValue) => {
-    if (typeof this.props.onSlide === "function") {
+    if (typeof this.props.onSlide === 'function') {
       this.props.onSlide(scrubbingValue);
     }
-  };
+  }
 
   onLayoutContainer = async (e) => {
     await this.setState({
@@ -238,11 +238,10 @@ export default class extends Component {
     this._translateX.addListener(({ value }) => {
       const boundedValue = Math.min(
         Math.max(value, 0),
-        this.state.dimensionWidth,
+        this.state.dimensionWidth
       );
-
-      const startingNumberValue =
-        (boundedValue / this.state.dimensionWidth) * this.props.totalDuration;
+    
+      const startingNumberValue = (boundedValue / this.state.dimensionWidth) * this.props.totalDuration;
 
       this.setState({
         startingNumberValue,
@@ -250,7 +249,7 @@ export default class extends Component {
           (1 - boundedValue / this.state.dimensionWidth) *
           this.props.totalDuration,
       });
-
+    
       this.onSlide(startingNumberValue);
       return;
     });