react-native-paper: Typescript error in version 4.10.0

I use this react-native-paper@^4.10.0 with typescript but got some typing errors

package.json

{
  "name": "expo-app-",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "expo": "~43.0.0",
    "expo-splash-screen": "~0.13.3",
    "expo-status-bar": "~1.1.0",
    "expo-updates": "~0.10.5",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-paper": "^4.10.0",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.8.0",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.1",
    "@types/react-native": "~0.64.2",
    "typescript": "^4.4.4"
  },
  "private": true
}

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 11
Comments: 35 (10 by maintainers)

Most upvoted comments

Add this in package.json

"resolutions": {
	"@types/react": "<version-of-react>"
},

+10

raajnadar on May 8, 2022

I think using paper v4.10.1 with types 0.66.x solves the problem.

lukewalczak on Nov 17, 2021

@lukewalczak just a heads up here that the 4.10.0 version doesn’t seem to have an updated lib folder as the compiled types still contain the outdated properties from @types/react-native 0.65.5. Perhaps just a missed yarn install before deploying that version?

simonbuerger on Nov 16, 2021

Same error showed on me when my version was upgraded. Going back to lower version like "react-native-paper": "^4.9.2" worked for me

dennis-gonzales on Nov 6, 2021

Seeing the same issue. I think it’s related to #2929, #2442. Also this comment

https://github.com/callstack/react-native-paper/pull/2953#issuecomment-960515698

"react-native": "0.66.2",
"react-native-paper": "4.10.0",

"@types/react-native": "0.66.3",

Getting these types of error anywhere i’m using certain React Native Paper components:

Property 'tvParallaxProperties' is missing in type '{ size: number; color: string; type: string; name: string; }' but required in type 'Pick<Partial<IconProps> & Partial<ThemeProps<Partial<IconProps>>>, "type" | "reverse" | "name" | "color" | ... 65 more ... | "brand">'.

119       <ListItem.Chevron

Type '{ children: Element; topDivider: true; }' is missing the following properties from type 'Pick<TouchableHighlightProps & { containerStyle?: StyleProp<ViewStyle>; disabledStyle?: StyleProp<ViewStyle>; ... 6 more ...; children?: any; } & Partial<...>, "testID" | ... 45 more ... | "bottomDivider">': hasTVPreferredFocus, tvParallaxProperties

210     <ListItem topDivider>

maccuaa on Nov 8, 2021

react-native-paper 4.10.1 react-native 0.66.3 @types/react-native 0.66.4

The errors are gone!

Thank you!

adamgajzlerowicz on Nov 17, 2021

The issue will go away without resolution or any hacks if you use RN 0.69 or Expo SDK 46 as it is based on React 18

Edit - @kendallroth I missed your reply, yes my solution was for yarn as I only use yarn, I wasn’t sure about npm

raajnadar on Aug 3, 2022

This a working component which takes text props title.d.ts

declare type Props = React.ComponentProps<typeof Text> & {
    children: React.ReactNode;
};

title.ts

type Props = React.ComponentProps<typeof Text> & {
  children: React.ReactNode;
};

I noticed this issue in Text and Dialog.Title component. This components have type file generation as mentioned in https://github.com/callstack/react-native-paper/issues/2965#issuecomment-971308124 Also as shown in https://github.com/callstack/react-native-paper/issues/2965#issue-1046436075 the issue is only seen in editor, no issue in expo development logs.

I am using latest expo and rn-paper version.

"dependencies": {
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-art": "^17.0.2",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-paper": "^4.11.1",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5"
  },

ghost on Dec 24, 2021

Incase someone else runs into this issue, this is how you force a version on a package:

npm install react-native-paper@4.9.2

Then restart VSCode so it reloads the type files.

rvdende on Nov 9, 2021

Upgrade @types/react-native to latest version fixed issue.

NoerNova on Mar 10, 2022

I am running into similar issues. I am on RN 0.63.4. I tried rolling back to react-native-paper 4.9.2 which looks like it was the last version compiled against RN 0.63. But I still see an error for example when I try to use the paper text component:

js/PaperTest.tsx:31:12 - error TS2741: Property 'dataDetectorType' is missing in type '{ children: string; }' but required in type 'Pick<TextProps & { style?: StyleProp<TextStyle>; theme: Theme; } & RefAttributes<{}>, "key" | "ref" | "style" | "onLayout" | ... 32 more ... | "dataDetectorType">'.

31           <Text>{`${modalText}`}</Text>
              ~~~~

It appears as this property is only used on Android, and even then should not be a required property, so I don’t know why this raised an error.

Versions:

  "@types/react": "16.14.0",
  "@types/react-native": "0.63.4",
  "react-native": "0.63.4",
  "react-native-paper": "4.9.2",

elashpear on Jan 6, 2022

Hello everyone. Get the same issue using ProgressBar

<ProgressBar indeterminate={inProgress} color={PURPLE_400} />

returns error TS2741: Property 'children' is missing in type '{ indeterminate: true; color: string; }' but required in type 'Pick '.

Investigated that type Props in /src/components/ProgressBar.tsx does not contain ‘children’ as optional so I have to pass it calling component

<ProgressBar indeterminate={inProgress} color={PURPLE_400} children />

fedorin-git on Dec 17, 2021