Repository: software-mansion/react-native-svg (language: java)

Issue:
Comments in SVG file results in "Text strings must be rendered within a <Text> component."
# Bug

When loading a remote SVG file, if the SVG file starts off with a commented-out section, `react-native-svg` seems to have issues parsing it and ultimately can end up erroring.

```
<!--<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!--<path fill-rule="evenodd" clip-rule="evenodd" d="M3 17C3 24.732 9.26801 31 17 31C24.732 31 31 24.732 31 17C31 9.26801 24.732 3 17 3C9.26801 3 3 9.26801 3 17ZM17 1C8.16344 1 1 8.16344 1 17C1 25.8366 8.16344 33 17 33C25.8366 33 33 25.8366 33 17C33 8.16344 25.8366 1 17 1Z" fill="black" stroke="black"/>-->
<!--<path d="M5.29336 13.5448L5.19981 13.8649H5.53333H13.4793C11.7332 17.0595 9.12425 20.1246 6.21457 22.2706L6.04376 22.3966L6.14034 22.5855C6.68339 23.6482 7.37649 24.6206 8.19152 25.4747L8.34862 25.6393L8.52725 25.4983C10.9824 23.5609 13.1947 21.0217 15.0105 18.1666V28.8738V29.0898L15.2242 29.1211C15.804 29.206 16.397 29.25 17 29.25C17.5731 29.25 18.1372 29.2103 18.6895 29.1334L18.905 29.1034V28.8858V18.1528C20.7701 21.027 23.033 23.4924 25.5078 25.4601L25.6873 25.6029L25.845 25.4362C26.6626 24.5721 27.356 23.5881 27.8963 22.5132L27.9923 22.3222L27.8186 22.1977C24.8577 20.0764 22.1416 17.0156 20.3358 13.8649H28.4667H28.8002L28.7066 13.5448C28.3713 12.3973 27.8733 11.3199 27.2395 10.3393L27.1657 10.225H27.0296H18.905V5.11418V4.89656L18.6895 4.86657C18.1372 4.78971 17.5731 4.75 17 4.75C16.397 4.75 15.804 4.79396 15.2242 4.87889L15.0105 4.9102V5.12625V10.225H6.97041H6.83432L6.76045 10.3393C6.12664 11.3199 5.62866 12.3973 5.29336 13.5448Z" fill="black" stroke="black" stroke-width="0.5"/>-->
<!--</svg>-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text y=".9em" font-size="90">
        🏊
    </text>
</svg>
```

I was not able to dig too far into the errors and logs, but I noticed that the `children` property here reflects the commented-out portion of the SVG file and likely causes the issue:

```
 { tag: 'svg',
  props: 
   { width: 34,
     height: 34,
     viewBox: '0 0 34 34',
     fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg' },
  children: 
   [ '-->\n',
     { '$$typeof': {},
       type: 
        { [Function: Svg]
          displayName: 'Svg',
          defaultProps: { preserveAspectRatio: 'xMidYMid meet' } },
       key: '1',
       ref: null,
       ...
```

If it's still an issue with the latest versions,
please make an sscce in the clean project,
and make it available as a git repo on github.
Or as a https://snack.expo.io/ if expo has the latest version,
and / or the bug exists both in the latest version and the one used in expo and snack.

## 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:

`react-native-svg` version `15.2.0`

```
System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 604.08 MB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.15.2 - /Users/kylan/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
    Android SDK:
      API Levels: 26, 28, 29, 30, 31, 33, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.2
      System Images: android-VanillaIceCream | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9619390
    Xcode: 15.4/15F31d - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_361 - /Library/Java/JavaVirtualMachines/jdk1.8.0_361.jdk/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.15 => 0.71.15 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
```

Library version: x.x.x

## Steps To Reproduce

Insert a `uri` that points to an SVG file that starts off with commented-out XML code. App will error when attempting to display the SVG.

Example SVG file URI: https://www.teloscrew.com/wp-content/uploads/2024/05/favicon-poolside.svg

Describe what you expected to happen:

1. I expect it to ignore the commented out portion of the file and load correctly

## Short, Self Contained, Correct (Compilable), Example


Loads fine with SVG that doesn't have the commented out XML:
https://www.teloscrew.com/wp-content/uploads/2024/05/favicon-poolside-clean.svg



Discussion / hints:

Fix patch:
diff --git a/TestsExample/App.js b/TestsExample/App.js
index 17bdd1266..76dd54361 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -13,6 +13,7 @@ import Test2089 from './src/Test2089';
 import Test2196 from './src/Test2196';
 import Test2266 from './src/Test2266';
 import Test1986 from './src/Test1986';
+import Test2276 from './src/Test2276';
 
 export default function App() {
   return <ColorTest />;
diff --git a/TestsExample/src/Test2276.tsx b/TestsExample/src/Test2276.tsx
new file mode 100644
index 000000000..7aebea3e9
--- /dev/null
+++ b/TestsExample/src/Test2276.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {View} from 'react-native';
+import {SvgXml} from 'react-native-svg';
+
+const xml = `<!-- sample rectangle -->
+<!-- <sample rectangle -->
+<!-- <sample> rectangle -->
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" x="50" y="50" fill="red" />
+  <text fill="black" x="100" y="100">test</text>
+</svg>
+`;
+
+export default () => {
+  return (
+    <View style={{marginTop: 100}}>
+      <SvgXml xml={xml} />
+    </View>
+  );
+};
diff --git a/src/xml.tsx b/src/xml.tsx
index b449abc2d..34fad4714 100644
--- a/src/xml.tsx
+++ b/src/xml.tsx
@@ -292,6 +292,7 @@ function locate(source: string, i: number) {
 }
 
 const validNameCharacters = /[a-zA-Z0-9:_-]/;
+const commentStart = /<!--/;
 const whitespace = /[\s\t\r\n]/;
 const quotemarks = /['"]/;
 
@@ -315,7 +316,11 @@ export function parse(source: string, middleware?: Middleware): JsxAST | null {
   function metadata() {
     while (
       i + 1 < length &&
-      (source[i] !== '<' || !validNameCharacters.test(source[i + 1]))
+      (source[i] !== '<' ||
+        !(
+          validNameCharacters.test(source[i + 1]) ||
+          commentStart.test(source.slice(i, i + 4))
+        ))
     ) {
       i++;
     }


Test patch: