React Native 0.57 crash on Android when data changes for XAxis or YAxis

[krzysztof-miemiec]

What is the problem?

After the updating react-native to 0.57.0 and react-native-svg to 7 I experienced crashes on Android that prevent me from using the app.

When does it happen?

The app crashes when I change the data for chart (the data changes in XAxis or YAxis to be specific).

What platform?

• iOS
• Android

React Native version: 0.57.0+

Code to reproduce

I'll send a PR in a minut, this issue is just to track the bug. The details what happens and why it happens can be found in software-mansion/react-native-svg#789.

Solution

Wrap contents of Axis with <G></G>

[ghost]

@JesperLekland & @krzysztof-miemiec - hello there. thanks for reporting this
I can confirm this one is happening. In my case, I used YAxis with BarChart and whenever I request new data from our server, the crash happens. I wish this gets merged soon.

[springroll12]

@krzysztof-miemiec @JesperLekland I am not sure if this is a confirmation of this issue or not, but I am seeing this only on iOS (so far simulated iPhone X). Did you do anything other than wrap the children components in <G> to fix the issue? My understanding of your MR is that that was the only change, but I want to be sure I'm not missing something.

"react-native": "0.57.4",
"react-native-svg": "^8.0.8",
"react-native-svg-charts": "^5.2.0",

On initial render, an areachart with x/y axis is fine, but when I try to change what data is displayed (rerender), I get a removedChild count (0) was not what we expected (1) error. This started to occur after upgrading from react-native-svg 6.3.1 to 8.0.8.

Note that I have also tried react-native-svg versions 7.0.3, 7.2.0 and 6.3.1. Version 6.3.1 does not experience this crash, but there seem to be issues rendering gradients and clips in RN 0.57+.

Android seems fine as far as I can tell with the latest react-native-svg. I have tried applying your fix (wrap children of the axis svg in <G>), but it did not solve the crash for me on iOS. This seems like the correct way to fix the problem, so I am not sure what is going on exactly.

More details here: software-mansion/react-native-svg#848 (comment)

My AreaChart looks nearly identical to the one posted in that thread. It is a slightly modified version of the areachart example with a gradient and both x and y axis. I also use clipPaths to remove pieces of the chart near the ends. I have made one customization to the x-axis to allow the SVGText child to take TSPan children, but I don't think this is relevant, since I have tested both the default x-axis and my modified version and both produce this crash.

Let me know if there is anything I can do to further debug this issue.

[krzysztof-miemiec]

I only changed things that are in the Pull Request. Have you tried full rebuild (remove node_modules, clean react cache etc.) after changing react-native-svg versions? The project I've been working on is currently unmaintained as we've changed focus to other apps. Our dependencies contain:

    "react-native": "0.57.0",
    "react-native-svg": "^7.0.3",
    "react-native-svg-charts": "^5.2.0",

So we're couple versions behind. Also, we only experienced issues on Android devices.

[springroll12]

@krzysztof-miemiec I believe I have tried multiple full rebuilds (delete node_modules, clear npm cache, delete build directories/gradlew clean) with each version, but I am not certain I've been clearing the react cache correctly. My understanding is that all I should need to do is run npm start --clear-cache or npm cache clean, but I may be wrong. This gist seems to indicate that it's a complex process, but I've never had issues before:

https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d

We are only experiencing issues on iOS devices, so maybe our issues are entirely unrelated.

I've been having an issue with react-native link react-native-svg lately (can't seem to link it), but I don't think it's related since you shouldn't have to re-link after an upgrade unless the linking procedure has changed.

[krzysztof-miemiec]

I guess that something has been changed even more since RN0.57.0 & RNSVG7.0.3 then. 😕

[msand]

I've published a fix in v9.2.4 of react-native-svg, and opened an issue in react-native for the bug as well facebook/react-native#23350