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