margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia

Home Page:https://margelo.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vertical scrolling not supported when enablePanGesture = true

nopshusang opened this issue · comments

If LineGraph is placed in a Scrollview, would it be possible to make it scroll with the rest of the view as well as supporting the the pan gesture? Right now the pan gesture will work but we cannot do vertical scroll if the touch initiated from the graph

<Scrollview>
...
    <LineGraph
      style={styles.chart}
      points={dataPoints}
      color={colors[accentColorTheme]}
      lineThickness={2}
      animated={true}
      enablePanGesture={true}
  />
...
</Scrollview>

This behavior could be improved by only enabling the pan gesture once the hold gesture is activated. I'll let you decide if you think that's the preferred behavior. Here is my suggestions

const holdGesture = useMemo(
    () =>
      Gesture.LongPress()
        .minDuration(holdDuration)
        .onStart((e) => {
          isHoldGestureActive.value = true
          x.value = e.x
          y.value = e.y
        }),
    [holdDuration, isHoldGestureActive, x, y]
  )

  const panGesture = useMemo(
    () =>
      Gesture.Pan()
        .manualActivation(true)
        .onChange((e) => {
          x.value = e.x
          y.value = e.y
        })
        .onTouchesMove((_, state) => {
          if (isHoldGestureActive.value) {
            state.activate()
          } else {
            state.fail()
          }
        })
        .onStart(() => {
          isPanGestureActive.value = true
        })
        .onEnd(() => {
          isPanGestureActive.value = false
        })
        .onFinalize(() => {
          isHoldGestureActive.value = false
        })
        .simultaneousWithExternalGesture(holdGesture),
    [holdGesture, isHoldGestureActive, isPanGestureActive, x, y]
  )