Ytukyg

I need Gauge progress component for web, exactly the same like on npm: https://www.npmjs.com/package/react-native-simple-gauge

I try to change this from react-native to react web but I get an error:

    Uncaught TypeError: commands[i] is not a function

    at initialize.renderShapeTo (shape.js?eb14:70)

    at initialize.renderLayerTo (base.js?7a16:179)

    at initialize.renderTo (base.js?7a16:166)

    at initialize.renderLayerTo (group.js?639e:37)

    at initialize.renderTo (node.js?3136:62)

    at initialize.render (surface.js?e430:132)

    at Surface.componentDidUpdate (react-art.development.js?75fd:11595)

    at commitLifeCycles (react-dom.development.js?61bb:15263)

    at commitAllLifeCycles (react-dom.development.js?61bb:16523)

    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)









            react-dom.development.js?61bb:15123 The above error occurred in the 

       <Surface> component:

       in Surface (created by CircleProgress)

       in div (created by CircleProgress)

       in CircleProgress (at createAnimatedComponent.js:78)

       in AnimatedComponent (created by ConnectedCircleProgress)

       in ConnectedCircleProgress (created by ProductPage)

       in div (created by Container)

       in Container (created by ProductPage)

       in ProductPage (created by Route)

       in Route (created by App)

       in Switch (created by App)

       in main (created by Context.Consumer)

       in StyledComponent (created by App__AppMain)

       in div (created by Context.Consumer)

       in StyledComponent (created by App__AppContainer)

       in App

       in Router (created by ConnectedRouter)

       in ConnectedRouter (created by Connect(ConnectedRouter))

       in Connect(ConnectedRouter)

       in Provider 

Error is triggered in:

./node_modules/art/modes/canvas/shape.js?eb14

Author of the library use those libraries:

ReactNativeART

Animated from react-native

I replaced them with:

https://www.npmjs.com/package/animated

https://www.npmjs.com/package/react-art

Code for AnimatedGaugeProgress that was changed from react-native to react web:

import React, { Component } from 'react';

import Animated from 'animated';

import { func, number, object, string } from 'prop-types';



import CircleProgress from './CircleProgress';



const AnimatedCircleProgress = Animated.createAnimatedComponent(CircleProgress);



export class ConnectedCircleProgress extends Component {

  state = {

    fillShape: new Animated.Value(this.props.prefill || 0),

  };



  componentDidMount() {

    this.fillCircle();

  }



  componentDidUpdate(prevProps) {

    if (prevProps.fill !== this.props.fill) {

      this.fillCircle();

    }

  }



  fillCircle() {

    const { tension, friction, onAnimationComplete, prefill } = this.props;



    const fillShape = new Animated.Value(prefill || 0);

    this.setState({ fillShape });



    Animated.spring(fillShape, {

      toValue: this.props.fill,

      tension,

      friction,

    }).start(onAnimationComplete);

  }



  render() {

    const { fill, prefill, ...other } = this.props;



    return <AnimatedCircleProgress {...other} fill={this.state.fillShape} />;

  }

}



ConnectedCircleProgress.defaultProps = {

  friction: 10,

  tension: 7,

};



ConnectedCircleProgress.propTypes = {

  size: number.isRequired,

  width: number.isRequired,

  backgroundColor: string,

  fill: number,

  friction: number,

  onAnimationComplete: func,

  onLinearAnimationComplete: func,

  prefill: number,

  style: object,

  tension: number,

  tintColor: string,

};



export default ConnectedCircleProgress;

Code for GaugeProgress that was changed from react-native to react web:

import React, { Component } from 'react';

import {

  array,

  arrayOf,

  func,

  number,

  object,

  oneOfType,

  string,

} from 'prop-types';

import { Group, Path, Shape, Surface } from 'react-art';



import COLORS from 'theme/colors';



const getFill = fill => (fill < 0.01 ? 0 : fill > 100 ? 100 : fill);



const crcPth = (x, y, r, dgrBg, dgrEnd) => {

  const p = Path();

  p.path.push(0, x + r, y);

  p.path.push(4, x, y, r, (dgrBg * Math.PI) / 180, (dgrEnd * Math.PI) / 180, 1);



  return p;

};



class CircleProgress extends Component {

  render() {

    const {

      backgroundColor,

      children,

      cropDegree,

      fill,

      size,

      style,

      stroke,

      strokeCap,

      rotation,

      tintColor,

      width,

    } = this.props;



    const bckgPath = crcPth(

      size / 2,

      size / 2,

      size / 2 - width / 2,

      0,

      (360 * 99.9) / 100 - cropDegree,

    );



    const safeFill = getFill(fill);

    const crPath = crcPth(

      size / 2,

      size / 2,

      size / 2 - width / 2,

      0,

      (((360 * 99.9) / 100 - cropDegree) * safeFill) / 100,

    );



    return (

      <div style={style}>

        <Surface width={size} height={size}>

          <Group

            rotation={rotation + cropDegree / 2}

            originX={size / 2}

            originY={size / 2}

          >

            <Shape

              d={bckgPath}

              strokeDash={stroke}

              stroke={backgroundColor}

              strokeWidth={width}

              strokeCap={strokeCap}

            />

            <Shape

              d={crPath}

              strokeDash={stroke}

              stroke={tintColor}

              strokeWidth={width}

              strokeCap={strokeCap}

            />

          </Group>

        </Surface>

        {typeof children === 'function' ? children(fill) : children}

      </div>

    );

  }

}



CircleProgress.defaultProps = {

  backgroundColor: COLORS.middleBlue,

  cropDegree: 90,

  rotation: 90,

  strokeCap: 'butt',

  tintColor: COLORS.darkBlue,

};



CircleProgress.propTypes = {

  fill: number.isRequired,

  size: number.isRequired,

  width: number.isRequired,

  backgroundColor: string,

  children: oneOfType([func, object, array]),

  cropDegree: number,

  rotation: number,

  stroke: arrayOf(number),

  strokeCap: string,

  style: object,

  tintColor: string,

};



export default CircleProgress;

Code for rendering that component:

   <ConnectedCircleProgress

      size={200}

      width={15}

      fill={100}

      rotation={90}

      cropDegree={90}

      tintColor="#4682b4"

      delay={0}

      backgroundColor="#b0c4de"

      stroke={[2, 2]}

      strokeCap="circle"

    />

Is this issue is related to canvas?

I can't find anything on the official documentation.

I cant find a solution for that issue, any help would be appreciated.