react-native-paper: Typescript warning: Property 'accessibilityStates' is missing in type (...)

Current behaviour

I’m using React Native Paper with typescript. I’ve just updated all my plugins to their latest version and I’m getting the following error for most of the RNP components:

Property 'accessibilityStates' is missing in type (...)

Expected behaviour

Typing and props should not show warnings

Code sample

<Appbar.Header
  style={[styles.header]}
  statusBarHeight={StatusBar.currentHeight}
>
  <Appbar.Action icon="menu" onPress={navigation.toggleDrawer} />
  <View style={styles.headerContent}>
    <Searchbar
      autoCapitalize="none"
      autoCorrect={false}
      placeholder="Search"
      onChangeText={setQuery}
      ref={inputRef}
      value={query}
      style={styles.headerSearchBar}
      inputStyle={styles.headerSearchInput}
    />
  </View>
  <Appbar.Action icon="tune" onPress={toggleFilters} />
</Appbar.Header>

or

<Text style={styles.catCardTitle}>whatever</Text>

Screenshots (if applicable)

image image

What have you tried

Your Environment

Not using expo, all of my plugins are their latest version at the time of writing this.

  "dependencies": {
    "@react-native-community/async-storage": "^1.10.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.8.1",
    "@react-navigation/native": "^5.5.0",
    "@types/color": "^3.0.1",
    "@types/react-native-vector-icons": "^6.4.5",
    "axios": "^0.19.2",
    "color": "^3.1.2",
    "immutability-helper": "^3.1.1",
    "lodash-es": "^4.17.15",
    "qs": "^6.9.4",
    "react": "16.13.1",
    "react-native": "0.62.2",
    "react-native-animatable": "^1.3.3",
    "react-native-background-timer": "^2.2.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-maps": "0.27.1",
    "react-native-modal": "^11.5.6",
    "react-native-paper": "^3.10.1",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.7.0",
    "react-native-side-menu": "^1.1.3",
    "react-native-spinkit": "^1.5.0",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-axios-middleware": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "@types/jest": "^25.2.1",
    "@types/lodash-es": "^4.17.3",
    "@types/qs": "^6.9.2",
    "@types/react-native": "^0.62.12",
    "@types/react-native-autocomplete-input": "^4.0.1",
    "@types/react-redux": "^7.1.8",
    "@types/react-test-renderer": "16.9.2",
    "@typescript-eslint/eslint-plugin": "^3.1.0",
    "@typescript-eslint/parser": "^3.1.0",
    "babel-jest": "^26.0.1",
    "eslint": "^7.0.0",
    "eslint-config-airbnb-typescript": "^7.2.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^4.0.4",
    "jest": "^26.0.1",
    "prettier": "^2.0.5",
    "react-test-renderer": "16.13.1",
    "typescript": "^3.8.3"
  },

node -v: v13.8.0

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 3
  • Comments: 24 (4 by maintainers)

Most upvoted comments

@raajnadar According to this commit https://github.com/DefinitelyTyped/DefinitelyTyped/commit/ec53e42ae41f202f1f83bea94126a717a1848414#diff-7c5007b14419e07403a6a320e5b22742 accessibilityStates is removed from react-native types 20 days ago.

A workaround for this issue is using older versions like "@types/react-native": "0.62.2". But I think react-native-paper should also update their typescript definitions.

+13
hamidfzm on Jun 3, 2020

Upgrading to "react-native-paper": "4.0.0-alpha.1" fixed this issue for me.

+12
zholmes1 on Jun 26, 2020

Like hamidfzm said running this command makes errors disappear: npm i @types/react-native@0.62.2 --save-dev

previously i had 0.62.12 installed

+11
piatkiewicz on Jun 4, 2020

I solved the problem by reinstalling @types/react-native with the version I found in node_modules/react-native-paper/package.json

image

+7
Hkmu on Jul 15, 2020

@Noxware Change this line "@types/react-native": "^0.62.2", to "@types/react-native": "0.62.2", and run npm install.

+7
hamidfzm on Jun 6, 2020

@Noxware Change this line "@types/react-native": "^0.62.2", to "@types/react-native": "0.62.2", and run npm install.

FWIW 0.62.8 is the latest version of @types/react-native that still has accessibilityStates defined.

+5
mars-lan on Jun 15, 2020

I upgraded my dependencies today, too, and faced the issue initially mentioned. Solved it for now with switching back to @types/react-native@0.63.35.

+4
ja-ka on Jan 14, 2021

Try this delete node_modules folder and run yarn install after that run npx react-native run-android --reset-cache or npx react-native run-ios --reset-cache

If that did not work try downgrading react native paper to 3.8.0

If you still experience the issue provide a runnable repro like a snack demo or a github repo.

+4
raajnadar on Jun 3, 2020

for I am using a very basic List.Item inside a FlatList and I am getting

Type '{ title: string; description: string; left: () => Element; right: () => Element; }' is missing the following properties from type 'Pick<Props, "onLayout" | "style" | "hitSlop" | "testID" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | ... 41 more ... | "descriptionEllipsizeMode">': accessibilityComponentType, accessibilityTraitsts(2739)

here are my dev dependencies

    "@babel/core": "~7.12.10",
    "@types/react": "~16.9.56",
    "@types/react-dom": "~16.9.10",
    "@types/react-native": "~0.63.42",
    "eslint": "7.16.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.21.5",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-config-prettier":"7.1.0",
    "eslint-plugin-prettier":"3.3.0",
    "prettier":"2.2.1",
    "typescript": "~4.1.3",
    "@typescript-eslint/parser":"4.11.0",
    "@typescript-eslint/eslint-plugin":"4.11.0"
+2
samiq on Dec 23, 2020

Thanks, this version solves problem@types/react-native@0.62.2

+2
proteche on Jun 5, 2020

Using 4.2.0 I still have this problem. I’ve tried every version of @types/react-native people have suggested, but I continue to see this:

Screen Shot 2021-01-24 at 8 26 27 PM

I solved it by adding accessibilityComponentType and accessibilityTraits props.

+1
nandorojo on Jan 25, 2021

react-native-paper 4.1.0 apparently solved the problem

+1
jmarcosmruk on Sep 15, 2020
Read more comments on GitHub
← react-native-paper: Typescript error: No overload matches this call.
react-native-slider: Android Build Failed - Could not resolve all artifacts for configuration ':react-native-community_slider:classpath'.  →