Error while updating property 'd' in shadow node of type RNSVGPath for input string 'h'

[Yandamuri]

Facing this issue for few icons . I have gone through many git hub and stack over flow discussions like these, But unable to figure out the exact root cause.

In my case I am down loading Flat icons in svg format and then converting the svg to react-native format by using this online converter which is suggested by react-native-svg package itself.

I am using,
"react-native": "0.60.5",
"react-native-svg": "9.4.0",

Can somebody tell me the root cause for this error and how to resolve it?

[msand]

Can you give an example svg file you're having issues with?

[Yandamuri]

@msand please find the below code where I faced this issue

 <Svg  viewBox="0 0 32 32" {...props.style}>
         <Path
  	          clipRule="evenodd"
  		  d="M31.106 15H3.278l8.325-8.293a.999.999 0 10-1.414-1.414l-9.9 9.899a1.01 1.01 0 000 1.414l9.9 9.9a.999.999 0 101.414-1.414L3.278 17h27.828a1 1 0 000-2z"
  		 fill="#121313"
  		fillRule="evenodd"
         />
 </Svg>

please be notified that I am facing this error with multiple icons and each error indicated different character. This time it indicates 'For input string I'.

[msand]

Seems your arc commands are broken: https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

Command | Name | Parameters
-- | -- | -- | --
A(absolute)a (relative) | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

And you have
a.999.999 0 10-1.414-1.414
before the l (line command)

So either the path data was incorrect from the start, or svgo / svgr has optimized it incorrectly. Can you provide the original svg, not the converted one?

[msand]

That is, you have one too few parameters for the arc command to be parsed, and it finds an l instead of the last number.

[Yandamuri]

@msand seems I lost the original svg code of above mentioned. But i have the some other svg code which gives error too. But this code showing error with letter 'h',

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 31.494 31.494" style="enable-background:new 0 0 31.494 31.494;" xml:space="preserve">
<path style="fill:#1E201D;" d="M10.273,5.009c0.444-0.444,1.143-0.444,1.587,0c0.429,0.429,0.429,1.143,0,1.571l-8.047,8.047h26.554
c0.619,0,1.127,0.492,1.127,1.111c0,0.619-0.508,1.127-1.127,1.127H3.813l8.047,8.032c0.429,0.444,0.429,1.159,0,1.587
c-0.444,0.444-1.143,0.444-1.587,0l-9.952-9.952c-0.429-0.429-0.429-1.143,0-1.571L10.273,5.009z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

[SimenB]

SVGO added a new optimization in 1.3 that we've had to disable, see svg/svgo#1137 & svg/svgo#1138. Is this something RN SVG will support? In our case Android crashed completely and iOS displayed totally broken ones

It's a totally standard syntax from a 8-years old specification (and was introduced in a working draft a year before). If some software has a problems with it—those should be addressed to that software.

svg/svgo#1137 (comment).

---

Happy to open up a new issue if you want?

[msand]

What part of the grammar is referred to? At least what I can see, elliptical-arc-argument requires two nonnegative-numbers, one number, two flags and a coordinate-pair which consists of two numbers. Only comma-wsp? seems optional.

elliptical-arc:
    ( "A" | "a" ) wsp* elliptical-arc-argument-sequence
elliptical-arc-argument-sequence:
    elliptical-arc-argument
    | elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
elliptical-arc-argument:
    nonnegative-number comma-wsp? nonnegative-number comma-wsp? 
        number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
coordinate-pair:
    coordinate comma-wsp? coordinate
coordinate:
    number

[SimenB]

I don't know the spec at all, and SVGs are a mystery to me, sorry! 😬 Maybe ask over there?

The commit, if it helps at all: svg/svgo@258fecf

[msand]

So the issue is because of flags being a single digit without comma-wsp in between, and the regex matches decimal numbers.
https://github.com/react-native-community/react-native-svg/blob/f3bd3a28165fbd27cc01b661dbab7f59212e3e7a/ios/Utils/RNSVGPathParser.m#L34-L35
https://github.com/react-native-community/react-native-svg/blob/f3bd3a28165fbd27cc01b661dbab7f59212e3e7a/android/src/main/java/com/horcrux/svg/PropHelper.java#L231-L232

[msand]

Here's good inspiration if you're available to work on this: https://github.com/RazrFalcon/svgtypes/blob/master/src/path/parser.rs
Seems relatively straightforward to implement in both java and obj-c

[msand]

Can you try with 79956a9 ?

[msand]

Both iOS and Android seems to work fine in f121497

[Yandamuri]

@msand I have updated the package to recent version but still facing error. Do i need to clone the clone the recent commit?

[msand]

@Yandamuri Yes,
yarn add react-native-svg@react-native-community/react-native-svg#f121497
or
npm i react-native-svg@react-native-community/react-native-svg#f121497

[msand]

@Yandamuri any progress?

[SimenB]

I'm using Expo, so it's not really easy for me to test. However, I can give you a quick app that errors on android (with "error while updating property 'd' of a view managed by: RNSVGPath") and looks wrong on ios: https://snack.expo.io/@folio/27a1af

Rendering Broken breaks and Working works. Note that on the snack they both render correctly for web, but opening on device reproduces the error.

iOS screenshots:

broken

working

The diff between those two:

diff --git i/packages/folio-native-app/App.tsx w/packages/folio-native-app/App.tsx
index 54fa98d87..d41b583a2 100644
--- i/packages/folio-native-app/App.tsx
+++ w/packages/folio-native-app/App.tsx
@@ -36,26 +36,23 @@ const Barry1Avatar = () => (
         strokeMiterlimit={10}
       />
       <Path
-        d="M15.892 10.602l2.27 3.115A7.481 7.481 0 0 0 30.037 14l2.735-3.398c-1.271-.79-4.359-1.335-6.024.665l-2.462-5.485-2.838 5.485c-1.98-1.819-4.84-1.546-5.555-.665z"
+        d="M15.892 10.602l2.27 3.115A7.481 7.481 0 0030.037 14l2.735-3.398c-1.271-.79-4.359-1.335-6.024.665l-2.462-5.485-2.838 5.485c-1.98-1.819-4.84-1.546-5.555-.665z"
         fill="#79DBC1"
         stroke="currentColor"
         strokeWidth={1.5}
         strokeMiterlimit={10}
       />
       <Path
-        d="M17.61 17.705a.913.913 0 1 0 .001-1.826.913.913 0 0 0 0 1.826zM31.663 18.918a.913.913 0 1 0 0-1.827.913.913 0 0 0 0 1.826zM27.108 19.53a.913.913 0 1 0 0-1.825.913.913 0 0 0 0 1.826zM21.725 20.444a.913.913 0 1 0 0-1.826.913.913 0 0 0 0 1.826zM31.771 22.759a.913.913 0 1 0 0-1.827.913.913 0 0 0 0 1.827zM34.759 26.638a.913.913 0 1 0 0-1.826.913.913 0 0 0 0 1.826zM16.698 22.27a.913.913 0 1 0 0-1.826.913.913 0 0 0 0 1.826zM13.665 25.826a.913.913 0 1 0 0-1.826.913.913 0 0 0 0 1.826z"
+        d="M17.61 17.705a.913.913 0 10.001-1.826.913.913 0 000 1.826zM31.663 18.918a.913.913 0 100-1.827.913.913 0 000 1.826zM27.108 19.53a.913.913 0 100-1.825.913.913 0 000 1.826zM21.725 20.444a.913.913 0 100-1.826.913.913 0 000 1.826zM31.771 22.759a.913.913 0 100-1.827.913.913 0 000 1.827zM34.759 26.638a.913.913 0 100-1.826.913.913 0 000 1.826zM16.698 22.27a.913.913 0 100-1.826.913.913 0 000 1.826zM13.665 25.826a.913.913 0 100-1.826.913.913 0 000 1.826z"
         fill="#fff"
       />
       <Path
-        d="M28.786 29.52a1.637 1.637 0 1 0-3.274 0M22.488 29.588a1.637 1.637 0 1 0-3.274 0"
+        d="M28.786 29.52a1.637 1.637 0 10-3.274 0M22.488 29.588a1.637 1.637 0 10-3.274 0"
         stroke="currentColor"
         strokeWidth={1.5}
         strokeMiterlimit={10}
       />
-      <Path
-        d="M21.02 32.227a2.98 2.98 0 0 0 5.96 0h-5.96z"
-        fill="currentColor"
-      />
+      <Path d="M21.02 32.227a2.98 2.98 0 005.96 0h-5.96z" fill="currentColor" />
     </G>
     <Defs>
       <ClipPath id="Barry1Avatar__clip0">

Not the easiest to read, so:

[msand]

@SimenB Unless you've ejected from expo, you cannot upgrade react-native-svg. Testing in expo without rebuilding the native bundle with the changes doesn't provide any information.

[Yandamuri]

@msand I have tested with multiple icons where i was getting this error and it's working fine. BTW i tested only in android and i hope works in ios as well. When this commit would be merged?

[msand]

Well, the commit is in the develop branch, so it's already merged, just not in the master branch yet. The change is quite significant. I'm considering if a release candidate would be appropriate. Then again, people can just revert to the version before it if there are issues. Would just like to have a bit more testing of it before cutting a new release.

[Yandamuri]

@msand Any way feeling happy now to know the root cause and having the solution for it. Thank you so much for your prompt response and effort. May i know how days will it take to have this change in master?

Till then can I continue with this recent commit?

[SimenB]

@SimenB Unless you've ejected from expo, you cannot upgrade react-native-svg. Testing in expo without rebuilding the native bundle with the changes doesn't provide any information.

I know, it was more so you had a full example you could run on your own device(s) to validate. I'm unable to test myself

[msand]

@Yandamuri I just published v9.8.0 with the changes, and the commits are in master now.
@SimenB You can very easily create a new react-native project and test there: https://github.com/react-native-community/react-native-svg#troubleshooting

react-native init CleanProject
cd CleanProject/
yarn add react-native-svg
cd ios && pod install && cd ..

And then just add the svg components you want to test to App.js and you're done.

[draperunner]

For me, Android crashes with the "Error while updating property 'd' in shadow node of type RNSVGPath" error on react-native-svg v9.8.0 but not v9.7.1. This is the problematic part of one svg icon I use:

<G fill={color} stroke={color} strokeLinecap="round" strokeMiterlimit="10" strokeWidth="8">
    <Path d="M26.89 37.505l81.439-21.471M108.329 17.158l18.047 109.141M126.376 127.391L25.764 105.985M24.311 105.397l2.906-66.921" />
</G>

I'm using react-native v0.60.5.

[msand]

@draperunner Can you try with v9.8.1?

[draperunner]

Yes, that works! Thanks @msand ! :)

[Yandamuri]

@msand v9.8.1 is working fine ! :)