{"id":19902,"library":"eslint-plugin-react-native-unistyles","title":"ESLint Plugin for React Native Unistyles","description":"ESLint plugin with rules for React Native Unistyles v3, providing `no-unused-styles` and `sort-styles` rules to detect unused stylesheet definitions and enforce sorted style properties. Current stable version is 3.0.7. The plugin supports both ESLint flat config (ESLint 9+) and legacy config (.eslintrc). Key differentiator: it is specifically tailored for the React Native Unistyles library, covering usage patterns like `createStyleSheet`, `useStyles`, and component detection, including wrapped components (e.g., `memo()`).","status":"active","version":"3.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/RodSarhan/eslint-plugin-react-native-unistyles","tags":["javascript","eslint","eslint-plugin","eslintplugin","react","react-native","react native","unistyles","react-native-unistyles"],"install":[{"cmd":"npm install eslint-plugin-react-native-unistyles","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-native-unistyles","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-native-unistyles","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires ESLint version ^3.17.0 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9","package":"eslint","optional":false},{"reason":"The plugin lints stylesheets created with React Native Unistyles; requires version ^3.0.0","package":"react-native-unistyles","optional":false}],"imports":[{"note":"ESM default import is the primary method; CommonJS require also works but is less common for ESLint plugins in flat config.","wrong":"const unistyles = require('eslint-plugin-react-native-unistyles');","symbol":"default","correct":"import unistyles from 'eslint-plugin-react-native-unistyles';"},{"note":"Named export for configs is available; using default then destructuring works but is redundant.","wrong":"import unistyles from 'eslint-plugin-react-native-unistyles'; const { configs } = unistyles;","symbol":"configs","correct":"import { configs } from 'eslint-plugin-react-native-unistyles';"},{"note":"Named export for rules object; useful for custom rule configuration or testing.","symbol":"rules","correct":"import { rules } from 'eslint-plugin-react-native-unistyles';"}],"quickstart":{"code":"import { defineConfig } from 'eslint/config';\nimport unistyles from 'eslint-plugin-react-native-unistyles';\n\nexport default defineConfig([\n  unistyles.configs.recommended,\n  {\n    rules: {\n      'react-native-unistyles/no-unused-styles': 'error',\n      'react-native-unistyles/sort-styles': [\n        'warn',\n        'asc',\n        {\n          ignoreStyleNames: false,\n          ignoreStyleProperties: false\n        }\n      ],\n    },\n  },\n]);","lang":"javascript","description":"This example shows how to set up the plugin with ESLint flat config, enabling both rules."},"warnings":[{"fix":"Update ESLint config to use flat config or add 'legacy-' prefix for extends.","message":"Version 3.0.0 introduced breaking changes for ESLint config: the recommended config is now `unistyles.configs.recommended` (flat config) and legacy config `plugin:react-native-unistyles/legacy-recommended` must be used for .eslintrc.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update option name to `ignoreStyleNames` in sort-styles rule configuration.","message":"In v3.0.6, the `ignoreClassNames` option was renamed to `ignoreStyleNames`. The old option name still works but is deprecated.","severity":"deprecated","affected_versions":">=3.0.6"},{"fix":"Add `languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } }` in flat config or `parserOptions: { ecmaFeatures: { jsx: true } }` in legacy config.","message":"The plugin requires JSX support to be enabled in ESLint parser options, otherwise it may fail to detect stylesheets.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use @typescript-eslint/parser and set `languageOptions: { parser: '@typescript-eslint/parser' }` in flat config.","message":"When using the plugin with TypeScript, ensure ESLint is configured to parse TypeScript files (e.g., with @typescript-eslint/parser) for proper type detection.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `yarn add eslint-plugin-react-native-unistyles -D` or `npm install eslint-plugin-react-native-unistyles --save-dev`.","cause":"The plugin is not installed as a dev dependency.","error":"Error: Failed to load plugin 'react-native-unistyles' declared in 'plugins': Cannot find module 'eslint-plugin-react-native-unistyles'"},{"fix":"Set `type: 'module'` in package.json or use `.mjs` extension for config file.","cause":"Using ES module syntax in a CommonJS environment or ESLint is not configured for ES modules.","error":"Parsing error: 'import' and 'export' may only appear at the top level"},{"fix":"Use numeric severity (0, 1, 2) or string severity ('off', 'warn', 'error') correctly depending on ESLint config format.","cause":"The rule severity was set to a non-numeric value like `'error'` in a numeric-only context.","error":"Configuration for rule 'react-native-unistyles/no-unused-styles' is invalid: severity must be one of the following values: 0 = off, 1 = warn, 2 = error"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}