eslint-plugin-reanimated

2.0.1 verified Sat Apr 25 auth: no javascript

eslint-plugin-reanimated v2.0.1 is an ESLint plugin that enforces best practices when using Reanimated 2 and 3 worklets in React Native projects. It provides rules to detect JavaScript functions called inside worklets (which break the UI thread), disallowed syntax, and multiple animated style usages. Requires TypeScript >=4.1.3 and ESLint >=8. Actively maintained, updated for Reanimated 3.4.2+. Differentiator: uses TypeScript compiler services for accurate type resolution, unlike lighter lint-based alternatives.

Common errors

error Error: Cannot read property 'getTypeOfSymbolAtLocation' of undefined ↓

cause Missing or incorrect parserOptions.project in ESLint config.

fix

Add 'parserOptions: { project: './tsconfig.json' }' to your ESLint config.

error Parsing error: The keyword 'const' is reserved ↓

cause ESLint parser not set to TypeScript parser (e.g., @typescript-eslint/parser).

fix

Install @typescript-eslint/parser and set 'parser: "@typescript-eslint/parser"' in ESLint config.

error Definition for rule 'reanimated/js-function-in-worklet' was not found ↓

cause Plugin not loaded or wrong name.

fix

Ensure 'plugins: ["reanimated"]' is present, not 'eslint-plugin-reanimated'.

Warnings

breaking The no-multiple-animated-style-usages rule no longer works in v2.0.0 due to internal changes. ↓

fix Remove or disable that rule, or pin to v1.x if you still need it.

gotcha External functions used in worklets must have the @worklet JSDoc annotation. ↓

fix Ensure imported functions (e.g., from react-native-redash) are marked with /** @worklet */.

gotcha The plugin relies on TypeScript compiler services; it will not work without a valid tsconfig.json. ↓

fix Set parserOptions.project to the path of your tsconfig.json.

deprecated Rule 'no-multiple-animated-style-usages' is deprecated as of v2.0.0. ↓

fix Remove the rule from configuration; it will not work.

Install

npm install eslint-plugin-reanimated

yarn add eslint-plugin-reanimated

pnpm add eslint-plugin-reanimated

Imports

plugin
wrong
```
plugins: ['eslint-plugin-reanimated']
```
correct
```
// In .eslintrc: plugins: ['reanimated']
```
Use the short name 'reanimated', not the full npm package name.

rules

wrong

rules: { 'js-function-in-worklet': 2 }

correct

rules: { 'reanimated/js-function-in-worklet': 2 }

Rule names must be prefixed with 'reanimated/'.

parserOptions

wrong

parserOptions: { tsconfigRootDir: __dirname }

correct

parserOptions: { project: './tsconfig.json' }

You must provide the path to tsconfig.json for type resolution.

Quickstart

Minimal ESLint configuration enabling all Reanimated rules with TypeScript project path.

// .eslintrc.js
module.exports = {
  plugins: ['reanimated'],
  parserOptions: {
    project: './tsconfig.json',
  },
  rules: {
    'reanimated/js-function-in-worklet': 2,
    'reanimated/unsupported-syntax': 2,
    'reanimated/no-multiple-animated-style-usages': 2,
  },
};