feat: pan gesture timeout configurable by prop

README.md

@@ -82,6 +82,10 @@ There are three events fired when the user interacts with the graph:
 2. `onPointSelected`: Fired for each point the user pans through. You can use this event to update labels or highlight selection in the graph.
 3. `onGestureEnd`: Fired once the user releases his finger and the pan gesture _deactivates_.
 
+Pan gesture can be configures using these props:
+
+1. `panGestureTimeout`: Set timeout for the pan gesture to activate. Set to `0` to start immediately after touch. Defaults to `300`.
+
 Example:
 
 ```jsx

package.json

@@ -126,7 +126,8 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "semi": false
   },
   "react-native-builder-bob": {
     "source": "src",

src/AnimatedLineGraph.tsx

@@ -64,6 +64,7 @@ export function AnimatedLineGraph({
   onPointSelected,
   onGestureStart,
   onGestureEnd,
+  panGestureTimeout = 300,
   SelectionDot = DefaultSelectionDot,
   enableIndicator = false,
   indicatorPulsating = false,
@@ -79,7 +80,9 @@ export function AnimatedLineGraph({
   const [height, setHeight] = useState(0)
   const interpolateProgress = useValue(0)
 
-  const { gesture, isActive, x } = usePanGesture({ holdDuration: 300 })
+  const { gesture, isActive, x } = usePanGesture({
+    holdDuration: panGestureTimeout,
+  })
   const circleX = useValue(0)
   const circleY = useValue(0)
   const pathEnd = useValue(0)

src/LineGraphProps.ts

@@ -77,6 +77,10 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & {
    * Let's the indicator pulsate
    */
   indicatorPulsating?: boolean
+  /**
+   * Timeout before the pan gesture starts
+   */
+  panGestureTimeout?: number
 
   /**
    * Called for each point while the user is scrubbing/panning through the graph