How to pass a children in a LinearGradient?

Question

That's my code, basically I'm studying React Native and got an error while trying to pass children inside of LinearGradient.

import React, { ReactNode } from "react";
import { LinearGradient } from "expo-linear-gradient"

import { styles } from "./styles"
import { theme } from "../../global/styles/theme"

type Props = {
  children: ReactNode
}

export function Background({ children }: Props) {
  const {secondary80, secondary100} = theme.colors;

  return (
    <LinearGradient
      style={styles.container}
      colors={[secondary80, secondary100]}
    >
     {children}
    </LinearGradient>
  )
}

The full error is:

(parameter) children: React.ReactNode<br>
No overload matches this call.
  Overload 1 of 2, '(props: LinearGradientProps | Readonly<LinearGradientProps>): LinearGradient', gave the following error.<br>
    Type 'ReactNode' is not assignable to type '((boolean | ReactChild | ReactFragment | ReactPortal) & (boolean | ReactChild | ReactFragment | ReactPortal)) | null | undefined'.<br>
      Type '{}' is not assignable to type '((boolean | ReactChild | ReactFragment | ReactPortal) & (boolean | ReactChild | ReactFragment | ReactPortal)) | null | undefined'.<br>
  Overload 2 of 2, '(props: LinearGradientProps, context: any): LinearGradient', gave the following error.<br>
    Type 'ReactNode' is not assignable to type '((boolean | ReactChild | ReactFragment | ReactPortal) & (boolean | ReactChild | ReactFragment | ReactPortal)) | null | undefined'.ts(2769)<br>
index.d.ts(2320, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<LinearGradient> & Readonly<LinearGradientProps> & Readonly<...>'<br>
index.d.ts(2320, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<LinearGradient> & Readonly<LinearGradientProps> & Readonly<...>'

Answer 1

For props to LinearGradient

<LinearGradient
 style={styles.container}
 colors={[secondary80, secondary100]}
 children={children}>

</LinearGradient>

For component as child

<LinearGradient
 style={styles.container}
 colors={[secondary80, secondary100]}>
  <children />
</LinearGradient>