Changing react-native-simple-gauge from native to web












0















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.










share|improve this question



























    0















    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.










    share|improve this question

























      0












      0








      0








      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.










      share|improve this question














      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.







      reactjs react-native






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 '18 at 19:41









      mikemike

      63




      63
























          0






          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400404%2fchanging-react-native-simple-gauge-from-native-to-web%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400404%2fchanging-react-native-simple-gauge-from-native-to-web%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Guess what letter conforming each word

          Port of Spain

          Run scheduled task as local user group (not BUILTIN)