BREAKING CHANGE: add custom rule for native driver use with Animated to performance rules

Author: fannytavart

example-app/eslint-breaking-examples/break-native-driver-rule.ts

@@ -0,0 +1,9 @@
+import { Animated } from "react-native";
+
+const fadeAnim = new Animated.Value(0);
+
+Animated.timing(fadeAnim, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: false, // This line breaks the custom rule
+}).start();

packages/eslint-plugin/README.md

@@ -106,11 +106,12 @@ This plugin exports some custom rules that you can optionally use in your projec
 🧪 Set in the `tests` configuration.\
 🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
 
-| Name                                                                                                                                              | Description                                            | 💼  | 🔧  |
-| :------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------- | :-- | :-- |
-| [await-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/await-user-event.md)         | Enforces awaiting userEvent calls                      | 🧪  | 🔧  |
-| [prefer-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/prefer-user-event.md)       | Enforces usage of userEvent over fireEvent in tests.   |     | 🔧  |
-| [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect |     |     |
+| Name                                                                                                                                                                        | Description                                                  | 💼                     | 🔧  |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--------------------- | :-- |
+| [await-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/await-user-event.md)                                   | Enforces awaiting userEvent calls                            | 🧪                     | 🔧  |
+| [no-animated-without-native-driver](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-animated-without-native-driver.md) | Disallow the use of `Animated` with `useNativeDriver: false` | ![badge-performance][] | 🔧  |
+| [prefer-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/prefer-user-event.md)                                 | Enforces usage of userEvent over fireEvent in tests.         |                        | 🔧  |
+| [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md)                           | Enforces the use of named functions inside a useEffect       |                        |     |
 
 <!-- end auto-generated rules list -->
 

packages/eslint-plugin/docs/rules/no-animated-without-native-driver.md

@@ -0,0 +1,31 @@
+# Disallow the use of `Animated` with `useNativeDriver: false` (`@bam.tech/no-animated-without-native-driver`)
+
+💼 This rule is enabled in the `performance` config.
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+Enforces the usage of native driver when using `Animated` from `react-native` to improve performance.
+
+## Rule details
+
+Example of **incorrect** code for this rule:
+
+```jsx
+Animated.timing(fadeAnim, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: false,
+}).start();
+```
+
+Example of **correct** code for this rule:
+
+```jsx
+Animated.timing(fadeAnim, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true,
+}).start();
+```

packages/eslint-plugin/lib/configs/performance.ts

@@ -31,6 +31,7 @@ export const performanceConfig = defineConfig({
         ],
       },
     ],
+    "@bam.tech/no-animated-without-native-driver": "error",
   },
   overrides: [
     {

packages/eslint-plugin/lib/rules/index.ts

@@ -1,9 +1,11 @@
 import { awaitUserEventRule } from "./await-user-event";
+import { noAnimatedWithoutNativeDriverRule } from "./no-animated-without-native-driver";
 import { preferUserEventRule } from "./prefer-user-event";
 import { requireNamedEffectRule } from "./require-named-effect";
 
 export default {
   "await-user-event": awaitUserEventRule,
   "prefer-user-event": preferUserEventRule,
   "require-named-effect": requireNamedEffectRule,
+  "no-animated-without-native-driver": noAnimatedWithoutNativeDriverRule,
 };

packages/eslint-plugin/lib/rules/no-animated-without-native-driver.ts

@@ -0,0 +1,51 @@
+import type { Rule } from "eslint";
+
+// Custom Rule: No Animated with useNativeDriver: false
+export const noAnimatedWithoutNativeDriverRule: Rule.RuleModule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow the use of `Animated` with `useNativeDriver: false`",
+      category: "Possible Errors",
+      recommended: true,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/no-animated-without-native-driver.md",
+    },
+    messages: {
+      noNativeDriverFalse:
+        "Do not use Animated with useNativeDriver: false. Always set useNativeDriver: true for better performance.",
+    },
+    schema: [],
+    fixable: "code",
+  },
+
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (
+          node.callee.type === "MemberExpression" &&
+          node.callee.object.type === "Identifier" &&
+          node.callee.object.name === "Animated" &&
+          node.arguments.length > 0 &&
+          node.arguments[1].type === "ObjectExpression"
+        ) {
+          const useNativeDriverProperty = node.arguments[1].properties.find(
+            (prop) =>
+              prop.type === "Property" &&
+              prop.key.type === "Identifier" &&
+              prop.key.name === "useNativeDriver" &&
+              prop.value.type === "Literal" &&
+              prop.value.value === false,
+          );
+
+          if (useNativeDriverProperty) {
+            context.report({
+              node: useNativeDriverProperty,
+              messageId: "noNativeDriverFalse",
+            });
+          }
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/tests/lib/rules/no-animated-without-native-driver.test.ts

@@ -0,0 +1,41 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/no-animated-without-native-driver
+
+import { noAnimatedWithoutNativeDriverRule } from "../../../lib/rules/no-animated-without-native-driver";
+import { RuleTester } from "eslint";
+
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser"),
+});
+
+const valid = [
+  `Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+    }).start();`,
+];
+
+const invalid = [
+  `Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: false,
+    }).start();`,
+];
+
+ruleTester.run(
+  "no-animated-without-native-driver",
+  noAnimatedWithoutNativeDriverRule,
+  {
+    valid,
+    invalid: invalid.map((code) => ({
+      code,
+      errors: [
+        "Do not use Animated with useNativeDriver: false. Always set useNativeDriver: true for better performance.",
+      ],
+    })),
+  },
+);