steveliles / react-native-circular-slider-example

A bit of React-Native SVG fun, inspired by a stackoverflow question
http://stackoverflow.com/questions/38253804/how-to-make-a-circular-slider-in-react-native
31 stars 6 forks source link

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

Open darvi-sh opened 8 years ago

darvi-sh commented 8 years ago

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.

steveliles commented 8 years ago

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.

darvi-sh commented 8 years ago

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.

arendjr commented 8 years ago

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?

ORESoftware commented 7 years ago

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

arendjr commented 7 years ago

@ORESoftware: You should probably check your

arendjr commented 7 years ago

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.

ORESoftware commented 7 years ago

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

djohnkirby commented 7 years ago

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

Laurensdc commented 6 years ago

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