fix: Enable android gesture handler and adjust hold duration for grap…

…h movements
margelo · Dec 7, 2022 · 7414a37 · 7414a37
1 parent 0a546d0
commit 7414a37
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 84 deletions.
diff --git a/src/AnimatedLineGraph.tsx b/src/AnimatedLineGraph.tsx
@@ -38,7 +38,7 @@ import Reanimated, {
   withDelay,
 } from 'react-native-reanimated'
 import { getSixDigitHex } from './utils/getSixDigitHex'
-import { GestureDetector } from 'react-native-gesture-handler'
+import { GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler'
 import { usePanGesture } from './hooks/usePanGesture'
 import { getYForX } from './GetYForX'
 import { hexToRgba } from './utils/hexToRgba'
@@ -57,6 +57,7 @@ export function AnimatedLineGraph({
   points,
   color,
   smoothing = 0.2,
+  holdDuration = 300,
   gradientFillColors,
   lineThickness = 3,
   range,
@@ -80,7 +81,7 @@ 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 })
   const circleX = useValue(0)
   const circleY = useValue(0)
   const pathEnd = useValue(0)
@@ -460,101 +461,103 @@ export function AnimatedLineGraph({
   )
 
   return (
-    <View {...props}>
-      <GestureDetector gesture={enablePanGesture ? gesture : undefined}>
-        <ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
-          {/* Top Label (max price) */}
-          {TopAxisLabel != null && (
-            <View style={styles.axisRow}>
-              <TopAxisLabel />
-            </View>
-          )}
-
-          {/* Actual Skia Graph */}
-          <View style={styles.container} onLayout={onLayout}>
-            <Canvas style={styles.svg}>
-              <Group>
-                <Path
-                  // @ts-ignore
-                  path={path}
-                  strokeWidth={lineThickness}
-                  style="stroke"
-                  strokeJoin="round"
-                  strokeCap="round"
-                >
-                  <LinearGradient
-                    start={vec(0, 0)}
-                    end={vec(width, 0)}
-                    colors={gradientColors}
-                    positions={positions}
-                  />
-                </Path>
-
-                {shouldFillGradient && (
+    <GestureHandlerRootView>
+      <View {...props}>
+        <GestureDetector gesture={enablePanGesture ? gesture : undefined}>
+          <ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
+            {/* Top Label (max price) */}
+            {TopAxisLabel != null && (
+              <View style={styles.axisRow}>
+                <TopAxisLabel />
+              </View>
+            )}
+
+            {/* Actual Skia Graph */}
+            <View style={styles.container} onLayout={onLayout}>
+              <Canvas style={styles.svg}>
+                <Group>
                   <Path
                     // @ts-ignore
-                    path={gradientPath}
+                    path={path}
+                    strokeWidth={lineThickness}
+                    style="stroke"
+                    strokeJoin="round"
+                    strokeCap="round"
                   >
                     <LinearGradient
                       start={vec(0, 0)}
-                      end={vec(0, height)}
-                      colors={gradientFillColors}
+                      end={vec(width, 0)}
+                      colors={gradientColors}
+                      positions={positions}
                     />
                   </Path>
+
+                  {shouldFillGradient && (
+                    <Path
+                      // @ts-ignore
+                      path={gradientPath}
+                    >
+                      <LinearGradient
+                        start={vec(0, 0)}
+                        end={vec(0, height)}
+                        colors={gradientFillColors}
+                      />
+                    </Path>
+                  )}
+                </Group>
+
+                {SelectionDot != null && (
+                  <SelectionDot
+                    isActive={isActive}
+                    color={color}
+                    lineThickness={lineThickness}
+                    circleX={circleX}
+                    circleY={circleY}
+                  />
                 )}
-              </Group>
-
-              {SelectionDot != null && (
-                <SelectionDot
-                  isActive={isActive}
-                  color={color}
-                  lineThickness={lineThickness}
-                  circleX={circleX}
-                  circleY={circleY}
-                />
-              )}
-
-              {enableIndicator && (
-                <Group>
-                  {indicatorPulsating && (
+
+                {enableIndicator && (
+                  <Group>
+                    {indicatorPulsating && (
+                      <Circle
+                        cx={indicatorX}
+                        cy={indicatorY}
+                        r={indicatorPulseRadius}
+                        opacity={indicatorPulseOpacity}
+                        color={indicatorPulseColor}
+                        style="fill"
+                      />
+                    )}
+
+                    <Circle
+                      cx={indicatorX}
+                      cy={indicatorY}
+                      r={indicatorBorderRadius}
+                      color={'#ffffff'}
+                    >
+                      <Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
+                    </Circle>
                     <Circle
                       cx={indicatorX}
                       cy={indicatorY}
-                      r={indicatorPulseRadius}
-                      opacity={indicatorPulseOpacity}
-                      color={indicatorPulseColor}
-                      style="fill"
+                      r={indicatorRadius}
+                      color={color}
                     />
-                  )}
-
-                  <Circle
-                    cx={indicatorX}
-                    cy={indicatorY}
-                    r={indicatorBorderRadius}
-                    color={'#ffffff'}
-                  >
-                    <Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
-                  </Circle>
-                  <Circle
-                    cx={indicatorX}
-                    cy={indicatorY}
-                    r={indicatorRadius}
-                    color={color}
-                  />
-                </Group>
-              )}
-            </Canvas>
-          </View>
-
-          {/* Bottom Label (min price) */}
-          {BottomAxisLabel != null && (
-            <View style={styles.axisRow}>
-              <BottomAxisLabel />
+                  </Group>
+                )}
+              </Canvas>
             </View>
-          )}
-        </ReanimatedView>
-      </GestureDetector>
-    </View>
+
+            {/* Bottom Label (min price) */}
+            {BottomAxisLabel != null && (
+              <View style={styles.axisRow}>
+                <BottomAxisLabel />
+              </View>
+            )}
+          </ReanimatedView>
+        </GestureDetector>
+      </View>
+    </GestureHandlerRootView>
   )
 }
 

diff --git a/src/LineGraphProps.ts b/src/LineGraphProps.ts
@@ -37,6 +37,10 @@ interface BaseLineGraphProps extends ViewProps {
    * Smoothing value of the graph (Radius of the edge points)
    */
   smoothing: number
+  /**
+   * Hold duration in "ms" for gesture activation
+   */
+  holdDuration: number
   /**
    * (Optional) Colors for the fill gradient below the graph line
    */