Native react-native-svg doesn't work

[HellYeahOmg]

Using an expo-router starter pack.
So I followed the instructions: https://solito.dev/recipes/icons
Created a react component:

const SvgComponent = (props: SVGProps<any>) => (
  <svg
    width="33"
    height="33"
    viewBox="0 0 33 33"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <circle cx="16.5" cy="16.5" r="16" stroke="white" />
    <path
      d="M8.75 21.5827H25.25M8.75 16.9993H25.25M8.75 12.416H25.25"
      stroke="white"
      strokeWidth="1.83333"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
)

export default SvgComponent

Installed react-native svg both into /packages/app and /apps/expo.

It works fine in my next app (I added the package in transpilePackages), but ios native app gives me a bunch of errors, basically for each element inside the svg tag:

Native code in _layout.tsx:

import Burger from 'app/shared/images/burger'

<Provider>
      <Stack
        screenOptions={{
          header: () => (
            <SafeAreaView>
              <Burger />
            </SafeAreaView>
          ),
        }}
      />
</Provider>

What did i do wrong?

[nandorojo]

Your SVG component is using HTML elements instead of importing them from RNSVG. If you’re using SVGr, be sure to enable the react native flag.

[HellYeahOmg]

@nandorojo you mean this instruction?
https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#use-with-svg-files
I just don't see any 'react native flags'

[nandorojo]

Notice how they're importing the components and using those. The option is there if you're using SVGR codegen. You need to convert your SVGs to react native components.

https://react-svgr.com/