Chart rendering is inconsistent after RN update

[ivantrejo41]

After using this library without any issues for several months, we recently upgraded react-native to a newer version due to an incompatibility with another dependency. However, we encountered an issue with the representation of the charts after the upgrade.

Issue Details:

The unusual behavior we are experiencing is that when we request and update the data of the object to be represented, the chart rendering is inconsistent. Depending on the case and the timing, the chart may or may not be rendered. Interestingly, if the series has no data, or the react-native debugger is enabled, it always gets rendered.

Additionally, we noticed that enabling the react-native debugger results in the chart being rendered in every case. Furthermore, we have a component that includes two instances of RNEP (react-native-echarts-pro). One instance works all the time, but the other instance's rendering behavior is dependent on the occasion. While trying to debug it always works, so we can't really debug. This issue might be related to #106

Chart Rendering Examples:

Here's a representation of how the chart appears when it doesn't render (blank):

And here's a representation of the chart when it renders correctly:

[Insert screenshot or code snippet representing the expected rendering]

Versions:

react-native-echarts-pro version: 1.9.1
react-native version: 0.71.6
react-native-webview version: 11.2.3
Platforms: Android and iOS

Code Snippet:

data = {"grid":{"bottom":16,"top":8,"left":8,"right":8,"containLabel":true},"legend":{"show":false,"top":"bottom"},"tooltip":{"trigger":"axis","fontSize":3},"xAxis":{"type":"time","axisLabel":{"formatter":"{d}"}},"yAxis":{"type":"value"},"series":[{"name":"Autoconsumo","data":[{"name":"2023-06-01T00:00:00+02:00","value":["2023-06-01T00:00:00+02:00",0]},{"name":"2023-06-02T00:00:00+02:00","value":["2023-06-02T00:00:00+02:00",0]},{"name":"2023-06-03T00:00:00+02:00","value":["2023-06-03T00:00:00+02:00",0]},{"name":"2023-06-04T00:00:00+02:00","value":["2023-06-04T00:00:00+02:00",0]},{"name":"2023-06-05T00:00:00+02:00","value":["2023-06-05T00:00:00+02:00",0]},{"name":"2023-06-06T00:00:00+02:00","value":["2023-06-06T00:00:00+02:00",0]},{"name":"2023-06-07T00:00:00+02:00","value":["2023-06-07T00:00:00+02:00",0]},{"name":"2023-06-08T00:00:00+02:00","value":["2023-06-08T00:00:00+02:00",0]},{"name":"2023-06-09T00:00:00+02:00","value":["2023-06-09T00:00:00+02:00",0]},{"name":"2023-06-10T00:00:00+02:00","value":["2023-06-10T00:00:00+02:00",0]},{"name":"2023-06-11T00:00:00+02:00","value":["2023-06-11T00:00:00+02:00",0]},{"name":"2023-06-12T00:00:00+02:00","value":["2023-06-12T00:00:00+02:00",0]},{"name":"2023-06-13T00:00:00+02:00","value":["2023-06-13T00:00:00+02:00",1.9131999999999607]},{"name":"2023-06-14T00:00:00+02:00","value":["2023-06-14T00:00:00+02:00",40.122900000000016]},{"name":"2023-06-15T00:00:00+02:00","value":["2023-06-15T00:00:00+02:00",7.064700000000016]},{"name":"2023-06-16T00:00:00+02:00","value":["2023-06-16T00:00:00+02:00",0]},{"name":"2023-06-17T00:00:00+02:00","value":["2023-06-17T00:00:00+02:00",0]},{"name":"2023-06-18T00:00:00+02:00","value":["2023-06-18T00:00:00+02:00",0]},{"name":"2023-06-19T00:00:00+02:00","value":["2023-06-19T00:00:00+02:00",0]},{"name":"2023-06-20T00:00:00+02:00","value":["2023-06-20T00:00:00+02:00",0]},{"name":"2023-06-21T00:00:00+02:00","value":["2023-06-21T00:00:00+02:00",0]},{"name":"2023-06-22T00:00:00+02:00","value":["2023-06-22T00:00:00+02:00",0]},{"name":"2023-06-23T00:00:00+02:00","value":["2023-06-23T00:00:00+02:00",0]},{"name":"2023-06-24T00:00:00+02:00","value":["2023-06-24T00:00:00+02:00",0]},{"name":"2023-06-25T00:00:00+02:00","value":["2023-06-25T00:00:00+02:00",0]},{"name":"2023-06-26T00:00:00+02:00","value":["2023-06-26T00:00:00+02:00",0]},{"name":"2023-06-27T00:00:00+02:00","value":["2023-06-27T00:00:00+02:00",0]},{"name":"2023-06-28T00:00:00+02:00","value":["2023-06-28T00:00:00+02:00",0]},{"name":"2023-06-29T00:00:00+02:00","value":["2023-06-29T00:00:00+02:00",0]},{"name":"2023-06-30T00:00:00+02:00","value":["2023-06-30T00:00:00+02:00",0]}],"type":"bar","stack":"x","color":"#199479"},{"name":"Energía importada de la red","data":[{"name":"2023-06-01T00:00:00+02:00","value":["2023-06-01T00:00:00+02:00",0]},{"name":"2023-06-02T00:00:00+02:00","value":["2023-06-02T00:00:00+02:00",0]},{"name":"2023-06-03T00:00:00+02:00","value":["2023-06-03T00:00:00+02:00",0]},{"name":"2023-06-04T00:00:00+02:00","value":["2023-06-04T00:00:00+02:00",0]},{"name":"2023-06-05T00:00:00+02:00","value":["2023-06-05T00:00:00+02:00",0]},{"name":"2023-06-06T00:00:00+02:00","value":["2023-06-06T00:00:00+02:00",0]},{"name":"2023-06-07T00:00:00+02:00","value":["2023-06-07T00:00:00+02:00",0]},{"name":"2023-06-08T00:00:00+02:00","value":["2023-06-08T00:00:00+02:00",0]},{"name":"2023-06-09T00:00:00+02:00","value":["2023-06-09T00:00:00+02:00",0]},{"name":"2023-06-10T00:00:00+02:00","value":["2023-06-10T00:00:00+02:00",0]},{"name":"2023-06-11T00:00:00+02:00","value":["2023-06-11T00:00:00+02:00",0]},{"name":"2023-06-12T00:00:00+02:00","value":["2023-06-12T00:00:00+02:00",0]},{"name":"2023-06-13T00:00:00+02:00","value":["2023-06-13T00:00:00+02:00",0]},{"name":"2023-06-14T00:00:00+02:00","value":["2023-06-14T00:00:00+02:00",0]},{"name":"2023-06-15T00:00:00+02:00","value":["2023-06-15T00:00:00+02:00",0]},{"name":"2023-06-16T00:00:00+02:00","value":["2023-06-16T00:00:00+02:00",0]},{"name":"2023-06-17T00:00:00+02:00","value":["2023-06-17T00:00:00+02:00",0]},{"name":"2023-06-18T00:00:00+02:00","value":["2023-06-18T00:00:00+02:00",0]},{"name":"2023-06-19T00:00:00+02:00","value":["2023-06-19T00:00:00+02:00",0]},{"name":"2023-06-20T00:00:00+02:00","value":["2023-06-20T00:00:00+02:00",0]},{"name":"2023-06-21T00:00:00+02:00","value":["2023-06-21T00:00:00+02:00",0]},{"name":"2023-06-22T00:00:00+02:00","value":["2023-06-22T00:00:00+02:00",0]},{"name":"2023-06-23T00:00:00+02:00","value":["2023-06-23T00:00:00+02:00",0]},{"name":"2023-06-24T00:00:00+02:00","value":["2023-06-24T00:00:00+02:00",0]},{"name":"2023-06-25T00:00:00+02:00","value":["2023-06-25T00:00:00+02:00",0]},{"name":"2023-06-26T00:00:00+02:00","value":["2023-06-26T00:00:00+02:00",0]},{"name":"2023-06-27T00:00:00+02:00","value":["2023-06-27T00:00:00+02:00",0]},{"name":"2023-06-28T00:00:00+02:00","value":["2023-06-28T00:00:00+02:00",0]},{"name":"2023-06-29T00:00:00+02:00","value":["2023-06-29T00:00:00+02:00",0]},{"name":"2023-06-30T00:00:00+02:00","value":["2023-06-30T00:00:00+02:00",0]}],"type":"bar","stack":"x","color":"#F0A752"}]}
;

<RNEChartsPro
    ref={ref}
    width={widthPercentageToDP(85)}
    keyboardShouldPersistTaps="always"
    option={data}
    style={{ height: 200 }}
    eventActions={{
        highlight: (item) => {
            dataClicked(item);
            setOndata(item);
        },
    }}
/>

[supervons]

Thanks for feedback, I will test it on react-native@0.71.6.

And can you show me this real device system version.

[ivantrejo41]

Both android 10 (MIUI 12.0.3) and iOS 16.5

[BigFaceMaster]

Do you resolved this problem?

[ivantrejo41]

Still having the same issue, a Hermes update provided a workaround but had to refactor some of the code using the library in order to make it work, still getting the same behavior while using the debugger.