react-native-circular-slider-example icon indicating copy to clipboard operation
react-native-circular-slider-example copied to clipboard

Error while updating property 'd' in shadow node of type: RNSVGPath

Open darvi-sh opened this issue 8 years ago • 9 comments

Hey,

Thanks for the code! First of all I'm new to react-native.

I'm trying to develop something like this: http://jsfiddle.net/soundar24/LpuLe9tr/3/ And your code seems the closest react-native I could work with.

I've imported CircularSlider, put the <CircularSlider> part and now I'm getting this error: image

Line 49:

d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}

I replaced it with another value d="M10 10" and it showed something correctly, that's how I concluded the error line.

darvi-sh avatar Sep 10 '16 13:09 darvi-sh

I'm guessing you didn't set the width and height props, and maybe others, e.g.

<CircularSlider width={250} height={250} meterColor='#ffa' textColor='#000' value={this.state.sliderValue} onValueChange={(value)=>this.setState({sliderValue:value})}/>

If there is a bug here its that I didn't specify the propTypes so you weren't forced to set them.

steveliles avatar Sep 15 '16 11:09 steveliles

Sorry for the close/open, accidentally clicked.

I used your code actually, it has all the props. The error disappears only when I remove the d attribute in Path tag. I'll try to explore more on your code and if possible post the answer here.

darvi-sh avatar Sep 17 '16 06:09 darvi-sh

I've had a similar problem, but after debugging it turned out the string contained invalid formatting ("NaN" and stuff). Maybe you're having a similar problem?

arendjr avatar Oct 25 '16 19:10 arendjr

@arendjr I see that NaN business also, anyone know why it could have made its way in there? Some division by zero surely

ORESoftware avatar Feb 03 '17 07:02 ORESoftware

@ORESoftware: You should probably check your

arendjr avatar Feb 03 '17 07:02 arendjr

Sorry, pressed the button accidentally (on mobile). What I meant was:

You should probably check your own application code. At least in my case I was the one accidentally inserting NaNs in the definition of the d attribute.

arendjr avatar Feb 03 '17 07:02 arendjr

Yeah, so d is here:

 <Surface width={graphWidth} height={graphHeight}>
                    <Group x={0} y={0}>
                        <Shape
                            d={linePath}   /// <<<<<<<<<<<<<<<<
                            stroke={Color.Orange}
                            strokeWidth={1}
                        />
                    </Group>
                </Surface>

the value for linePath is:

"MNaN,302Z"

LOL no idea where that data is coming from, must be some arithmetic problem

ORESoftware avatar Feb 03 '17 07:02 ORESoftware

I had this problem and fixed it by restarting the packager.

djohnkirby avatar Feb 07 '17 20:02 djohnkirby

Restarting the packager didn't work for me, I did a cleanup of node_modules and restarted packager & emulator.

Laurensdc avatar Feb 07 '18 15:02 Laurensdc