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

[tomankh]

Hi

When trying out the examples I'm getting the following error for them all (only tested on android):

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

This is my set up:

 "dependencies": {
    "react": "15.4.2",
    "react-native": "0.40.0",
    "react-native-svg": "^5.1.4",
    "react-native-pathjs-charts": "0.0.24",
    ...
    }

I've run react-native link react-native-svg and it linked successfully.

Has anyone else has this?

I've found the same error message here: steveliles/react-native-circular-slider-example#1 but I am able to run this example.

Thank you for your help.

[marzolfb]

There's an existing PR (#69) thats very close to being merged in that moves the dependencies in this library from react-native 0.38 to 0.40 and react-native-svg 4.4.1 to 4.5. You'll likely have better luck sticking with these older versions of dependencies (as specified in package.json). However, when I tried upgrading the example app to react-native 0.40 and react-native-svg to 5.1.4, I didn't get the same error you get above. After you modified your setup to these new versions, did you run react-native upgrade in your example directory (the pending #69 PR is going to take care of that)?

[tomankh]

Sorry - I forgot that I couldn't run react-native run-android in the example folder when i cloned the repo. I got this error:

Unknown source file : UNEXPECTED TOP-LEVEL EXCEPTION:
Unknown source file : com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim;
Unknown source file : 	at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
Unknown source file : 	at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
Unknown source file : 	at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
Unknown source file : 	at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
Unknown source file : 	at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
Unknown source file : 	at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502)
Unknown source file : 	at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334)
Unknown source file : 	at com.android.dx.command.dexer.Main.run(Main.java:277)
Unknown source file : 	at com.android.dx.command.dexer.Main.main(Main.java:245)
Unknown source file : 	at com.android.dx.command.Main.main(Main.java:106)

this is the java version I am using

java version "1.8.0_121"
Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.121-b13, mixed mode)

I moved over the javascript files from /example/src to my existing project - that was recently a fresh install.

If I first run react-native upgrade in /example I can then run react-native run-android. However the script npm run sync-rnpc is not working with the latest version of node.js and npm installed. I will try some older dependencies and update what worked.

Thank you!

[marzolfb]

Glad that helped.

The fix for the "Multiple dex files" error is to do:

(cd example && ./gradlew clean)

And then try running "run-android" again

Now that I see other people facing this from a fresh pull, I suspect there are some extraneous files committed to the repo. I will look into this and get it cleaned up so others aren't bit by this in the future.

Curious what error you ran "sync-rnpc"? I will try to reproduce and see if I can clean that up as well.

[marzolfb]

Just published version 0.0.25 which upgrades dependencies for react-native to 0.41.2 and react-native-svg to 4.5.0

[tomankh]

Thank you!

[manjeets12]

I am using latest version of react-native-pathjs-charts, but I am still getting the same error

[marzolfb]

Based on your screenshot it looks like you are trying to use a newer version of react-native-svg in your app (5.1.5) which is in conflict with the version react-native-pathjs-charts is expecting (4.5). There's plenty of discussion elsewhere (#58 and #71) about why we aren't using newer versions of react-native-svg yet. I suspect if you downgrade to react-native-svg, the error will go away.

[manjeets12]

@marzolfb Thanks for the response, Yeah I checked those discussion, and downgraded to react- native-svg(4.5), I got some package name errors while doing this after resolving those its working file

[JunhyeokHeo]

could i ask how to downgrade from newer one?

[marzolfb]

What does npm list react-native react-native-svg paths-js show for you?

[jasmo2]

I have the same issue But I got: npm list react-native react-native-svg paths-js

 npm list react-native react-native-svg paths-js


native-base@2.0.2 /project_path/tvtd_0.4x
├── react-native@0.41.2  extraneous
├─┬ react-native-pathjs-charts@0.0.26
│ ├── paths-js@0.4.5
│ └── react-native-svg@4.5.0
└── react-native-svg@5.1.5

npm ERR! extraneous: react-native@0.41.2 /project_path/node_modules/react-native

[marzolfb]

The outer react-native-svg version conflicts with react-native-pathjs-charts. Change your version spec for react-native-svg in your root package.json to constrain to versions no greater than 4.5.x and then get rid of the 5.1.5 version and install the 4.5.0 version at your root.

[jasmo2]

@marzolfb thanks it works perfect.
👍

[afilp]

@marzolfb I have the following setup but I still get this 'd' in shadow error:

+-- react-native@0.42.3
-- react-native-pathjs-charts@0.0.26 +-- paths-js@0.4.5 -- react-native-svg@4.5.0

Any ideas? Thanks.

[marzolfb]

@afilp Its possible rn 0.42x is the problematic piece here (and you mentioned this in the other issue you comments on). Its best to open a new issue and track it separately.

[bijeshp]

├── react-native@0.42.3
└─┬ react-native-pathjs-charts@0.0.27
├── paths-js@0.4.5
└── react-native-svg@4.5.0

I still get the same issue

[markflorisson]

Any update on this? I can't get this to work on RN 0.44.

[bijeshp]

I have used another library
https://github.com/wuxudong/react-native-charts-wrapper
Which seems to be working fine

[markflorisson]

@bijeshp Thanks for the heads up, I'll give it a try!

[marzolfb]

@markflorisson @bijeshp Not sure if you've moved on completely, but if you are willing to give it another shot, we have just updated to more recent dependencies which hopefully will take care of the issues you've been experiencing.

[abood91]

I am having the same issue, RN 0.44.0
+-- react-native@0.44.0
+-- react-native-pathjs-charts@0.0.28
| +-- paths-js@0.4.5
| -- react-native-svg@5.1.8 deduped -- react-native-svg@5.1.8
Please solve ASAP

[marzolfb]

@abood91 I'm unable to reproduce this.

Did you run react-native link react-native-svg?

What is your react dependency version - what does this produce when you run it?

npm list react react-native react-native-svg paths-js

This is what I get on a brand new app:

 ├── react@16.0.0-alpha.6 
├── react-native@0.44.0 
└─┬ react-native-pathjs-charts@0.0.28
  ├── paths-js@0.4.5 
  └── react-native-svg@5.1.8 

Where does the -- react-native-svg@5.1.8 deduped-- react-native-svg@5.1.8 output come from in what you have above?

[abood91]

@marzolfb Thanks, and yes i run react-native link react-native-svg?
after running npm list react react-native react-native-svg paths-js i get :

+-- react@16.0.0-alpha.6
+-- react-native@0.44.0
+-- react-native-pathjs-charts@0.0.28
| +-- paths-js@0.4.5
| -- react-native-svg@5.1.8 deduped -- react-native-svg@5.1.8

I got the deduped output after i ran the command

npm list react-native react-native-svg paths-js

[abood91]

The problem comes when i try to use date time format in any of the axis data, the data format for example would look like this "2017-05-13 16:05:29"

[Gab-M27]

Hi guys !

I was struggling with this error too "Error while updating property 'd' in shadow node of type RNSVGPath", making my app crash on Android only.
In my case, i was using the bar charts on iOS & Android to display some informations i got from an API, and i finally found out how to deal with it only through my own component.

First, here the case where i crash :

• Dataset is fetch, but values are 0 (ex : [[ "v" : 0, name : "data1"], ["v" : 0, name : "data2"]]).
  That's the most important part, because as soon as i got some data, the crash was gone.

But since i need to be able to display empty chart, i had to found a way around. At for this, i just needed to add to my charts Options : axisY { min : true, ...}.

The "min" option force the component to display at least the axisX, and this way i didn't got anymore crash on android. My guess is, since the size of the chart is directly linked with the values in the dataset, having no data throw an error on Android because he miss some information (i haven't digged enough in the source code to know how this work, but i guess it's something like that). So by using the min option, you force him to use a default value in case there's no data.

[huanghaiyang]

+-- react@16.0.0-alpha.12
+-- react-native@0.46.4
+-- react-native-pathjs-charts@0.0.30
| +-- paths-js@0.4.5
| -- react-native-svg@5.3.2 deduped -- react-native-svg@5.3.2

same problem!

[song50119]

@GabNihill Thanks