BREAKING CHANGE: add performance rule to prevent using imports from @react-navigation/stack in favor of @react-navigation/native-stack

Author: fannytavart

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

@@ -0,0 +1,12 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger one error breaking eslint-plugin-react-native:
+// no-restricted-imports
+
+import { createStackNavigator } from "@react-navigation/stack";
+
+const Stack = createStackNavigator();
+
+export const MyStack = () => {
+  return <Stack.Navigator />;
+};

example-app/package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@bam.tech/eslint-plugin": "*",
     "@bam.tech/typescript-config": "*",
+    "@react-navigation/stack": "^6.4.1",
     "@testing-library/react-native": "^12.3.1",
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",

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

@@ -12,6 +12,11 @@ export const performanceConfig = defineConfig({
             message:
               "Please use FlashList from @shopify/flash-list instead of FlatList from react-native.",
           },
+          {
+            name: "@react-navigation/stack",
+            message:
+              'Please use "@react-navigation/native-stack" instead of "@react-navigation/stack".',
+          },
         ],
       },
     ],