Fix react-native ref type

[alexandernanberg]

Summary

Fix the invalid forward ref type when using native, typescript and ref options

import Svg, { Path } from 'react-native-svg'
import type { SvgProps } from 'react-native-svg'
import { Ref, forwardRef } from 'react'
const Icon = (props: SvgProps, ref: Ref<SVGSVGElement>) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
	// ↓ TS complains about a mismatch between SVGSVGElement and Svg from `react-native-svg`
    ref={ref}
    {...props}
  >
    {/* ... */}
  </Svg>
)
const ForwardRef = forwardRef(SvgUserHeart)
export default ForwardRef

When using native the type must be Svg

import Svg, { Path } from 'react-native-svg'
import type { SvgProps } from 'react-native-svg'
import { Ref, forwardRef } from 'react'
-const Icon = (props: SvgProps, ref: Ref<SVGSVGElement>) => (
+const Icon = (props: SvgProps, ref: Ref<Svg>) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    ref={ref}
    {...props}
  >
    {/* ... */}
  </Svg>
)
const ForwardRef = forwardRef(SvgUserHeart)
export default ForwardRef

Test plan

Check updated snapshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svgr	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 1:30pm

[flo-sch]

This would fix #926

[AkshayVemul]

@alexandernanberg this is same issue which we are facing @gregberge would appreciate if you could look into this and merge this PR, looks good to me.

[Maksim-Kholodov]

Hi! When it will be merged? Really need this

[hinsxd]

For the time being, we are using this lazy fix in the config as a workaround

  template: (variables, { tpl }) => {
    variables.props = variables.props.map((p) => {
      if (p.name === "ref") {
        p.typeAnnotation.typeAnnotation.typeParameters.params[0].typeName.name =
          "Svg";
      }
      return p;
    });
    return tpl`
  ${variables.imports};
  
  ${variables.interfaces};
  
  const ${variables.componentName} = (${variables.props}) => (
    ${variables.jsx}
  );
  
  ${variables.exports};
  `;
  },