React-native-paper: Typescript error: No overload matches this call.

[rahadkc]

I just init a expo typescript project. Then add 'react-native-paper' in my project.
When try to use Button component it gives me this typescript error.
Do you have any idea why getting error?

Error

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Props, "ref" | "style" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 57 more ... | "contentStyle"> & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; mode: "outlined"; onPress: () => void; }' is missing the following properties from type

Code -

<PaperProvider>
  <View >
      <Button mode="outlined" onPress={() => {}}>
         press me
      </Button>
   </View>
</PaperProvider>

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-paper": "^4.5.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[rahadkc]

Hi, according to 'react-native-paper' documentation

If you're on a vanilla React Native project, you also need to install and link react-native-vector-icons.
If you use Expo, you don't need to install vector icons.

Since the project created by expo init it uses Expo SDK 40. Which include

• react-native: 0.63

[rahadkc]

Hi got the solution. When initializing project using expo init it automatically added types for react-native project version

• @types/[email protected]

After upgrading the react-native type version to

• @types/[email protected]

It is working fine.

[byCedric]

For more context, see the linked issue:

... this looks like an issue with either @types/react-native or react-native-paper. Right now, the templates require ~0.63.2, which includes version 0.63.40. The issue here is that the types starting from ~0.63.41 contains changes, made somewhere between 14 and 16 December (looking at NPM version timestamps), that breaks the button component. ...

Hope this helps!

[EthanStandel]

This issue is back for me with the most recent version of @types/react-native (@0.63.45 for @latest at time of writing this)

[oussamabouchareb]

this issue is also present for me with many attempts over the last few days trying to figure out which @types/react-native version is causing this leading to nowhere

creating a new TS project with expo init and following RN paper instructions for installing the library should recreate the issue.

[lorstenoplo]

I just got into their .d.ts file and changed ( actually removed most of it ) to React.FC<Props>.
If you use functional components to write code then you may like to follow my code.

I guess they should update their type definitions

[oussamabouchareb]

I looked a little bit into the code from this library and I think the outdated accessibility props are what's causing it but I'm not 100% sure, it seems that they might need to update the props on some components that have these accessibility props.

[EnzoH8321]

Issue is back for me as well. Currently on @types/react-native 0.63.46.

[leoafarias]

Yes, same here. This seems very annoying due to our tooling failing

[ImAbhishekTomar]

same for me...

<Button
              mode="outlined"
              onPress={() => {
                setCounter(counter + 1);
                observableAppStore.setTracker(counter);
              }}>
              Press me
            </Button>

ERROR
No overload matches this call.
Overload 1 of 2, '(props: Pick & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
Type '{ children: string; mode: "outlined"; onPress: () => void; }' is missing the following properties from type 'Pick': accessibilityComponentType, accessibilityTraits
Overload 2 of 2, '(props: PropsWithChildren & { ...; }>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
Type '{ children: string; mode: "outlined"; onPress: () => void; }' is missing the following pr

PACKEGE

"dependencies": {
"@babel/plugin-proposal-decorators": "^7.12.12",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"mobx": "^6.0.5",
"mobx-react": "^7.0.6",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-paper": "^4.7.1",
"react-native-vector-icons": "^8.0.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"@react-native-community/eslint-config": "^1.1.0",
"@types/color": "^3.0.1",
"@types/jest": "^25.2.3",
"@types/react-native": "^0.63.46",
"@types/react-test-renderer": "^16.9.2",
"babel-jest": "^25.1.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.13.1",
"typescript": "^3.8.3"
},

[sergeymild]

the same for me, on every react-native-paper components i have got that errors

[chybisov]

I have this error on Button component also. Could somebody look on this please? @satya164 @Trancever

[leoafarias]

It seems this PR once closed will fix problem #2522

[EnzoH8321]

It seems this PR once closed will fix problem #2522

Currently on "@types/react-native": "0.63.47" and the issue still persists.

[saurabhnemade]

It seems this PR once closed will fix problem #2522

Currently on "@types/react-native": "0.63.47" and the issue still persists.

Working configuration right now:

    "react-native": "~0.63.4",
    "react-native-paper": "^4.7.1",
    "@types/react-native": "^0.62.0",

There is one easy way to know what should be these versions.

Just pick version of @types/react-native from https://github.com/callstack/react-native-paper/blob/main/package.json

[codeSantiago]

It seems this PR once closed will fix problem #2522

Currently on "@types/react-native": "0.63.47" and the issue still persists.

Working configuration right now:

    "react-native": "~0.63.4",
    "react-native-paper": "^4.7.1",
    "@types/react-native": "^0.62.0",

There is one easy way to know what should be these versions.

Just pick version of @types/react-native from https://github.com/callstack/react-native-paper/blob/main/package.json

I tried version 0.62.0 of @types/react-native and it didn't work, i installed 0.63.0 and the errors disappeared

[saurabhnemade]

It seems this PR once closed will fix problem #2522

Currently on "@types/react-native": "0.63.47" and the issue still persists.

Working configuration right now:

    "react-native": "~0.63.4",
    "react-native-paper": "^4.7.1",
    "@types/react-native": "^0.62.0",

There is one easy way to know what should be these versions.
Just pick version of @types/react-native from https://github.com/callstack/react-native-paper/blob/main/package.json

I tried version 0.62.0 of @types/react-native and it didn't work, i installed 0.63.0 and the errors disappeared

Interesting. Do you recall if you have tried just 0.62.0 or ^0.62.0? Because ^0.62.0 should have bring the latest minor version as per https://michaelsoolee.com/npm-package-tilde-caret/ . Or it could be fetching 0.63.4 which is latest version.

[EnzoH8321]

I followed @codeSantiago 's tips and it worked. @types/react-native: 0.63.0 seems to have removed the issues for me.

[Alarid]

I was facing the same issue. I did:

npm i react-native@latest
npm i react-native-paper@latest
npm i --save-dev @types/react-native@latest

Worked like a charm !

[EthanStandel]

I was facing the same issue. I did:

npm i react-native@latest
npm i react-native-paper@latest
npm i --save-dev @types/react-native@latest

Worked like a charm !

If we can just @latest all the associated packages then I would think this can be closed.

[AhmadHamze]

I did:
npm i react-native@latest npm i react-native-paper@latest npm i --save-dev @types/react-native@latest
and it didn't work