App crash when rendering SVG #1740
Comments
|
Updated minimal reproducible SVG. <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> |
|
Turns out that the crash happens due to an index out of bounds exception.
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 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;
} |
|
Some additional comments on the And that the |
|
Any comments on this? @WoLewicki Is there something I can do? |
|
Any traction on this? We're seeing this issue as well |
|
same here when trying to render animated svg |
|
any news? |
|
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 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. UPDATETurns 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. Feel free to ask any questions. if any !!! |
|
Same problem here, which used app in Expo Go render SVGs smooth, but in development build or APK the app crash. |
|
Hello @mthonorio, |
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"andfill="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
Environment info
Run
react-native infoin your terminal and copy the results here. Also, include the precise version number of this library that you are using in the projectReact 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 FoundLibrary 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 :)
The text was updated successfully, but these errors were encountered: