CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native--eslint-plugin

ESLint plugin providing custom rules for React Native development including platform-colors and no-deep-imports rules

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@react-native/eslint-plugin

@react-native/eslint-plugin is an ESLint plugin that provides custom rules specifically designed for React Native development. It includes two main rules: platform-colors for enforcing statically analyzable PlatformColor/DynamicColorIOS calls, and no-deep-imports for preventing deep imports from React Native internal modules.

Package Information

  • Package Name: @react-native/eslint-plugin
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev @react-native/eslint-plugin

Core Imports

// ESLint plugin structure
const plugin = require("@react-native/eslint-plugin");
// plugin.rules contains: { "platform-colors": ..., "no-deep-imports": ... }

// Direct rule access
const platformColorsRule = require("@react-native/eslint-plugin/platform-colors");
const noDeepImportsRule = require("@react-native/eslint-plugin/no-deep-imports");

// Utility mapping for deep imports fix
const { publicAPIMapping } = require("@react-native/eslint-plugin/utils");

For ESLint configuration (.eslintrc.json):

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

Basic Usage

This plugin is designed to be used as part of @react-native/eslint-config, but can be configured independently:

{
  "plugins": ["@react-native"],
  "rules": {
    "@react-native/platform-colors": "error",
    "@react-native/no-deep-imports": "error"
  }
}

Accessing the plugin programmatically:

const plugin = require("@react-native/eslint-plugin");

// Get available rules
console.log(Object.keys(plugin.rules)); // ["platform-colors", "no-deep-imports"]

// Access public API mapping for programmatic use
const { publicAPIMapping } = require("@react-native/eslint-plugin/utils");
console.log(publicAPIMapping["Libraries/Components/Button"]);
// { default: "Button", types: ["ButtonProps"] }

Capabilities

Plugin Rules Export

The main plugin export containing all ESLint rule definitions.

/**
 * Main plugin export with ESLint rules
 */
exports.rules = {
  "platform-colors": require('./platform-colors'),
  "no-deep-imports": require('./no-deep-imports')
};

Platform Colors Rule

Enforces that calls to PlatformColor() and DynamicColorIOS() are statically analyzable to enable performance optimizations.

/**
 * ESLint rule for validating PlatformColor and DynamicColorIOS calls
 */
const platformColorsRule = {
  meta: {
    type: "problem",
    docs: {
      description: "Ensure that PlatformColor() and DynamicColorIOS() are passed literals of the expected shape."
    },
    messages: {
      platformColorArgsLength: "PlatformColor() must have at least one argument that is a literal.",
      platformColorArgTypes: "PlatformColor() every argument must be a literal.",
      dynamicColorIOSArg: "DynamicColorIOS() must take a single argument of type Object",
      dynamicColorIOSValue: "DynamicColorIOS() value must be either a literal or a PlatformColor() call."
    },
    schema: []
  },
  create: function(context) {
    return {
      CallExpression: function(node) {
        // Rule implementation
      }
    };
  }
};

Rule Behavior:

  • Validates that PlatformColor() receives at least one literal argument
  • Ensures all PlatformColor() arguments are literals (not variables or expressions)
  • Validates that DynamicColorIOS() receives exactly one object expression argument
  • Ensures DynamicColorIOS() object properties are either literals or PlatformColor() calls

Usage Example:

// ✅ Valid - static literals
const color1 = PlatformColor("systemBlue", "blue");
const color2 = DynamicColorIOS({
  light: "white",
  dark: PlatformColor("systemBlack")
});

// ❌ Invalid - dynamic values
const colorName = "systemBlue";
const color3 = PlatformColor(colorName); // Error: arguments must be literals

No Deep Imports Rule

Prevents deep imports from React Native internal modules and provides automatic fixes to use top-level imports instead.

/**
 * ESLint rule for preventing deep imports from React Native
 */
const noDeepImportsRule = {
  meta: {
    type: "problem",
    docs: {
      description: "Disallow deep imports from react native"
    },
    messages: {
      deepImport: "'{{importPath}}' React Native deep imports are deprecated. Please use the top level import instead."
    },
    schema: [],
    fixable: "code"
  },
  create: function(context) {
    return {
      ImportDeclaration: function(node) {
        // Handle ES6 imports
      },
      CallExpression: function(node) {
        // Handle CommonJS require() calls
      }
    };
  }
};

Rule Behavior:

  • Detects deep imports from react-native/* paths
  • Provides automatic fixes using the public API mapping
  • Handles both ES6 imports and CommonJS require() calls
  • Supports default imports, named imports, and type imports
  • Excludes valid internal imports like react-native/Libraries/Core/InitializeCore

Usage Example:

// ❌ Invalid - deep import
import Button from "react-native/Libraries/Components/Button";

// ✅ Valid - top-level import (auto-fixed)
import { Button } from "react-native";

// ❌ Invalid - deep require
const Button = require("react-native/Libraries/Components/Button");

// ✅ Valid - top-level require (auto-fixed)
const { Button } = require("react-native");

Public API Mapping Utility

Utility object that maps React Native internal module paths to their public API equivalents.

/**
 * Mapping of React Native internal paths to public API equivalents
 * @type {Object.<string, {default: string|null, types: string[]|null}>}
 */
const publicAPIMapping = {
  // Internal path as key, mapping info as value
  "Libraries/Components/Button": {
    default: "Button",           // Public default export name
    types: ["ButtonProps"]       // Available type names for TypeScript
  }
  // ... 100+ more mappings
};

module.exports = {
  publicAPIMapping
};

Mapping Structure:

  • Keys: Internal React Native module paths (e.g., "Libraries/Components/Button")
  • Values: Objects with default (export name) and types (TypeScript types) properties
  • Coverage: 100+ React Native components, APIs, utilities, and types

Example Mappings:

const publicAPIMapping = {
  "Libraries/Components/Button": {
    default: "Button",
    types: ["ButtonProps"]
  },
  "Libraries/Components/ActivityIndicator/ActivityIndicator": {
    default: "ActivityIndicator", 
    types: ["ActivityIndicatorProps"]
  },
  "Libraries/Utilities/Platform": {
    default: "Platform",
    types: null
  }
  // ... 100+ more mappings
};

Types

/**
 * ESLint rule metadata structure
 * @typedef {Object} RuleMeta
 * @property {"problem"|"suggestion"|"layout"} type - Rule type
 * @property {Object} docs - Documentation object
 * @property {string} docs.description - Rule description  
 * @property {Object.<string, string>} messages - Error message templates
 * @property {Array} schema - JSON schema for rule options
 * @property {"code"|"whitespace"} [fixable] - Whether rule provides fixes
 */

/**
 * ESLint rule context object
 * @typedef {Object} RuleContext
 * @property {function} report - Report rule violations
 */

/**
 * ESLint rule definition
 * @typedef {Object} ESLintRule
 * @property {RuleMeta} meta - Rule metadata
 * @property {function} create - Creates rule visitor functions
 */

/**
 * Public API mapping entry
 * @typedef {Object.<string, {default: string|null, types: string[]|null}>} PublicAPIMapping
 */

/**
 * Plugin export structure
 * @typedef {Object} ESLintPlugin
 * @property {Object.<string, ESLintRule>} rules - Available rules
 */

docs

index.md

tile.json