What is React Native ARIA?
A library of React Hooks for react-native web and react-native (Android/iOS) that provides accessible UI primitives for your design system.
Motivation#
In a utopian world, we would love a component library that works on all the platforms without limiting its styling, behavior, and accessibility. In reality, this can be a bit tricky.
With the advent of React Native, it has raised our expectations to build UIs across all platforms while reusing as much code as possible. However, RN ships with a very lean core with a lot of room for customizability. This means that we need to build our primitive components usingĀ ViewĀ andĀ Pressable or create native views. This is in contrast to the native development world where component APIs are shipped in the SDKs likeĀ UI Menu in iOS.
React Native ARIA aims to solve this by providing low level primitives to create a component or a primitive library that works on all platforms with the scope of React native.
Approach#
- For web, we've usedĀ React AriaĀ which providesĀ ARIAĀ attributes and behaviour (keyboard navigation/Tab focus) for commonly used components.
- For iOS/Android, we've created similar hooks to those in React Aria but instead of web-supported ARIA/behaviour, it returnsĀ React Native supported accessibility props whenever possible.
Check out Adobe Spectrum's architecture and the below talk by Devon Govett.