Skip to content

Crashes by react-native-svg invalid number formating character #3049

Open
@Rob-latticetraining

Description

@Rob-latticetraining

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's Code of Conduct

Victory version

36.9.2

Code Sandbox link

No response

Bug report

Svg invalid number error when trying to draw bar chart with corner radius causes crash. This seemed to only happen under some very specific circumstances with data and screen sizes.

Fatal Exception: java.lang.Error Invalid number formating character 'N'

Found that in function solveX in these two files was returning NaN in the case where cornerRadius = 4

  • victory-bar/es/geometry-helper-methods.js b/node_modules/victory-bar/es/geometry-helper-methods.js
  • victory-bar/src/geometry-helper-methods.ts b/node_modules/victory-bar/src/geometry-helper-methods.ts

This was due to a floating point error when calculating the powers within this function

  solveX: function (y) {
    var sqrt = Math.sqrt(Math.pow(this.radius, 2) - Math.pow(y - this.center.y, 2));
    return [this.center.x - sqrt, this.center.x + sqrt];
  },

Resulting in it trying to calculate Math.sqrt(0 - 0.000000000000146)
We ended up patching this function to check if the value is less than 0

solveX(y: number) {
    const diff = Math.pow(this.radius, 2) - Math.pow(y - this.center.y, 2);
    const sqrt = diff >= 0 ? Math.sqrt(diff) : 0;

    return [this.center.x - sqrt, this.center.x + sqrt];
  }

Potentially related to this issue which mentions rounded cornerRadius as a potential fix: #2654

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: Bug 🐛Oh no! A bug or unintentional behavior

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions