Typescript Bug: Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<LinearGradientProps, any, any>> & Readonly<...>'

Generated icon from SVGR and LinearGradient after update to 12.3.0 cant have children.

<Svg fill="none" viewBox="0 0 27 27" {...props}> <Path d="M13.482 27C6.04 27 0 20.924 0 13.482 0 6.04 6.04 0 13.482 0c7.442 0 13.482 6.04 13.482 13.482 0 7.442-6.04 13.518-13.482 13.518zm0-24.483c-6.04 0-10.965 4.925-10.965 10.965s4.925 10.965 10.965 10.965 10.965-4.925 10.965-10.965c.036-6.04-4.89-10.965-10.965-10.965z" fill="url(#prefix__paint0_linear)" /> <Path d="M14.74 11.181h-2.516v9.995h2.516V11.18z" fill="url(#prefix__paint1_linear)" /> <Path d="M14.74 6.543h-2.516v2.733h2.516V6.543z" fill="url(#prefix__paint2_linear)" /> <Defs> <LinearGradient id="prefix__paint0_linear" x1={23.5} y1={3} x2={2.5} y2={25.5} gradientUnits="userSpaceOnUse"> <Stop stopColor={darker} /> <Stop offset={1} stopColor={lighter} /> </LinearGradient> <LinearGradient id="prefix__paint1_linear" x1={26} y1={5} x2={3} y2={23} gradientUnits="userSpaceOnUse"> <Stop stopColor={darker} /> <Stop offset={1} stopColor={lighter} /> </LinearGradient> <LinearGradient id="prefix__paint2_linear" x1={24} y1={3} x2={-1.5} y2={18} gradientUnits="userSpaceOnUse"> <Stop stopColor={darker} /> <Stop offset={1} stopColor={lighter} /> </LinearGradient> </Defs> </Svg>

[justinbhopper]

Looks like #1806 addresses this bug.

[skam22]

you can fix this by first installing patch-package .

in VSCode, command click <LinearGradient> to pull up the definition file located at project/node_modules/react-native-svg/src/index.d.ts.

edit LinearGradientProps to add in the missing children prop like this:

export interface LinearGradientProps {
  x1?: NumberProp;
  x2?: NumberProp;
  y1?: NumberProp;
  y2?: NumberProp;
  gradientUnits?: Units;
  gradientTransform?: ColumnMajorTransformMatrix | string;
  id?: string;
  children?: React.ReactNode;  // <--- ADD THIS LINE
}

then save your patch:

yarn patch-package react-native-svg

the error will be resolved. since you’ll have to do this frequently (as a number of packages are showing this typescript error after implicit children was removed) I suggest you use patch-package so that your modifications to the node_modules are automatically reapplied after every package install.