viromedia/viro

Invalid UIAccessibilityTraits

phillsv87 opened this issue ยท 7 comments

Environment

  1. Development OS: Mac
  2. Device OS & Version: iOS 14.3
  3. Version: ViroReact 2.17.0 / static lib, React Native 0.63.4
  4. Device(s): iPhone 11 Pro

Description

Anytime a Switch component is rendered an "Invalid UIAccessibilityTraits" error occurs. I believe this is caused by the ViroViewManager. On line 42 of ( https://github.com/viromedia/viro/blob/master/ios/ViroReact/ViroViewManager.mm ) the enum converter for UIAccessibilityTraits is redefined and does not include the 'switch' trait. I think the enum converter definition should look like the default ReactNative definition - line 24 of https://github.com/facebook/react-native/blob/ea93151f21003df6f65dd173dd5dcb3135b0ae94/React/Views/RCTViewManager.m

(note) - I am statically linking the Viro library as describe here - https://docs.viromedia.com/docs/no_use_frameworks

Error

Reproducible Demo

I have created a simple repo demoing the issue with 2 branches, one with Viro displaying the error and another without Viro and working as normal.

Example of error with Viro - https://github.com/phillsv87/ViroReact-Accessibility-Traits-Bug

Example of no error and no Viro - https://github.com/phillsv87/ViroReact-Accessibility-Traits-Bug/tree/no-viro

Hello???

So I fixed the glitch.

fixed the glitch

I removed Viro from my project.

Viro is out of date and it seems there are no active maintainers for the project.

If anyone else needs to fix this problem, just add accessibilityRole='button' to the Switch component.

I am having the same issue with react-native-tab-view after I run pod install for viro. On Android it is working fine.
Error:
Invalid UIAccessibilityTraits 'tab'

I fixed the issue by forking react-native-tav-view and replacing accessibilityRole="tab" by "button"

@onmotion Can you elaborate where is this Switch component? I'm using viro-react and react-navigation in my project, having the same problem...

@Weixuanf You have to edit Line 294 in /node_modules/@react-navigation/bottom-tabs/src/views/BottomTabBar.tsx