ReactNative 作ったコンポーネントの中に使用側でコンポーネントを追加したい

Question

お世話になっております。
大変初歩的な質問になってしまうかもしれませんが、タイトルにもある通り作ったコンポーネントの中にコンポーネントを追加する事ができず困ってます。

export function ContentArea(): JSX.Element {
  return <View flex={1} marginTop={53}></View>;
}

このように空のViewを返すコンポーネントを作成し、

 <ContentArea>
   <Text>Test</Text>
 </ContentArea>

使用側で中にコンポーネントを追加しようとしているのですが

型 '{ children: Element; }' には型 'IntrinsicAttributes' と共通のプロパティがありません。

というエラーが出てきてしまい中にコンポーネントを追加する事が出来ず困っています。
どなたか解決方法ご存じの方いたら助言頂きたいです。

Answer 1

下記のようにしてみてはどうでしょうか。

export function ContentArea(props: React.PropsWithChildren<{}>): JSX.Element {
  return <View flex={1} marginTop={53}>{props.children}</View>;
}

Comments

[xxxtentacion]

ありがとうございます！これで解決できました。
自分の環境だと{}の部分がDon't use `{}` as a type. `{}` actually means "any non-nullish value".
と怒られているんですが動作自体は問題なく動きました。