Chart disappears on second time navigating to screen

[giaset]

Hey all,

Pretty basic chart setup (see code below). Works great on first time navigating to screen, but if I pop back and then navigate to the screen again, the chart path disappears (dot still works though!) Using latest react-navigation if that helps.

Thanks!

<ChartPathProvider data={{ points: data }}>
    <ChartPath
        {...{ width }}
        fill='none'
        height={width / 2}
        stroke='black'
        strokeWidth={3.5}
        selectedStrokeWidth={3}
    />
    <ChartDot size={16} style={styles.chartDot} />
</ChartPathProvider>

https://user-images.githubusercontent.com/2816603/103932089-2e9a0000-50d6-11eb-8a60-7f8deaf1bf22.mov

[jaroslav009]

same problem, but when i drag the dot chart starts to draw

https://user-images.githubusercontent.com/33982583/104186482-2405a080-541f-11eb-819a-0e4c44c85290.mov

[qmzik]

Same problem now

"@react-navigation/native": "5.4.2" "react-native-reanimated": "2.0.0-alpha.9.2",

[Kasendwa]

Hey. I had the same problem and I realized changing the data points will always force it to render well at every navigation.

[corasan]

Did you find a way to fix this? I'm having the same problem.

[mattfrances]

Also running into the same issue using the latest react-native-animated-charts and react-navigation versions.

[mattfrances]

Workaround solution Add a setTimeout to the useEffect of the component rendering the Chart to toggle the chart visible after a delay of 0:

const [chartVisible, setChartVisible] = useState(false);
useEffect(() => {
  setTimeout(() => {
    setChartVisible(true);
  }, 0);
}, [data]);

...

{chartVisible ? (
  <>
    <ChartPath ... />
    <ChartDot ... />
  </>
) : null}

Explanation I'm not exactly sure why this works, but here's my best guess: The ChartPath file has 2 variables that keep track of the previous data and the current data (prevData & currData). When navigating back to a screen, the previous and current data need to be updated to reflect the chart that should be showing. The problem is that there is a slight delay in the code to update these values, and the ChartPath ends up being rendered before the data is ready, leading to the empty line seen in the screen recordings above.

My understanding and the explanation above is not complete, so if @osdnk or @outaTiME have more context that would be really appreciated 🙌

[kanavi9527]

Occasionally, the curve is not displayed when I enter it for the first time, so I set an additional initial value, which means that the first time I enter the rendering twice, it seems that this problem does not occur.const poinlist = list.length > 0 ? interpolator({data: list, range: 80}) : new Array(80).fill({x: '0', y: '0'});

[HarshaKoshila]

this issue is still remaining

[osdnk]

I have fixed this in a main rainbow repo, I’ll push a fix soon

On Fri, 24 Sep 2021 at 6:32 PM, Harsha Koshila @.***> wrote:

this Issue is still remaining

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rainbow-me/react-native-animated-charts/issues/16#issuecomment-926720957, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGEEV5BMOL72LCHCOJJ5UKDUDSKY7ANCNFSM4VZMARCQ .

-- Pozdrawiam Michał Osadnik

[ajimae]

I was able to solve this issue using useEffect hook. I created a component state and also created a function that calculated my points and then updates the state accordingly, by doing this the entire chart component is forced to re-render.

const [points, setPoints] = useState([])

const calculate = () => {
  let startUnixTimestamp = moment().subtract(duration, 'day').unix()
  let data = chartPrices.map((item, index) => {
    return {
      x: startUnixTimestamp + (index + 1) * 3600,
      y: item
    }
  })
  setPoints(monotoneCubicInterpolation({ data, range: data.length }))
}

useEffect(() => {
  calculate()
}, [])

[ajimae]

same problem, but when i drag the dot chart starts to draw

2021-01-11.15.09.10.mov

How were able to get the opening/lowest value to be displayed in the chat? In this case $2.1

Thanks 🙏🏽

[stopachka]

@osdnk do you mind linking to the fix that you made in the main repo?

[benjaminharringtonrose]

I'm still experiencing this issue as well. I'm displaying the chart in a bottom tab screen using react-navigation and it's the first screen rendered once the app navigates to the tabs.

"resolutions": { "react-native-gesture-handler": "~2.1.0" },

and using

"@rainbow-me/animated-charts": "^1.0.0-alpha.6", "react-native-reanimated": "~2.3.1"

[stopachka]

In order for me to fix this, I had to follow @kanavi9527 idea, to have a new set of points, where the y value was 0.

Here's a quick "hacking hook" I wrote to get around it:

const useHackToResetRainbowCaches = (points, deps) => {
  const [cachedPoints, setPoints] = useState(points.map((x) => ({ x, y: 0 })));
  useEffect(() => {
    setPoints(points);
  }, deps);
  return cachedPoints;
};

const points = useHackToResetRainbowCaches(ps, []);

[andreibahachenka]

still have this issue, methods above don't help

[kierangillen]

I've noticed weird rendering behavior when the ChartPath and the ChartDot are not located in the component where the ChartPathProvider is. I believe the issue is that React isn't properly updating the render of the children when the points are updated in the provider because the path and dots aren't receiving direct state updates. Try keeping the dot and path in the same component as the provider and see if it helps.