Chart disappears on second time navigating to screen

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

[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 🙌

[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.