question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript Error with React native Paper Components.

See original GitHub issue

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) `

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:28 (1 by maintainers)

github_iconTop GitHub Comments

42reactions
mirezkocommented, Dec 30, 2020

@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)

  1. set devDependencies as such
  2. run npm install to update

package.json

...
  "devDependencies": {
    "@types/react-native": "0.63.40",
...
19reactions
protechecommented, Jun 5, 2020

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-dev

Note: previously i had 0.62.12 installed

Read more comments on GitHub >

github_iconTop Results From Across the Web

All react-native-paper components throw type error regarding ...
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 ...
Read more >
TypeScript error on <Text> for native paper-React Native
Coding example for the question TypeScript error on for native paper-React Native.
Read more >
props of "react-native-paper" are not completed/resolved
React Native: props of "react-native-paper" are not completed/resolved ... As they say: They are generated by typescript compiler. Nothing unusual about them.
Read more >
Theming · React Native Paper
To support custom themes, paper exports a Provider component. ... By default React Native Paper will apply the Material You theme (MD3) if...
Read more >
Resolving React Native Paper 'No overload matches this call ...
TypeScript error shown printed to the terminal. The error text is duplicated in the code. The contents of the error is printed below:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found