[Android] SvgFromUri doesn't work RN 0.74, New Arch + bridgelessMode ON. Jest tests failed. Patch is provided

[artur-burlak]

Bug

On Android, on RN 0.74, New Arch + bridgelessMode ON SvgFromUri component is throwing an error. Doesn't appear on bridgelessMode OFF. Working fine tests before are also throwing this error.
Not sure about iOS, since we have bridgelessMode OFF there.

Honestly, no idea why this was not throwed before on bridlgessMode OFF, but we have what we have.

Patch provided below. Also can make a PR if SM team find it useful.

React native info output:

 System:
  OS: macOS 14.4.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 42.63 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.6.2
    path: /var/folders/yz/h1d31z7j5wxg9f09k74bdyy40000gn/T/yarn--1716742488334-0.8130990812854431/node
  Yarn:
    version: 1.22.21
    path: /var/folders/yz/h1d31z7j5wxg9f09k74bdyy40000gn/T/yarn--1716742488334-0.8130990812854431/yarn
  npm:
    version: 10.2.4
    path: /opt/homebrew/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/user/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/user/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.73.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: false

Library version:15.1.0

Steps To Reproduce

<SvgFromUri
       height={16}
       uri='https://www.svgrepo.com/show/532030/circle-heat.svg'
       width={16}
     />

Short, Self Contained, Correct (Compilable), Example

The error appears in file src/xml.tsx, which is throwing error that children.push cannot be executed. Initially children is null which is quite strange, that later we want to use method push on it. TS clearly mark this error.
I made a patch of the lib, to prevent a crash assigning children to be an empty array initially.
However JEST tests are also failed, since same code is also appeared in lib/commonjs/xml.js and lib/module/xml.js.

Here is the patch below

--- a/node_modules/react-native-svg/lib/commonjs/xml.js
+++ b/node_modules/react-native-svg/lib/commonjs/xml.js
@@ -299,7 +299,7 @@ function parse(source, middleware) {
   const length = source.length;
   let currentElement = null;
   let state = metadata;
-  let children = null;
+  let children = [];
   let root;
   const stack = [];
   function error(message) {
diff 
--- a/node_modules/react-native-svg/lib/module/xml.js
+++ b/node_modules/react-native-svg/lib/module/xml.js
@@ -278,7 +278,7 @@ export function parse(source, middleware) {
   const length = source.length;
   let currentElement = null;
   let state = metadata;
-  let children = null;
+  let children = [];
   let root;
   const stack = [];
   function error(message) {
diff 
--- a/node_modules/react-native-svg/src/xml.tsx
+++ b/node_modules/react-native-svg/src/xml.tsx
@@ -302,7 +302,7 @@ export function parse(source: string, middleware?: Middleware): JsxAST | null {
   const length = source.length;
   let currentElement: XmlAST | null = null;
   let state = metadata;
-  let children = null;
+  let children = [];
   let root: XmlAST | undefined;
   const stack: XmlAST[] = [];

[bohdanprog]

@AptypTheKing Hey, can you share your test case with the reproduction of that bug? We would appreciate that.
We checked that in New Arch and Old Arch but didn't get that error.

[artur-burlak]

@AptypTheKing Hey, can you share your test case with the reproduction of that bug? We would appreciate that.

We checked that in New Arch and Old Arch but didn't get that error.

Yes sure, I will provide it. It's very simple actually. Did you check it on bridglessMode ON? It's throwing this error only when it's on. It's ON by default in RN 0.74, but in previous versions it should be done manually.

[bohdanprog]

@AptypTheKing Hey, can you share your test case with the reproduction of that bug? We would appreciate that.
We checked that in New Arch and Old Arch but didn't get that error.

Yes sure, I will provide it. It's very simple actually. Did you check it on bridglessMode ON? It's throwing this error only when it's on. It's ON by default in RN 0.74, but in previous versions it should be done manually.

Yes, I tested that with bridglessMode ON, on Android and IOS platforms :)

[artur-burlak]

@bohdanprog

it('Snapshot source from link', () => {
  const component = renderComponent(
   <SvgFromUri
      height={16}
      uri='https://www.svgrepo.com/show/22031/home-icon-silhouette.svg'
      width={16},
/>
  )

  setTimeout(() => {
    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  }, 2000)
})

During jest test I have same error in console, which is on screenshot. But with my patch it's fixed.

[bohdanprog]

@AptypTheKing can you share how you mocked react-native-svg library, please
I want to reproduce the same steps as you :)

[artur-burlak]

@bohdanprog

I'm not mocking react-native-svg library, cause I'm testing if my custom Icon component is working as expected.

function Icon({ style, source, size = IconSizes.medium, testID }: Props): React.JSX.Element | null {
  if (!source) return null

  if (isURL(source)) {
    return (
      <SvgFromUri
        fill={style?.color}
        height={ICON[size].fontSize}
        testID={testID}
        uri={source}
        width={ICON[size].fontSize}
      />
    )
  }

  const FontelloIcon = createIconSetFromFontello(fontelloConfig)

  return (
    <FontelloIcon
      name={source}
      style={[style, ICON[size]]}
      testID={testID}
    />
  )
}

Everything is working fine on bridglessMode OFF, it's just crashing after I switch it on.

[bohdanprog]

After talking with @AptypTheKing, we found that the problem he encountered is related to the TypeScript configuration, not the library.