{"id":10828,"library":"eslint-plugin-react-native-a11y","title":"React Native Accessibility ESLint Rules","description":"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.","status":"active","version":"3.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/FormidableLabs/eslint-plugin-react-native-a11y","tags":["javascript","eslint","eslintplugin","eslint-plugin","a11y","accessibility","react-native"],"install":[{"cmd":"npm install eslint-plugin-react-native-a11y","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-native-a11y","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-native-a11y","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is an ESLint plugin and requires ESLint as a peer dependency to function. It supports ESLint versions `^3 || ^4 || ^5 || ^6 || ^7 || ^8`.","package":"eslint","optional":false}],"imports":[{"note":"To enable all recommended rules for both iOS and Android, extend this configuration in your .eslintrc.js. Always prefix with `plugin:`.","wrong":"extends: ['react-native-a11y/all']","symbol":"plugin:react-native-a11y/all","correct":"extends: ['plugin:react-native-a11y/all']"},{"note":"For iOS-specific accessibility rules, use this configuration. Replace `ios` with `android` for Android-specific rules, or `basic` for common rules.","wrong":"extends: ['react-native-a11y/ios']","symbol":"plugin:react-native-a11y/ios","correct":"extends: ['plugin:react-native-a11y/ios']"},{"note":"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`.","wrong":"rules: { 'has-accessibility-hint': 'error' }","symbol":"'react-native-a11y/has-accessibility-hint'","correct":"rules: { 'react-native-a11y/has-accessibility-hint': 'error' }"}],"quickstart":{"code":"{\n  \"name\": \"my-react-native-app\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"devDependencies\": {\n    \"eslint\": \"^8.0.0\",\n    \"eslint-plugin-react-native-a11y\": \"^3.5.1\"\n  }\n}\n\n// .eslintrc.js\nmodule.exports = {\n  root: true,\n  extends: [\n    // Assuming you have an existing React Native ESLint config\n    // e.g., '@react-native-community'\n    // 'plugin:react-native-a11y/basic', // For basic rules common to both platforms\n    // 'plugin:react-native-a11y/ios',   // For iOS-specific rules\n    // 'plugin:react-native-a11y/android', // For Android-specific rules\n    'plugin:react-native-a11y/all'    // For all rules (most comprehensive)\n  ],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true\n    }\n  },\n  rules: {\n    // Example of overriding a rule or adding a specific one\n    // 'react-native-a11y/has-valid-accessibility-role': 'error',\n    // 'react-native-a11y/has-accessibility-props': ['warn', {\n    //   touchableComponents: ['TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'Pressable']\n    // }]\n  }\n};","lang":"javascript","description":"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`."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"When migrating to ESLint 9, users may encounter compatibility issues with `has-valid-accessibility-ignores-invert-colors` rule, leading to linting failures or incorrect reporting.","severity":"gotcha","affected_versions":"~3.x"},{"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`.","message":"Installing ESLint plugins globally can lead to unexpected behavior or `plugin not found` errors, especially when project dependencies or configurations differ from the global setup.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always include the `plugin:` prefix when extending a plugin's configuration, for example, `extends: ['plugin:react-native-a11y/all']`.","message":"Incorrectly 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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).","cause":"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`.","error":"Error: Failed to load plugin 'react-native-a11y' relative to '...' The package 'eslint-plugin-react-native-a11y' was not found."},{"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).","cause":"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.","error":"Error: There was a problem loading formatter: .\\node_modules\\eslint\\lib\\cli-engine\\formatters\\stylish Error: require() of ES Module ..."},{"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`.","cause":"The configuration provided for a specific rule is syntactically incorrect, uses an invalid option, or the rule name itself is misspelled or not recognized.","error":"Error: Configuration for rule \"react-native-a11y/rule-name\" is invalid:"}],"ecosystem":"npm"}