react-native-paper: Typescript Error with React native Paper Components.
TO REPRODUCE: `// tsconfig file
{ “compilerOptions”: { “allowJs”: true, “allowSyntheticDefaultImports”: true, “esModuleInterop”: true, “isolatedModules”: true, “jsx”: “react”, “lib”: [“es6”], “moduleResolution”: “node”, “noEmit”: true, “strict”: true, “target”: “esnext” }, “exclude”: [ “node_modules”, “babel.config.js”, “metro.config.js”, “jest.config.js” ] }`
SAMPLE CODE: =
const StoreFront: React.FC = () => { return ( <ScrollView horizontal={true}> <Card key="key1"> <Card.Cover source={{ uri: "https://image" }} /> <Card.Actions> <Button>Cancel</Button> </Card.Actions> </Card> ))} </ScrollView> ); }; export default StoreFront;
TYPESCRIPT ERROR: = note😦 following error present on <Card >, <Button>, etc components of react native paper.)
`(alias) const Card: (React.ComponentClass<Pick<Pick<ViewProps & React.RefAttributes<View> & {
children: React.ReactNode;
style?: StyleProp<ViewStyle>;
theme: Theme;
}, “style” | “children” | “ref” | “onLayout” | … 49 more … | “onTouchEndCapture”> & {
…;
} & {
…;
} & {
…;
}, “style” | … 55 more … | “elevation”> & {
…;
}, any> & hoistNonReactStatics.NonReactStatics<…>) | (React.FunctionComponent<…> & hoistNonReactStatics.NonReactStatics<…>)
import Card
Property ‘accessibilityStates’ is missing in type ‘{ children: Element[]; key: string; }’ but required in type ‘Pick<Pick<ViewProps & RefAttributes<View> & { children: ReactNode; style?: StyleProp<ViewStyle>; theme: Theme; }, “ref” | “style” | “removeClippedSubviews” | “hitSlop” | “onLayout” | … 48 more … | “accessibilityStates”> & { …; } & { …; } & { …; }, “ref” | … 55 more … | “elevation”>’.ts(2741) `
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 28 (1 by maintainers)
@Nicwalle I fixed it temporarily with exact version of types. (It’s not a fix, but an acceptable solution while the issue #2442 is being solved. I will want to keep libs updating)
package.json
The easy fix is to install the version 0.62.2 or 0.62.2+ of @types/react-native package (the errors are removed in this version, 4-5 days ago)
npm i @types/react-native@0.62.2 --save-devNote: previously i had 0.62.12 installed
having this issue when using @types/react-native@0.63.0, is there any solution for this other than using an older version of types? because this introduces other type errors for new react native APIs
Still getting the error with typescript
'Button' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<(Pick<Pick<ViewProps & RefAttributes<View>“react-native”: “0.68.2”, “react-native-paper”: “^4.12.1”, “@types/react-native”: “~0.66.13”,For react-native-paper TextInput, adding the missing autoComplete property ‘autoComplete={false}’ get’s rid of the error.
Noticing the same issue, specifically on
Textcomponent from RNP. Tried pinning my@types/react-nativepackage to match the react native version, but without success.Still having this error with components Card, Card.Title, Card.Cover, Button, ActivityIndicator, FAB
Typescript Error
Is there a way how to ignore/suppress it in the meantime?
still hitting above issue - will this be updated to work in latest versions of RN Types
“react-native-paper”: “4.6.0” - Same problem (“@types/react-native”: “0.63.45”)
@praveen-adroitminds Have you tried this
https://github.com/callstack/react-native-paper/issues/2965#issuecomment-1120449109 ?
This combination works for me!
For npm
Hi! I think I found a temporary solution to this issue. I just looked into react-native-paper’s
package.jsonin my node_modules. And I found out that they have"@types/react-native": "^0.66.1",in the devDependencies.Trying to match that version in my project, it resolved the issue. Although now I have mismatching versions for react-native and @types/react-native, and I don’t know the consequences of this solution.
Maybe React Native Paper team should move
@types/react-nativeto peerDependencies so that this issue won’t reoccur in the future?I am also running into this issue now - have there been any updates?
The fact that this became a thing is driving me nuts:
"@types/react-native": "0.63.49","react-native-paper": "4.7.1",None the suggested solutions are working either. I’m not going to pin a lower
@types/react-nativeversion just for this lib, and solutions to alter source code, well…it worked, Thank you
I’m also having the same issue in my project.
I’m using “@types/react-native”: “^0.64.0”.
@stasgm did u try my solution : https://github.com/callstack/react-native-paper/issues/2482#issuecomment-762276065
If you use functional components my solution should work
@mirezko Thanks, that worked for now!