React Viro incompatible with react native AccessibilityRoles

[isaac328]

• [x] Review the documentation: https://docs.viromedia.com/
• [x] Search for existing issues: https://github.com/viromedia/viro
• [x] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version: iOS 14.4
3. Version: ViroReact 2.20.2 and React Native 0.63.4
4. Device(s): iOS devices (tested on iPhone 11)

Description

It appears the react-viro library is currently incompatible with a large number of the react native accessibility roles on iOS. Of the 27 accessibility roles listed on the react native site here only 9 appear to be supported when using react viro. For example, when rendering a component using the "radio" accessibility role (anywhere in the app, not just in a viro scene/component) it will throw an exception "Invalid UIAccessibilityTraits 'radio'." (shown below). Unlinking react-viro in the pod file and re-building resolves this issue, however, obviously this breaks all react-viro functionality. The issue is only present for ios, as far as I can tell Android doesn't have this issue.

As stated above, any component in the app (including components from external libraries) using one of the unsupported accessibility roles will throw this exception even if no viro component is being rendered.

Reproducible Demo

1. Clone/Download the viro starter kit here
2. Run "npm install" / "pod install" / all the other usual setup stuff (I had to upgrade flipper version to 0.74 as well)
3. Overwrite the main app Component in App.js as follows (remember to import 'Text' and 'SafeAreaView' from the react native library)
4. Run the app. You should get the exception.

[jeroenverfallie]

Same issue, why is this override required in the first place?

https://github.com/ViroCommunity/viro/blob/7fa83641c807f3065291d0d3a29bfef4cacabaa9/ios/ViroReact/ViroViewManager.mm#L40-L62

[doranteseduardo]

According to the iOS documentation about UIAccessibilityTraits, radio is not supported.

[isaac328]

@doranteseduardo while that may be the case, the fact of the matter is that as pointed out by @jeroenverfallie the react-viro library overwrites the built in react-native accessibility trait mappings to iOS. As a result, any libraries or components that use these react-native platform accessibility traits results in the above exception being thrown.

Why does react-viro need to overwrite the default react-native accessibility trait mappings? Considering most 3rd party libraries nowadays have somewhat of a focus on being accessible, it seems that we now have an extremely limited selection of libraries we can use if we also want to use react-viro in our project.

[doranteseduardo]

Making a quick PR to solve this issue, thank you all for let us know.

[dunyakilavuz]

I'm also having a problem related to this issue.

In my case I installed Viro with npm i @viro-community/react-viro command to my existing project. Added the lines;

pod 'ViroReact', :path => '../node_modules/@viro-community/react-viro/ios/'
pod 'ViroKit_static_lib', :path => '../node_modules/@viro-community/react-viro/ios/dist/ViroRenderer/static_lib'

to my ios/Podfile as the documentation suggests. Project compiles fine but immediately after running, this error welcomes me.

Could not make the error go away. I have another project with Viro installed which runs without problems. Any help is appreciated. Thanks so much.

[dunyakilavuz]

So I wanted to update this issue for the people who may experience similar errors.

I downloaded the viro source and change theViroViewManager.mm file to never implement the RCTConvert method of react-native in the first place. Then installed pods, built the source on xcode and packed the npm package. Using this custom module fixed the issue for me.

Sadly, I could not build the source for x86_64 due to some error. So the fix doesn't work on the simulator but works fine on real devices. Im not sure if it fixes the OP's error though.

[trusohamn]

@doranteseduardo has your fix been ever merged?

[francois-pasquier]

This is probably the same underlying issue for https://github.com/ViroCommunity/viro/issues/116

[Kieraano]

It would be great to see this fix merged if possible - this override is breaking support for a lot of other packages.

[aframson]

pls any help the same issue

[robertjcolley]

This should be fixed in the latest patch release, since we no longer use the ViroKit_static_lib in the Podfile. Will reopen with minimally reproducible repo that has an updated Expo/React Native.

Follow the setup instructions