Registry / testing / eslint-plugin-react-native

eslint-plugin-react-native

library5.0.0jsnpmunverified

This ESLint plugin provides a set of specific linting rules tailored for React Native development. It aims to enforce best practices and catch common issues in React Native codebases, such as detecting unused styles, preventing inline styles with literal values, and ensuring raw text is wrapped in `<Text>` components. The current stable version is 5.0.0. Due to the maintainer's limited time, development activity is low, with updates primarily focusing on compatibility with new ESLint versions rather than new features or active pull request reviews. Its key differentiator is its focus on React Native specific patterns, building upon the foundational approach of `eslint-plugin-react`.

testing

npm install eslint-plugin-react-native

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-native

testingjavascriptv5.0.0

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.

plugins: ['react-native']

✓ { "plugins": ["react-native"] }

✗ import { rules } from 'eslint-plugin-react-native'

ESLint plugins are configured via string names in your .eslintrc.* file, not imported as JavaScript modules.

env: {'react-native/react-native': true}

✓ { "env": { "react-native/react-native": true } }

✗ "env": { "react-native": true }

The environment configuration uses a specific 'react-native/react-native' path to whitelist browser-like globals.

rules['react-native/no-inline-styles']

✓ { "rules": { "react-native/no-inline-styles": 2 } }

✗ { "rules": { "no-inline-styles": 2 } }

ESLint plugin rules must be prefixed with the plugin name (e.g., 'react-native/').

This configuration sets up ESLint with React Native specific rules, including support for JSX, global environment variables, and custom stylesheet object names.

module.exports = { root: true, extends: [ '@react-native-community' ], plugins: [ 'react', 'react-native' ], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 2020, sourceType: 'module' }, env: { 'react-native/react-native': true }, rules: { 'react-native/no-unused-styles': 2, 'react-native/split-platform-components': 2, 'react-native/no-inline-styles': 2, 'react-native/no-color-literals': 2, 'react-native/no-raw-text': 2, 'react-native/no-single-element-style-arrays': 2 }, settings: { 'react-native/style-sheet-object-names': ['EStyleSheet', 'OtherStyleSheet', 'PStyleSheet'] } };

Debug

Known issues

gotchaThis package is in maintenance mode with low development activity. New feature requests and most pull requests are not being actively reviewed or merged, focusing primarily on ESLint compatibility updates.

fix

Be aware that the plugin might not support the latest React Native features or syntax immediately. Consider contributing or seeking alternative solutions for cutting-edge linting requirements.

affects: >=3.0.0

breakingESLint peer dependency changes frequently. Ensure your installed 'eslint' version is compatible with 'eslint-plugin-react-native' as per its 'peerDependencies' in package.json to avoid runtime errors.

fix

Check the 'peerDependencies' of 'eslint-plugin-react-native' and install a compatible version of 'eslint'. For example, `npm install --save-dev eslint@^8` or `npm install --save-dev eslint@^9`.

affects: all

gotchaFailure to configure 'parserOptions.ecmaFeatures.jsx' will lead to linting errors on JSX syntax in your React Native components.

fix

Add `"parserOptions": { "ecmaFeatures": { "jsx": true } }` to your `.eslintrc` configuration.

affects: all

gotchaIt is highly recommended to install and configure 'eslint-plugin-react' alongside this plugin for comprehensive React linting, as many React Native components are also React components.

fix

Install `npm install --save-dev eslint-plugin-react` and add `'react'` to your `plugins` array in `.eslintrc`.

affects: all

Errors

Common errors & fixes

Error: Failed to load plugin 'react-native' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-react-native'

The package 'eslint-plugin-react-native' is not installed or not resolvable.

fix

Run `npm install --save-dev eslint-plugin-react-native` or `yarn add --dev eslint-plugin-react-native`.

Definition for rule 'react-native/no-unused-styles' was not found

The plugin 'eslint-plugin-react-native' is not correctly configured or the rule name is misspelled.

fix

Ensure `'react-native'` is listed in the `plugins` array in your `.eslintrc` and the rule name is correct, including the `'react-native/'` prefix.

Parsing error: Unexpected token <

ESLint is not configured to parse JSX syntax.

fix

Add `"parserOptions": { "ecmaFeatures": { "jsx": true } }` to your `.eslintrc` configuration.

Upgrade

Version history

5.0.0latest on npm

Audit

Dependencies

eslintrequiredRequired peer dependency for ESLint to function.

eslint-plugin-reactoptionalRecommended for full functionality and general React best practices.

Agent activity

4 hits · last 30 days

node

Resources

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

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