How do I add an onscroll event listener and get the current scroll position of a Scrollview using the ref of the scrollview

Question

I am using react-native-gifted-charts to implement an area chart with mulptiple lines.

Objective: Allow a user to scroll horizontally accross the chart and but always show the minimum full range of values (vertically, y axis). ie, when the values in view have a lower range, between maximum and minimum values, automatically zoom in and zoom out as needed and more values come into the frame of view on not.

Opportunity: react-native-gifted-charts gives you a ref to the underlying scrollview used within it's internal implementations.

Trouble: I know how to add the onscroll prop by directly attaching it to the scrollview as a prop i.e

<Scrollview onscroll={(event) => {}} />

and I would be able to achieve everything I need to achieve this way, but I do not know how to do this using a ref to the Scrollview

I am stuck here:

const scrollRef = useRef(null)

  const onScroll = useCallback((event) => {
    console.log(" ~ file: EnergyGraph.tsx:1149 ~ onScroll ~ event:", event.target)
    // my logic would go here
  }, [])

  useEffect(() => {
    if (scrollRef?.current) {
      scrollRef.current.addEventListener("scroll", onScroll)
      return () => scrollRef.current.removeEventListener("scroll", onScroll)
    }
  }, [])

  return (
      <LineChart scrollRef={scrollRef} />
)...

However with this approach, I get the error: addEventListener is not a function

Answer 1

I think you must edit this lib by add extraScroll props, call it's inside here
https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/3ac786c691cb2da6bbb6b280ab62229d6b559179/src/LineChart/index.tsx#L2694-L2704

Like this:

onScroll: (ev: any) => {
      if (
        pointerConfig &&
        pointerConfig.activatePointersOnLongPress &&
        pointerConfig.autoAdjustPointerLabelPosition
      ) {
        setScrollX(ev.nativeEvent.contentOffset.x);
      }
      props.extraScroll && props.extraScroll(ev)
    },

After that you can using this props extraScroll to handle more inside your class

Answer 2

I am the maintainer of react-native-gifted-charts. From version 1.4.5 onwards, you can use the onScroll prop in <BarChart>, <LineChart> and <LineChartBicolor> components.

The onScroll prop takes a callback function with event as a parameter.

So your code should be as below-

const onScroll = useCallback((event) => {
    console.log(" ~ file: EnergyGraph.tsx:1149 ~ onScroll ~ event:", event.target)
    // my logic would go here
  }, []);

return (
      <LineChart onScroll={onScroll} />
)...