margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia
https://margelo.io
MIT License
2.04k stars 115 forks source link

onPointSelected is very slow when I update a state #25

Closed Spoutnik97 closed 2 years ago

Spoutnik97 commented 2 years ago

Hi, I tried to update a state in my component, thanks to onPointSelected props, but when I swipe my finger on the line, the pointer is very very slow to update.

I guess it is because I set a state at each time setFingerX is called

Do you have an idea how to update my state ?

 const [selectedGraphPoint, setSelectedGraphPoint] = useState<GraphPoint>({
    value: 0,
    date: new Date(),
  });

 return (<>
            <TotalAmountCard amount={selectedGraphPoint.value} />
            <LineGraph
              points={points}
              color={theme.colors.base.text.secondary}
              style={styles.graphContainer}
              enablePanGesture
              animated
              onPointSelected={setSelectedGraphPoint}
            />
  </>)
DDushkin commented 2 years ago

Hello, I had the same issue, please check this https://github.com/margelo/react-native-graph/issues/8 Long story short you need to move your state to animated values

chrispader commented 2 years ago

Hello, I had the same issue, please check this #8 Long story short you need to move your state to animated values

Yes, @DDushkin is right.

The onPointSelected callback will run on every change of the AnimatedValue driving the graph.

So any changes triggered by that callback, will have to be run on the UI thread...

Will close this, as this should be fixed.

Feel free to open a new issue, if you still have any issues