fix: parsing < inside comments (#2277)

# Summary

When comment occurred before first tag, there was a possible parsing
error if it contains `<` character.
Here is an example (line 2 and 3 would cause separate errors):

```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" />
</svg>
```

Fixes #2276

## Test Plan

Manual tests in `TestsExample` app. (Test2276)

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 />;

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>
+  );
+};

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++;
     }