BREAKING CHANGE: refactor -> create custom rule for import of rn stack to prevent override with eslint import rule

Author: fannytavart

example-app/eslint-breaking-examples/break-react-navigation-stack-import-rule.tsx

@@ -1,7 +1,7 @@
 // Save without formatting: [⌘ + K] > [S]
 
-// This should trigger one error breaking eslint-plugin-react-native:
-// no-restricted-imports
+// This should trigger one error breaking custom react-navigation/stack rule:
+// @bam.tech/no-react-navigation-stack
 
 import { createStackNavigator } from "@react-navigation/stack";
 

packages/eslint-plugin/README.md

@@ -116,6 +116,8 @@ This plugin exports some custom rules that you can optionally use in your projec
 | [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][] |                        |     |
 | [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-flatlist](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-flatlist.md)                                             | Disallow importing `FlatList` from `react-native` due to potential performance concerns or the preference for alternative components. | ![badge-performance][] |                        | 🔧  |
+| [no-react-navigation-stack](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-react-navigation-stack.md)                 | Disallow importing from `@react-navigation/stack` and suggest using `@react-navigation/native-stack` instead.                         | ![badge-performance][] |                        |     |
+| [no-use-is-focused](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-use-is-focused.md)                                 | Disallow importing `useIsFocused` from `@react-navigation/native` to encourage using `useFocusEffect` instead.                        | ![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                                                                                |                        |                        |     |
 

packages/eslint-plugin/docs/rules/no-react-navigation-stack.md

@@ -0,0 +1,21 @@
+# Disallow importing from `@react-navigation/stack` and suggest using `@react-navigation/native-stack` instead (`@bam.tech/no-react-navigation-stack`)
+
+💼 This rule is enabled in the `performance` config.
+
+<!-- end auto-generated rule header -->
+
+Prevents from using "react-navigation/stack" import to avoid performance issues. "react-navigation/native-stack" should be used instead.
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+import { createStackNavigator } from "@react-navigation/stack";
+```
+
+Examples of **correct** alternative for this rule:
+
+```jsx
+import { createStackNavigator } from "@react-navigation/native-stack";
+```

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

@@ -6,11 +6,6 @@ export const performanceConfig = defineConfig({
       "error",
       {
         paths: [
-          {
-            name: "@react-navigation/stack",
-            message:
-              'Please use "@react-navigation/native-stack" instead of "@react-navigation/stack".',
-          },
           {
             name: "@react-navigation/native",
             importNames: ["useIsFocused"],
@@ -24,6 +19,7 @@ export const performanceConfig = defineConfig({
     "@bam.tech/avoid-intl-number-format": "error",
     "@bam.tech/avoid-react-native-svg": "warn",
     "@bam.tech/no-flatlist": "error",
+    "@bam.tech/no-react-navigation-stack": "error",
   },
   overrides: [
     {

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

@@ -6,6 +6,7 @@ import { noAnimatedWithoutNativeDriverRule } from "./no-animated-without-native-
 import { preferUserEventRule } from "./prefer-user-event";
 import { requireNamedEffectRule } from "./require-named-effect";
 import { noFlatListImportRule } from "./no-flatlist";
+import { noReactNavigationStackImportRule } from "./no-react-navigation-stack";
 
 export default {
   "await-user-event": awaitUserEventRule,
@@ -16,4 +17,5 @@ export default {
   "avoid-intl-number-format": avoidIntlNumberFormatRule,
   "avoid-react-native-svg": avoidReactNativeSvgImportRule,
   "no-flatlist": noFlatListImportRule,
+  "no-react-navigation-stack": noReactNavigationStackImportRule,
 };

packages/eslint-plugin/lib/rules/no-react-navigation-stack.ts

@@ -0,0 +1,49 @@
+import type { Rule } from "eslint";
+
+// Custom Rule: No Import from @react-navigation/stack
+export const noReactNavigationStackImportRule: Rule.RuleModule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow importing from `@react-navigation/stack` and suggest using `@react-navigation/native-stack` instead.",
+      category: "Best Practices",
+      recommended: true,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/no-react-navigation-stack.md",
+    },
+    messages: {
+      noReactNavigationStackImport:
+        '"@react-navigation/native-stack" provides out of the box native screens and native transitions for better performance and user experience.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        // Check if the import is from "@react-navigation/stack"
+        if (node.source.value === "@react-navigation/stack") {
+          context.report({
+            node,
+            messageId: "noReactNavigationStackImport",
+          });
+        }
+      },
+      CallExpression(node) {
+        // Check if require() is used to import "@react-navigation/stack"
+        if (
+          node.callee.type === "Identifier" &&
+          node.callee.name === "require" &&
+          node.arguments.length > 0 &&
+          node.arguments[0].type === "Literal" &&
+          node.arguments[0].value === "@react-navigation/stack"
+        ) {
+          context.report({
+            node,
+            messageId: "noReactNavigationStackImport",
+          });
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/tests/lib/rules/no-react-navigation-stack.test.ts

@@ -0,0 +1,30 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/no-react-navigation-stack
+
+import { noReactNavigationStackImportRule } from "../../../lib/rules/no-react-navigation-stack";
+import { RuleTester } from "eslint";
+
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser"),
+});
+
+const valid = [
+  `import { createStackNavigator } from "@react-navigation/native-stack";`,
+];
+
+const invalid = [
+  `import { createStackNavigator } from "@react-navigation/stack";`,
+  `import {createStackNavigator} from '@react-navigation/stack';`,
+];
+
+ruleTester.run("no-react-navigation-stack", noReactNavigationStackImportRule, {
+  valid,
+  invalid: invalid.map((code) => ({
+    code,
+    errors: [
+      `"@react-navigation/native-stack" provides out of the box native screens and native transitions for better performance and user experience.`,
+    ],
+  })),
+});