
React Native A11y Order
Native-first React Native library for controlling screen reader focus order on iOS (VoiceOver) and Android (TalkBack).
- Custom focus order — define the exact sequence, independent of render order
- Cards with inner buttons — card action and nested controls, both accessible at once
- Focus trap — keep VoiceOver and TalkBack inside modals, no leaking
- Transition announcements — notify the screen reader on screen and panel changes
- New Architecture · Old Architecture · Bridgeless · Expo prebuild
Before adding this library, try
<View collapsable={false}>— it fixes most simple focus order issues with no extra dependencies. Learn more
React Native v0.8.2+ includes an experimental
experimental_accessibilityOrderprop — see Accessibility docs.
Installation
yarn add react-native-a11y-order
cd ios && pod installGet started with the getting started guide or jump straight to the component overview.
React Native compatibility
| Library version | React Native |
|---|---|
1.0.0 |
≥ 0.80 |
0.11.0 |
≤ 0.79 |
What's available
Components
| Export | Purpose |
|---|---|
A11y.Order |
Container that defines a named focus-order sequence. |
A11y.Index |
Positioned slot within an A11y.Order sequence. |
A11y.View |
Standalone view with screen reader focus events; no ordering. |
A11y.Card |
Card that keeps both a card-level action and nested buttons accessible simultaneously. |
A11y.FocusTrap |
Confines screen reader focus to a subtree (modal/overlay). |
A11y.FocusFrame |
Root boundary required by A11y.FocusTrap; detects focus escaping the region. |
A11y.PaneTitle |
Announces screen or panel transitions to VoiceOver/TalkBack. |
A11y.ScreenChange |
Shorthand for A11y.PaneTitle with type="activity" pre-set. |
API
| Export | Purpose |
|---|---|
ScreenReader |
Reliable programmatic announcements for VoiceOver and TalkBack. |
Documentation
Roadmap
All planned features are implemented and released. No new functionality or API changes are planned.
Future work is limited to:
- React Native version support (new releases)
- Bug fixes and issue resolution
Both active versions receive fixes:
| Version | React Native | Status |
|---|---|---|
1.0.0 |
≥ 0.80 | Active — bug fixes and new RN support |
0.11.0 |
≤ 0.79 | Active — bug fixes only |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library