tessl/npm-eslint-plugin-react-native

React Native specific linting rules for ESLint providing comprehensive code quality enforcement for React Native development

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-eslint-plugin-react-native
Author: tessl

Configuration options, shareable configs, environment settings, and integration patterns for ESLint Plugin React Native.

Capabilities

Main Plugin Export

The plugin exports a complete ESLint plugin object with rules, configurations, and environment definitions.

/**
 * Main ESLint plugin export containing all rules and configurations
 */
module.exports = {
  rules: {
    'no-unused-styles': ESLintRule,
    'no-inline-styles': ESLintRule, 
    'no-color-literals': ESLintRule,
    'sort-styles': ESLintRule,
    'split-platform-components': ESLintRule,
    'no-raw-text': ESLintRule,
    'no-single-element-style-arrays': ESLintRule
  },
  rulesConfig: {
    'no-unused-styles': 0,
    'no-inline-styles': 0,
    'no-color-literals': 0,
    'sort-styles': 0,
    'split-platform-components': 0,
    'no-raw-text': 0,
    'no-single-element-style-arrays': 0
  },
  deprecatedRules: {}, // Currently empty
  environments: {
    'react-native': Environment
  },
  configs: {
    all: Config
  }
};

Rules Configuration

Default rule configuration object that sets all rules to disabled (severity 0).

/**
 * Default configuration for all plugin rules
 * All rules are disabled by default and must be explicitly enabled
 */
const rulesConfig = {
  'no-unused-styles': 0,        // Disabled by default
  'no-inline-styles': 0,        // Disabled by default
  'no-color-literals': 0,       // Disabled by default
  'sort-styles': 0,             // Disabled by default
  'split-platform-components': 0, // Disabled by default
  'no-raw-text': 0,             // Disabled by default
  'no-single-element-style-arrays': 0 // Disabled by default
};

Environment Configuration

React Native environment that provides global variables specific to React Native development.

/**
 * React Native environment configuration
 * Provides React Native-specific global variables to prevent undefined variable errors
 */
const environments = {
  'react-native': {
    globals: {
      // Globals provided by eslint-plugin-react-native-globals
      // Includes React Native bridge globals, development tools, etc.
    }
  }
};

Usage in ESLint config:

// .eslintrc.js
module.exports = {
  env: {
    'react-native/react-native': true // Enables React Native globals
  }
};

Shareable Configurations

Pre-configured rule sets that can be extended in ESLint configurations.

/**
 * "All" configuration that enables every rule with error severity
 * Provides a comprehensive starting point for React Native projects
 */
const configs = {
  all: {
    plugins: ['react-native'],
    parserOptions: {
      ecmaFeatures: {
        jsx: true // Required for JSX parsing
      }
    },
    rules: {
      'react-native/no-unused-styles': 2,
      'react-native/no-inline-styles': 2,
      'react-native/no-color-literals': 2,
      'react-native/sort-styles': 2,
      'react-native/split-platform-components': 2,
      'react-native/no-raw-text': 2,
      'react-native/no-single-element-style-arrays': 2
    }
  }
};

Usage Examples:

// .eslintrc.js - Use all rules
module.exports = {
  extends: ['plugin:react-native/all']
};

// .eslintrc.js - Selective rule usage
module.exports = {
  plugins: ['react-native'],
  rules: {
    'react-native/no-unused-styles': 'error',
    'react-native/no-raw-text': 'warn',
    'react-native/sort-styles': ['error', 'asc']
  }
};

Settings Configuration

Plugin-specific settings that customize rule behavior across the project.

StyleSheet Object Names

Configures which object names should be treated as StyleSheet objects for style-related rules.

/**
 * Settings for customizing StyleSheet object recognition
 * Affects rules: no-unused-styles, no-color-literals, sort-styles
 */
settings: {
  'react-native/style-sheet-object-names': string[] // Default: ['StyleSheet']
}

Configuration Examples:

// .eslintrc.js - Support multiple stylesheet libraries
module.exports = {
  settings: {
    'react-native/style-sheet-object-names': [
      'StyleSheet',     // React Native default
      'EStyleSheet',    // Extended StyleSheets
      'styled',         // styled-components
      'StyleSheet2'     // Custom stylesheet library
    ]
  }
};

Effect on Rule Behavior:

// All of these would be analyzed by style rules with the above setting
const styles1 = StyleSheet.create({ /* ... */ });
const styles2 = EStyleSheet.create({ /* ... */ });
const styles3 = styled.create({ /* ... */ });
const styles4 = StyleSheet2.create({ /* ... */ });

Integration Patterns

Basic Setup

Minimal configuration for React Native projects:

// .eslintrc.js
module.exports = {
  extends: [
    '@react-native-community', // React Native community config
    'plugin:react-native/all'   // All React Native rules
  ],
  env: {
    'react-native/react-native': true
  }
};

Selective Rule Configuration

Custom rule configuration with specific settings:

// .eslintrc.js
module.exports = {
  plugins: ['react-native'],
  env: {
    'react-native/react-native': true
  },
  rules: {
    // Core style rules - errors
    'react-native/no-unused-styles': 'error',
    'react-native/no-raw-text': 'error',
    
    // Style quality - warnings
    'react-native/no-inline-styles': 'warn',
    'react-native/no-color-literals': 'warn',
    
    // Organization rules with options
    'react-native/sort-styles': ['error', 'asc', {
      ignoreClassNames: false,
      ignoreStyleProperties: false
    }],
    
    // Platform rules with custom patterns
    'react-native/split-platform-components': ['error', {
      androidPathRegex: '\\.android\\.(js|ts|jsx|tsx)$',
      iosPathRegex: '\\.ios\\.(js|ts|jsx|tsx)$'
    }],
    
    // Performance optimization
    'react-native/no-single-element-style-arrays': 'error'
  },
  settings: {
    'react-native/style-sheet-object-names': ['StyleSheet', 'EStyleSheet']
  }
};

TypeScript Configuration

Configuration for TypeScript React Native projects:

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    '@react-native-community',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-native/all'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  env: {
    'react-native/react-native': true
  },
  settings: {
    'react-native/style-sheet-object-names': ['StyleSheet']
  }
};

Monorepo Configuration

Configuration for monorepos with multiple React Native packages:

// packages/mobile/.eslintrc.js
module.exports = {
  root: true, // Don't look for other config files
  extends: [
    '../../.eslintrc.js', // Shared base config
    'plugin:react-native/all'
  ],
  env: {
    'react-native/react-native': true
  },
  settings: {
    'react-native/style-sheet-object-names': ['StyleSheet', 'EStyleSheet']
  },
  overrides: [
    {
      files: ['*.ios.{js,ts,jsx,tsx}'],
      rules: {
        'react-native/split-platform-components': 'off' // Disable for platform files
      }
    },
    {
      files: ['*.android.{js,ts,jsx,tsx}'],
      rules: {
        'react-native/split-platform-components': 'off' // Disable for platform files
      }
    }
  ]
};

Rule Severity Levels

ESLint supports three severity levels for rules:

/**
 * ESLint rule severity levels
 */
const RuleSeverity = {
  0: 'off',    // Rule is disabled
  1: 'warn',   // Rule violation shows as warning
  2: 'error'   // Rule violation shows as error and fails lint
};

// Alternative string syntax
const RuleSeverityStrings = {
  'off': 0,
  'warn': 1,
  'error': 2
};

Usage Examples:

// Numeric syntax
rules: {
  'react-native/no-unused-styles': 2,        // Error
  'react-native/no-inline-styles': 1,        // Warning
  'react-native/no-color-literals': 0        // Disabled
}

// String syntax (preferred)
rules: {
  'react-native/no-unused-styles': 'error',
  'react-native/no-inline-styles': 'warn',
  'react-native/no-color-literals': 'off'
}

// With options
rules: {
  'react-native/sort-styles': ['error', 'asc', { ignoreClassNames: true }]
}

Migration and Upgrade Patterns

Gradual Adoption

Start with warnings and gradually increase severity:

// Phase 1: Warnings only
rules: {
  'react-native/no-unused-styles': 'warn',
  'react-native/no-raw-text': 'warn'
}

// Phase 2: Core rules as errors
rules: {
  'react-native/no-unused-styles': 'error',
  'react-native/no-raw-text': 'error',
  'react-native/no-inline-styles': 'warn'
}

// Phase 3: All rules enabled
extends: ['plugin:react-native/all']

Legacy Codebase Integration

Configuration for existing codebases with many violations:

// .eslintrc.js
module.exports = {
  plugins: ['react-native'],
  rules: {
    // Start with most impactful rules
    'react-native/no-raw-text': 'error',           // Critical for RN
    'react-native/no-unused-styles': 'warn',        // Performance impact
    
    // Gradually enable others
    'react-native/no-inline-styles': 'off',         // Too many violations initially
    'react-native/no-color-literals': 'off',        // Design system not ready
    'react-native/sort-styles': 'off'               // Enable after cleanup
  }
};