App crash when rendering SVG

[antondalgren]

Bug

Rendering the following SVG causes app to crash, it is reproducible by rendering it in a clean project with the latest versions.

It is throwing errors on style="transform:translate3d", style="transform:translate" and fill="859e9d" that is missing a # to indicate that the value is hex. I have not managed to understand what causes the app crash, but I think it might be related to text animation.

SVG

```xml ```

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

 System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 586.08 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/lib/ruby/gems/3.0.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.0 => 0.68.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.3.0 / 12.1.0

Steps To Reproduce

Try to render the SVG provided.

Describe what you expected to happen: The SVG to render properly :)

[antondalgren]

Updated minimal reproducible SVG. The crash only occurs in iOS simulator.

<svg width="290" height="500" viewBox="0 0 290 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
  <path id="text-path-a" d="M40 12 H250 A28 28 0 0 1 278 40 V460 A28 28 0 0 1 250 488 H40 A28 28 0 0 1 12 460 V40 A28 28 0 0 1 40 12 z" />
</defs>
<text>
  <textPath startOffset="1%" xlink:href="#text-path-a">
    ahshjkdasjklsadjkldasjkldsajklkljsdakjlcsakljdjklaskljdjsakldjaksl
  </textPath>
  <textPath startOffset="1%" xlink:href="#text-path-a">
    ahshjkdasjklsadjkldasjkldsajklkljsdakjlcsakljdjklaskljdjsakldjaksl
  </textPath>
  <textPath startOffset="1%" xlink:href="#text-path-a">
    ahshjkdasjklsadjkldasjkldsajklkljsdakjlcsakljdjklaskljdjsakldjaksl
  </textPath>
  <textPath startOffset="1%" xlink:href="#text-path-a">
    ahshjkdasjklsadjkldasjkldsajklkljsdakjlcsakljdjklaskljdjsakldjaksl
  </textPath>
</text>
</svg>

[antondalgren]

Turns out that the crash happens due to an index out of bounds exception.

Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndexedSubscript:]: index 69 beyond bounds [0 .. 68]'

The error originates from this part of the code: https://github.com/react-native-svg/react-native-svg/blob/54e40251a491bb1a2d0a75e4748a23ea24fb3f6b/apple/Utils/RNSVGPathMeasure.m#L193-L211

If we have an array_lengths of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] giving _linecount a value of 18, and we end up in the else statement of the ternary. When the item we are trying to insert in the array is 20, using the binary search insertion index option, we will get an index of 19, which is where we should place 20.

Later, at line 210, we try to extract the the value from an item at index 19, but our array, lengths is only 18 items long giving us an index out of bounds exception.

I'm not very familiar with objective C, but do you think adding this between line 208 and 210 could be the solution to this?

if(i >= _lineCount) {
    i = _lineCount - 1;
}

[antondalgren]

Some additional comments on the transform:translate and transform:translate3d issues is that it looks like it doesn't have support for the translate3d property at all ([SyntaxError: Expected "(" or [ \t\r\n] but "3" found.]).

And that the translate directive does not support being used with pixel values. eg: transform:translate(226px, 433px) gives the error [SyntaxError: Expected ")", ",", [ \t\r\n], [0-9], or [eE] but "p" found.]

[antondalgren]

Any comments on this? @WoLewicki Is there something I can do?

[steven-isbell]

Any traction on this? We're seeing this issue as well

[Moatezz]

same here when trying to render animated svg

[see2ever]

any news?

[devnshankar]

Similar issue but in my case I was trying to use the tamagui ui component library's lucide icons, which maybe at the core is a svg, i wasn using it with the YGroup and listItem component to display a group of items each of which is a button which an icon at the left and the right and text in between of the item area,

I almost finished my app and used eas build for the apk , everything was working fine but the pages which had used those lucide icons when clicked upon or rendered, immidiately crashed.

I tried to use the logcat and read the logs of the application and found nothing. But then when i read the logs of gradlew at the expo site there were many warnings about various things but this one particular warning caught my eye regarding the svg and on an article also I noticed someone else with the same issue and installing this react-native-svg package and running

npx expo-doctor

to check the required version and reinstalling the required one if needed, solved their issue. Well i have not tried it yet I just found out this issue that was similar so thought i'd contribute something to it.

I'll update if i find any solutions.

---

UPDATE

Turns out my issue is now resolved as i said before it was the svg issue and i finally got down to it , I installed the mentioned react native svg module and for better I stopped using the svg in the first place as icons i'm using the inbuilt icons of react native vector icons and they work fine, in the begining i also thought that it might be a loading or rendering issue which is breaking the app and crashing the apk when installed on device but it was the SVG issue. I hope the team finds out why this issue is occuring in the first place. I'm not sure what worked for me the svg module or me not using svg. I guess that's for another day and another sleepless night scratching my head untill i go bald on a issue like this.

Feel free to ask any questions. if any !!!