or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

component-rules.md index.md plugin-configuration.md style-quality-rules.md stylesheet-rules.md

tile.json

Plugin Configuration

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
  }
};

Version

Tile

Files