expo initした時に"Component cannot be used as a JSX component" エラーが出る件について

TL;DR

新しくexpo initしてreact-nativeアプリを作ろうと思ったが，"Component cannot be used as a JSX component"が出ている人向けの応急処置記事です．結論から言うと，react-nativeライブラリがreact 18系の型パッケージを参照していることが原因です．

問題と解決方法

さっそく,tabs (TypeScript)のtemplateを選択してexpo initをしてみると~/navigation/index.tsxで以下のようなエラーが発生します．

該当コードのエラー

該当コードのエラー文
他にもexpo-iconsをつかっていても同様にJSXコンポーネントとして使えないよ！！っと怒られてしまいます．
これは，何が原因かと言うと，dependenciesにはreact 17系のパッケージが入っているにもかかわらず，react-nativeがreact18系の型のパッケージを読み込んでいるからです．

yarn.lockファイル内，react 18系が読み込まれている

この問題を解決するために，package.json内でresolutionsをつかってreact-nativeが参照するパッケージを決定します．具体的には以下のようにします．

yarnの場合

"resolutions":{
    "@types/react": "17.0.39"
  },

npmの場合

  "overrides":{
    "@types/react": "$@types/react"
  },

これで無事，react-nativerもreact 17系のパッケージを参照してくれます．

おわりに

今回書いた手法はあくまでも応急処置なので，Expoが本格的にreact 18に対応した場合，resolutionsは使わずに通常通りパッケージ運用を行ってください．

また，expo sdk 45のbeta版がつい4日前(2022/05/02現在)リリースされたばかりなのですが，恐らくそちらではreact 18の対応をしているんじゃ無いんでしょうか．長い文章を最後まで読んでいただきありがとうございました．役にたった方はいいねしていただけると幸いです．thank you!