Typescriptのオーバーロードのエラー

Question

Typescriptのオーバーロードについて質問させていただきます。

知りたいこと

スマホアプリを作ろうと思っていて、React Native PaperというUIコンポーネントを使用しようとしています。
React Native Paperのコンポーネントをimportして使用するとオーバーロードはありませんというエラーが起きるので解消法を知りたいです。

この呼び出しに一致するオーバーロードはありません。
  2 中 1 のオーバーロード, '(props: Pick<Props, "key" | "ref" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 48 more ... | "elevation"> & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null' により、次のエラーが発生しました。
    型 '{ children: Element; }' には 型 'Pick<Props, "key" | "ref" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 48 more ... | "elevation">' からの次のプロパティがありません: accessibilityComponentType, accessibilityTraits
  2 中 2 のオーバーロード, '(props: PropsWithChildren<Pick<Props, "key" | "ref" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 48 more ... | "elevation"> & { ...; }>, context?: any): ReactElement<...> | ... 1 more ... | null' により、次のエラーが発生しました。
    型 '{ children: Element; }' には 型 'Pick<Props, "key" | "ref" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 48 more ... | "elevation">' からの次のプロパティがありません: accessibilityComponentType, accessibilityTraits

オーバーロード typescriptで調べると、

以下のような関数を使う際のオーバーロードのみあり、コンポーネントのオーバーロードの解消方法がわからず、教えていただきたいです。
https://qiita.com/souhei-etou/items/710ef30ee748f7d18a49

やってみたこと

1,@types/react-natiive-paperを探してみましたが、存在しませんでした。

エラーが起きるコードは以下になります。

import * as React from 'react';
import { Card, Title, Paragraph } from 'react-native-paper';

const MyComponent = () => (
  <Card>
    <Card.Content>
      <Title>Card title</Title>
      <Paragraph>Card content</Paragraph>
    </Card.Content>
  </Card>
);

export default MyComponent;

上記のCardの部分でエラーが起きます。

https://github.com/cawauchi6204/kimete/blob/overload-error/src/components/screens/ExampleScreen.tsx

こちらはReact Native Paperの使用方法にある通りに使用しています。
https://callstack.github.io/react-native-paper/card-content.html

Answer 1

プロジェクトで使用されている@types/react-nativeのバージョンには、accessibilityComponentType/accessibilityTraitsというプロパティが含まれていない、というエラーですね。

次のように、package.jsonで指定しているバージョンをダウングレードすると解消するかと思います:

-    "@types/react-native": "~0.63.2",
+    "@types/react-native": "0.63.40",

参考:
[react-native]remove deprecated props (accessibilityTraits, accessibilityComponentType) #49983