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

fannytavart · fannytavart · commit 021a4b8c6762 · 2024-09-03T10:55:03.000+02:00
diff --git a/example-app/eslint-breaking-examples/break-native-driver-rule.tsx b/example-app/eslint-breaking-examples/break-native-driver-rule.tsx
@@ -0,0 +1,21 @@
+import { Animated, ScrollView, Text } 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();
+
+export const CustomScrollView = () => {
+  return (
+    <ScrollView
+      onScroll={Animated.event([], {
+        useNativeDriver: false,
+      })}
+    >
+      <Text>{"Something to scroll"}</Text>
+    </ScrollView>
+  );
+};
diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md
@@ -107,12 +107,14 @@ 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                          | 🧪  | 🔧  |
-| [no-different-displayname](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-different-displayname.md) | Enforce component displayName to match with component name | ✅  | 🔧  |
-| [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-different-displayname](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-different-displayname.md)                   | Enforce component displayName to match with component name   | ✅                     | 🔧  |
+| [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       |                        |     |
+| Name                                                                                                                                                                        |
 
 <!-- end auto-generated rules list -->
 
diff --git a/packages/eslint-plugin/docs/rules/no-animated-without-native-driver.md b/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();
+```
diff --git a/packages/eslint-plugin/lib/configs/performance.ts b/packages/eslint-plugin/lib/configs/performance.ts
@@ -31,6 +31,7 @@ export const performanceConfig = defineConfig({
         ],
       },
     ],
+    "@bam.tech/no-animated-without-native-driver": "error",
   },
   overrides: [
     {
diff --git a/packages/eslint-plugin/lib/rules/index.ts b/packages/eslint-plugin/lib/rules/index.ts
@@ -1,5 +1,6 @@
 import { awaitUserEventRule } from "./await-user-event";
 import { noDifferentDisplaynameRule } from "./no-different-displayname";
+import { noAnimatedWithoutNativeDriverRule } from "./no-animated-without-native-driver";
 import { preferUserEventRule } from "./prefer-user-event";
 import { requireNamedEffectRule } from "./require-named-effect";
 
@@ -8,4 +9,5 @@ export default {
   "prefer-user-event": preferUserEventRule,
   "require-named-effect": requireNamedEffectRule,
   "no-different-displayname": noDifferentDisplaynameRule,
+  "no-animated-without-native-driver": noAnimatedWithoutNativeDriverRule,
 };
diff --git a/packages/eslint-plugin/lib/rules/no-animated-without-native-driver.ts b/packages/eslint-plugin/lib/rules/no-animated-without-native-driver.ts
@@ -0,0 +1,80 @@
+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) {
+        // Check if the node is a call to `Animated` object
+        if (
+          node.callee.type === "MemberExpression" &&
+          node.callee.object.type === "Identifier" &&
+          node.callee.object.name === "Animated"
+        ) {
+          // Handle the case: Animated.someMethod(..., { useNativeDriver: false })
+          if (
+            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",
+              });
+            }
+          }
+
+          // Handle the case: Animated.event([...], { useNativeDriver: false })
+          if (
+            node.callee.property.type === "Identifier" &&
+            node.callee.property.name === "event" &&
+            node.arguments.length > 1 &&
+            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",
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+};
diff --git a/packages/eslint-plugin/tests/lib/rules/no-animated-without-native-driver.test.ts b/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.",
+      ],
+    })),
+  },
+);

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ export const performanceConfig = defineConfig({`
`31`	`31`	`],`
`32`	`32`	`},`
`33`	`33`	`],`
	`34`	`+ "@bam.tech/no-animated-without-native-driver": "error",`
`34`	`35`	`},`
`35`	`36`	`overrides: [`
`36`	`37`	`{`