chart rendering issue on android devices

[wzhang2]

i added a button to change the data, and it's working fine on both of the ios simulator and android emulator, as well as the ios device, but it is not working on an android phone, i'm just using useState and useCallback to control the states, but is this something i should do in chartOptions instead? my data and chartOptions are both states

[wzhang2]

I can see that render is called, but most of the time the chart just doesn't show up or doesn't change, this is totally fine on the following simulators/devices:

iOS simulator (11 pro) android emulator (android 10) iPhone 7, X, 11 pro

but its not working on any of the android devices that I have: pixel 2 huawei nexus p6

fyi I package full release builds for testing

[wzhang2]

here's a snippet of my code

  const renderChart = useCallback(() => {
        console.log('rendering')
        console.log(JSON.stringify(options));
        return (
            <HighchartsReactNative
                styles={lineChartStyles.container}
                options={options}
                loader={true}
                modules={modules}
                useCDN={true}
                useSSL={true}
            />
        )
    }, [options])

    return (
        renderChart()
    );

my versions:

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-unimodules": "^0.7.0",
"metro-config": "^0.62.0",
"react-native-webview": "^10.4.1",
"@highcharts/highcharts-react-native": "^3.1.1"

[wzhang2]

and here's my device log

08-19 10:09:38.944   849   849 I /vendor/bin/hw/android.hardware.health@2.0-service.wahoo: SRAM data: 2805000
08-19 10:09:38.959  2250  2814 D PowerUI : can't show warning due to - plugged: true status unknown: false
08-19 10:09:39.732  3335 12953 I CastDatabase: Saving the database
08-19 10:09:39.766  3335 12953 I SQLiteCastStore: [CastNetworkInfo] saved: 0, skipped: 0, [CastDeviceInfo]: saved 0, skipped 0, [Paired Guest Mode DeviceInfo] saved: 0, skipped: 0. [ProbedNetworks]: saved 0, skipped: 0, [ProbedSocketAddress]: saved 0, skipped: 0, [Network-Device pairs]: saved: 0
08-19 10:09:41.812   849   849 I /vendor/bin/hw/android.hardware.health@2.0-service.wahoo: SRAM data: 2805000
08-19 10:09:47.754   930   981 I VSC     : @ 2962.847: [VSC] Request sensor 131074, sample_duration 0 ms, report_duration 0 ms
08-19 10:09:47.755   930   981 I VSC     : @ 2962.848: [VSC] Stopping sensor events for sensor 65537
08-19 10:09:53.743 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.743 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.760 13657 13701 I ReactNativeJS: timeframe changed to: 1Y
08-19 10:09:53.761 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.761 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.762 13657 13701 I ReactNativeJS: series length 13
08-19 10:09:53.763 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.763 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.764 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.764 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.526 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.526 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.543 13657 13701 I ReactNativeJS: timeframe changed to: 6M
08-19 10:09:55.545 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.545 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.546 13657 13701 I ReactNativeJS: series length 7
08-19 10:09:55.546 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.546 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.547 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.547 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:41.834  2250  2814 D PowerUI : can't show warning due to - plugged: true status unknown: false
08-19 10:10:19.490  1314  1366 V DisplayPowerController: Brightness [6] reason changing to: 'automatic [ dim ]', previous reason: 'automatic'.
08-19 10:10:22.626   930   981 I CHRE    : @ 2997.721: [ImuCal] [NanoSensorCal:GYRO_RPS] Offset | Temperature [C]: 0.027103, -0.000604, 0.015525 | 28.36

[sebastianbochan]

Could you share your simplified app? It will allow us to reproduce the problem.

[wzhang2]

thanks i shall add that in the next few days. right now i added some delay and it's working

[sebastianbochan]

Thank you for information.

[wzhang2]

@Denyllon @sebastianbochan maybe i can try to help fix this issue since that's probably easier, is there anything i need to do before contributing?

[Denyllon]

@wzhang2 Would be good to only see the description how did you find the source of this problem, and detailed info about the suggested changes. I need to also inform you about the fact, that the time finish the review and testing your code may be extended (don't really know how much).