Path not rendering after upgrade to react-native-svg 9.8.0

Bug

Having today updated to 9.8.0, a SVG that has been rendering OK up until now is now not working.

I’ve narrowed it down to this part of the SVG. if I remove this, the remainder of the SVG renders OK:

<Path d="M469.61 246.97h-147.4l-39.5 97.88-35.15-99.8-35.17 99.8-39.25-97.88H25.26" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4" />

The ‘Red box’ error says: Exception thrown while executing UI block: -[__NSCFString characterAtIndex:] Range index out of bounds

The console output is:

2019-08-30 19:01:40.953 [error][tid:main][RCTUIManager.m:1133] Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #3: Error setting property 'd' of RNSVGPath with tag #3: Error setting property 'd' of RNSVGPath with tag #3: Error setting property 'd' of RNSVGPath with tag #3: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Error setting property 'd' of RNSVGPath with tag #13: Exception thrown while executing UI block: 'parentNode' is a required parameter

Environment info

React native info output:

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 106.09 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 25, 26, 27, 28
      Build Tools: 22.0.1, 23.0.1, 23.0.3, 24.0.0, 25.0.0, 26.0.2, 27.0.0, 27.0.3, 28.0.3
      System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: 11.2.2725575
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.9.0 => 16.9.0
    react-native: ^0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

Library version: 9.8.0

[msand]

Can you try v9.8.4?

[eahrold]

Yeah, it looks like there could be a condition where ‘[self skip_spaces]’ pushes the index out of range since ‘i’ Is mutated inside that call and may need a check after that method is run.

https://github.com/react-native-community/react-native-svg/blob/72ef550ebfbb1ee376c074099065d1fd35e3ab07/ios/Utils/RNSVGPathParser.m#L48-L51

https://github.com/react-native-community/react-native-svg/blob/72ef550ebfbb1ee376c074099065d1fd35e3ab07/android/src/main/java/com/horcrux/svg/PathParser.java#L40-L43