Registry / testing / eslint-plugin-react-native-a11y

eslint-plugin-react-native-a11y

library3.5.1jsnpmunverified

eslint-plugin-react-native-a11y is an ESLint plugin specifically designed to identify common accessibility issues within React Native applications. It extends the principles of web accessibility linters like `eslint-plugin-jsx-a11y` by providing rules tailored to React Native's unique component structure and accessibility APIs. The plugin offers real-time feedback during development, helping teams create more inclusive and navigable experiences for users with screen readers and other assistive technologies. Currently stable at version `3.5.1`, it sees an active development pace with frequent patch and minor releases addressing bug fixes and new features. A key differentiator is its ability to offer platform-specific configurations (`basic`, `ios`, `android`, `all`) to optimize linting for projects targeting particular environments.

testing

npm install eslint-plugin-react-native-a11y

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-native-a11y

testingjavascriptv3.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin:react-native-a11y/all

✓ extends: ['plugin:react-native-a11y/all']

✗ extends: ['react-native-a11y/all']

To enable all recommended rules for both iOS and Android, extend this configuration in your .eslintrc.js. Always prefix with `plugin:`.

plugin:react-native-a11y/ios

✓ extends: ['plugin:react-native-a11y/ios']

✗ extends: ['react-native-a11y/ios']

For iOS-specific accessibility rules, use this configuration. Replace `ios` with `android` for Android-specific rules, or `basic` for common rules.

'react-native-a11y/has-accessibility-hint'

✓ rules: { 'react-native-a11y/has-accessibility-hint': 'error' }

✗ rules: { 'has-accessibility-hint': 'error' }

To enable or override specific rules, reference them directly in your `rules` section, ensuring the `react-native-a11y/` prefix is included. This example checks for `accessibilityHint` usage with `accessibilityLabel`.

This quickstart demonstrates installing the plugin via npm and configuring it in a `.eslintrc.js` file to extend the `all` recommended accessibility rules for a React Native project. It also shows where to include `eslint` as a dev dependency in `package.json`.

{ "name": "my-react-native-app", "version": "1.0.0", "private": true, "devDependencies": { "eslint": "^8.0.0", "eslint-plugin-react-native-a11y": "^3.5.1" } } // .eslintrc.js module.exports = { root: true, extends: [ // Assuming you have an existing React Native ESLint config // e.g., '@react-native-community' // 'plugin:react-native-a11y/basic', // For basic rules common to both platforms // 'plugin:react-native-a11y/ios', // For iOS-specific rules // 'plugin:react-native-a11y/android', // For Android-specific rules 'plugin:react-native-a11y/all' // For all rules (most comprehensive) ], parserOptions: { ecmaFeatures: { jsx: true } }, rules: { // Example of overriding a rule or adding a specific one // 'react-native-a11y/has-valid-accessibility-role': 'error', // 'react-native-a11y/has-accessibility-props': ['warn', { // touchableComponents: ['TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'Pressable'] // }] } };

Debug

Known issues

breakingVersion 3.0.0 of `eslint-plugin-react-native-a11y` removed support for Node.js 10. Users on Node.js 10 or older environments will encounter errors if they upgrade to v3.0.0 or higher.

fix

Upgrade your Node.js environment to version 12.0 or higher. Check your project's `engines` field in `package.json` and local Node.js version.

affects: >=3.0.0

gotchaWhen migrating to ESLint 9, users may encounter compatibility issues with `has-valid-accessibility-ignores-invert-colors` rule, leading to linting failures or incorrect reporting.

fix

Ensure you are using `eslint-plugin-react-native-a11y@3.5.1` or newer, which includes a specific fix for ESLint 9 compatibility regarding this rule.

affects: ~3.x

gotchaInstalling ESLint plugins globally can lead to unexpected behavior or `plugin not found` errors, especially when project dependencies or configurations differ from the global setup.

fix

Always install `eslint-plugin-react-native-a11y` as a local `devDependency` in your project using `npm install --save-dev eslint-plugin-react-native-a11y` or `yarn add eslint-plugin-react-native-a11y --dev`.

affects: >=2.0.0

gotchaIncorrectly configuring the plugin in `.eslintrc.js` by omitting the `plugin:` prefix for `extends` values (e.g., `extends: ['react-native-a11y/all']`) will cause ESLint to fail to load the configuration.

fix

Always include the `plugin:` prefix when extending a plugin's configuration, for example, `extends: ['plugin:react-native-a11y/all']`.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Failed to load plugin 'react-native-a11y' relative to '...' The package 'eslint-plugin-react-native-a11y' was not found.

The plugin package is not installed or not discoverable by ESLint. This can happen due to local vs. global installation mismatch or incomplete `npm install`.

fix

Run `npm install eslint-plugin-react-native-a11y --save-dev` in your project's root directory. If ESLint is globally installed, ensure the plugin is also globally installed (though local installation is recommended).

Error: There was a problem loading formatter: .\node_modules\eslint\lib\cli-engine\formatters\stylish Error: require() of ES Module ...

This error can occur when there are multiple conflicting versions of ESLint or its plugins installed within your project's `node_modules`, often due to transitive dependencies, or when mixing CommonJS (`require`) with ESM (`import`) configurations.

fix

Use `npm list eslint` or `yarn list eslint` to check for duplicate `eslint` packages. If conflicts exist, try `npm install --force` or `yarn install --force` to resolve peer dependency issues, or use `resolutions` in `package.json` for specific packages if necessary. Ensure your ESLint config aligns with your project's module type (CommonJS or ESM).

Error: Configuration for rule "react-native-a11y/rule-name" is invalid:

The configuration provided for a specific rule is syntactically incorrect, uses an invalid option, or the rule name itself is misspelled or not recognized.

fix

Double-check the rule name for typos and consult the official documentation for the `eslint-plugin-react-native-a11y` rules to ensure valid options and syntax are used in your `.eslintrc.js` file. For instance, `has-accessibility-props` accepts an array of `touchableComponents`.

Upgrade

Version history

3.5.1latest on npm

Audit

Dependencies

eslintrequiredThis is an ESLint plugin and requires ESLint as a peer dependency to function. It supports ESLint versions `^3 || ^4 || ^5 || ^6 || ^7 || ^8`.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/FormidableLabs/eslint-plugin-react-native-a11y ↗

packagehttps://www.npmjs.com/package/eslint-plugin-react-native-a11y ↗