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

Graph opacity is faded when animated = True #23

Closed nopshusang closed 2 years ago

nopshusang commented 2 years ago

Pretty basic setup. Pan gesture isn't enabled

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

When animated={true} Screen Shot 2022-06-14 at 11 02 51 PM

When animated={false} image

amansharma20 commented 2 years ago

Facing the same issue. Did you find any solution to that?

mrousavy commented 2 years ago

Ah yes, that's a bug! Maybe https://github.com/margelo/react-native-graph/pull/14 fixes this?

nopshusang commented 2 years ago

The solution above technically fixes it. However, it breaks the initial fingerX position after the hold. The right fix for it is to move the check into the setFingerX callback

pathEnd.current = isActive.value ? fingerX / width : 1

I recommend you revert that solution and put this one in instead