React-native-tab-view: Invalid prop `accessibilityRole` of value `tab` supplied to `TouchableOpacity`

[emmarq]

Current behaviour

The use of TabBarItem is throwing:

Failed prop type: Invalid prop `accessibilityRole` of value `tab` supplied to `TouchableOpacity`, expected one of 
["none","button","link","search","image","keyboardkey","text","adjustable","imagebutton","header","summary"]

Expected behaviour

The correct display of the MaterialTopTabNavigator.

Code sample

https://github.com/react-native-community/react-native-tab-view/blob/c762699b01c34adcd80b4761e120ebe0573ba649/src/TabBarItem.tsx#L220

Screenshots (if applicable)

What have you tried

I can't find a way to overwrite that prop.

Your Environment

| software | version
| ---------------------------- | -------
| android | 24
| ios | 13.3
| react-native | expo 35, react-native 0.59
| react-navigation-tabs | 2.6.2
| react-native-gesture-handler | 1.3.0
| react-native-reanimated | 1~.2.0
| node | 12.13.1
| npm or yarn | 6.12.1

[emmarq]

I hack this around installing the dependency directly at 2.11.0.

[AbdelkhalekESI]

same issue

[satya164]

Please upgrade your React Native version.

[selvamariappant2s]

I hack this around installing the dependency directly at 2.11.0.

save my day :)

[ankushdec1993]

Also facing the same issue in RN 0.59.0.

[ankushdec1993]

Is it possible to make it work without downgrading react-native-tab-view.

[grit96]

@satya164 it would be useful to have React Native version compatibility information in the README.

[satya164]

PR welcome to add it

[MMelek00]

I hack this around installing the dependency directly at 2.11.0.

sorry what you mean by that?

[emmarq]

I hack this around installing the dependency directly at 2.11.0.

sorry what you mean by that?

Installing the dependency directly at 2.11.0 fixed my issue.

What I think was happening was that one of my dependencies has as a dependency on this library, but with a bad model version that was installing an incompatible code with my current setup. So that update should have been a major, or the dependency should have specified the correct model version. (By model version, I mean the ~, or ^, etc). I hope I made myself clear.

It is not the first time something crash in my projects because of one transitive update.

[grit96]

@satya164 is there any way backwards compatibility for this prop can be added for RN < 0.60?

[nicewahson]

same issue. And 2.11.0 doesn't show anything~

[Iamdhammi]

I hack this around installing the dependency directly at 2.11.0.

Thanks this worked for me :)

[karthikvellur]

which component should be 2.11.0 ?

[roryabraham]

Having this same issue with the following environment:

• "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
• "react-native-bpk-component-touchable-native-feedback": "^3.0.0",
• "react-native-gesture-handler": "1.3",
• "react-native-reanimated": "1.2",
• "react-native-safe-area-context": "~0.3.6",
• "react-native-screens": "~1.0.0-alpha.23",
• "react-native-web": "^0.11.7",
• "react-navigation": "^4.0.10",
• "react-navigation-stack": "^2.0.16",
• "react-navigation-tabs": "^2.8.7"

Also not sure which dependency should be 2.11.0 ... I've tried setting the following dependencies to 2.11.0, without success:

• react-navigation
• react-native-tab-view

[codeforcesmeme]

@satya164 I think you can look into it? provide backward compatibility ?
You're just breaking many projects

[Magudeshwaran]

I hack this around installing the dependency directly at 2.11.0.
can you explain that ?

[Magudeshwaran]

I hack this around installing the dependency directly at 2.11.0.

sorry what you mean by that?

Installing the dependency directly at 2.11.0 fixed my issue.

What I think was happening was that one of my dependencies has as a dependency on this library, but with a bad model version that was installing an incompatible code with my current setup. So that update should have been a major, or the dependency should have specified the correct model version. (By model version, I mean the ~, or ^, etc). I hope I made myself clear.

It is not the first time something crash in my projects because of one transitive update.

Can you specify exactly what you updated ?

[Magudeshwaran]

Go to node_modules -> react-natie-tab-view -> lib -> module
Change 'accessibilityRole' value to 'none' in 'TabBarItem.js' and 'TabBar.js'
Solved for me.

[YobertyGarcia]

Have the same issue, the only way it got solved was manually changing the lines described by Magudeshwaran on May 23,

the lines 156 on TabBarItem.js and 241 on TabBar.js

This is not the better solution but it works