All react-native-paper components throw type error regarding Accessibility API

1.6k Views Asked by At

In my react app using react-native-paper with typescript all the paper components throw the type Error;

type 'The props used' is missing the following properties from type 'Pick<Component Related Props & { style?: StyleProp; theme: Theme; } & RefAttributes<{}>, "ref" | "onLayout" | "style" | "testID" | ... 32 more ... | "key">': accessibilityComponentType, accessibilityTraits

for instance, if I use the Text component of react-native-paper like

<Text>something</Text>

the error is : Type '{ children: string; }' is missing the following properties from type 'Pick<TextProps & { style?: StyleProp<TextStyle>; theme: Theme; } & RefAttributes<{}>, "ref" | "onLayout" | "style" | "testID" | ... 32 more ... | "key">': accessibilityComponentType, accessibilityTraits

Using <Text accessibilityComponentType accessibilityTraits> something </Text>

removes the error and it is the situation for almost all components.

env:

    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-paper": "^4.7.1",
    "react-native-vector-icons": "^8.0.0",
    "@types/react-native": "^0.63.2",
1

There are 1 best solutions below

0
On

This seems to be an issue with @types/react-native or react-native-paper, there are open issues for this problem on react-native-paper issues, this hasn't been fixed however there is a temporary workaround. Installing this exact version of @types/react-native fixes the problem.

npm i @types/[email protected]

https://github.com/callstack/react-native-paper/issues/1971