[Crash]: Invalid number formating `NaN` in svg path

[Trobyss]

Hello !

In Android 8.0.0 only,

Brand: samsung
Model: Galaxy S7
Version: 8.0.0

for no reason, in some case i have an error with NaN value in a svg path. When i log my data before crash, i have (in my data variable):

{"datasets":[],"labels":["févr."]}

  // If no data are available
  if (_.get(data, "datasets[0].data", []).length === 0) {
    return (
      <PlaceHolderGraph>
        <SemiBoldText size={14} color="gray">
          {t("history.no_data")}
        </SemiBoldText>
      </PlaceHolderGraph>
    );
  }

  return (
    <LineChart
      data={data}
      chartConfig={{
        backgroundGradientFrom: theme.colors.pageBackground,
        backgroundGradientFromOpacity: 1,
        backgroundGradientTo: theme.colors.pageBackground,
        backgroundGradientToOpacity: 1,
        color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
        labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
        strokeWidth: 2,
      }}
      width={Dimensions.get("screen").width}
      height={250}
      bezier={true}
      hidePointsAtIndex={
        data.labels.length > 7 ? range(1, data.labels.length, 2) : undefined
      }
      withDots={_.get(data, "datasets[0].data", []).length === 1}
      withInnerLines={false}
      withShadow={false}
      yAxisSuffix={props.suffix}
      yLabelsOffset={10}
      segments={2}
    />
  );

And the error in my firebase crashlytics:

Caused by java.lang.Error
Invalid number formating character 'N' (i=4, s=M64,NaN Q 66.25, NaN, 68.5, NaN Q 70.75, NaN, 73, NaN Q 75.5, NaN, 78, NaN Q 80.5, NaN, 83, NaN Q 85.25, NaN, 87.5, NaN Q 89.75, NaN, 92, NaN Q 94.5, NaN, 97, NaN Q 99.5, NaN, 102, NaN Q 104.25, NaN, 106.5, NaN Q 108.75, NaN, 111, NaN Q 113.5, NaN, 116, NaN Q 118.5, NaN, 121, NaN Q 123.25, NaN, 125.5, NaN Q 127.75, NaN, 130, NaN Q 132.5, NaN, 135, NaN Q 137.5, NaN, 140, NaN Q 142.25, NaN, 144.5, NaN Q 146.75, NaN, 149, NaN Q 151.5, NaN, 154, NaN Q 156.5, NaN, 159, NaN Q 161.5, NaN, 164, NaN Q 166.5, NaN, 169, NaN Q 171.25, NaN, 173.5, NaN Q 175.75, NaN, 178, NaN Q 180.5, NaN, 183, NaN Q 185.5, NaN, 188, NaN Q 190.25, NaN, 192.5, NaN Q 194.75, NaN, 197, NaN Q 199.5, NaN, 202, NaN Q 204.5, NaN, 207, NaN Q 209.25, NaN, 211.5, NaN Q 213.75, NaN, 216, NaN Q 218.5, NaN, 221, NaN Q 223.5, NaN, 226, NaN Q 228.25, NaN, 230.5, NaN Q 232.75, NaN, 235, NaN Q 237.5, NaN, 240, NaN Q 242.5, NaN, 245, NaN Q 247.25, NaN, 249.5, NaN Q 251.75, NaN, 254, NaN Q 256.5, NaN, 259, NaN Q 261.5, NaN, 264, NaN Q 266.5, NaN, 269, NaN Q 271.5, NaN, 274, NaN Q 276.25, NaN, 278.5, NaN Q 280.75, NaN, 283, NaN Q 285.5, NaN, 288, NaN Q 290.5, NaN, 293, NaN Q 295.25, NaN, 297.5, NaN Q 299.75, NaN, 302, NaN Q 304.5, NaN, 307, NaN Q 309.5, NaN, 312, NaN Q 314.25, NaN, 316.5, NaN Q 318.75, NaN, 321, NaN Q 323.5, NaN, 326, NaN Q 328.5, NaN, 331, NaN Q 333.25, NaN, 335.5, NaN Q 337.75, NaN, 340, NaN Q 342.5, NaN, 345, NaN Q 347.5, NaN, 350, NaN)

My package.json

"dependencies": {
    "@nozbe/watermelondb": "^0.15.0",
    "@nozbe/with-observables": "^1.0.5",
    "@react-native-community/art": "^1.1.2",
    "@react-native-community/async-storage": "^2.0.0-rc.1",
    "@react-native-community/async-storage-backend-legacy": "^2.0.0-rc.1",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-native-firebase/analytics": "^6.3.4",
    "@react-native-firebase/app": "^6.3.4",
    "@react-native-firebase/crashlytics": "^6.3.4",
    "@react-native-firebase/remote-config": "^6.3.4",
    "@react-native-firebase/storage": "^6.3.4",
    "@react-navigation/bottom-tabs": "^5.0.2",
    "@react-navigation/material-top-tabs": "^5.1.0",
    "@react-navigation/native": "^5.0.2",
    "@react-navigation/stack": "^5.0.2",
    "await-to-js": "^2.1.1",
    "buffer": "^5.4.3",
    "compare-versions": "^3.6.0",
    "crc": "^3.8.0",
    "d3-interpolate": "^1.4.0",
    "date-fns": "^2.8.1",
    "expo-keep-awake": "^8.0.0",
    "i18next": "^19.0.1",
    "lodash": "^4.17.15",
    "react": "^16.9.0",
    "react-error-boundary": "^1.2.5",
    "react-i18next": "^11.2.2",
    "react-native": "^0.61.5",
    "react-native-ble-plx": "^2.0.0",
    "react-native-chart-kit": "^4.5.0",
    "react-native-device-info": "^5.5.7",
    "react-native-fs": "^2.16.2",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-hooks": "^0.9.0",
    "react-native-localize": "^1.3.1",
    "react-native-mail": "^4.1.0",
    "react-native-popover-view": "^2.0.5",
    "react-native-progress": "^4.0.3",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-size-matters": "^0.3.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-switch-pro": "^1.0.4",
    "react-native-switch-selector": "^2.0.3",
    "react-native-tab-view": "^2.13.0",
    "react-native-unimodules": "^0.7.0",
    "react-use": "^13.22.4",
    "rxjs": "^6.5.3",
    "styled-components": "^5.0.1"
  }

Any idea ?

[lucatomarelli]

@Trobyss Did you find a solution? I am facing the same problem.

[grb2092]

@Trobyss Did you have any workaround for this ??

[Chimpaya]

This issue is most likely because of faulty data. Check your data array and make sure no item is having NaN as a value.