BREAKING CHANGE: add performance rule to prevent usage of react native svg

Author: fannytavart

example-app/eslint-breaking-examples/break-react-native-svg-import-rule.tsx

@@ -0,0 +1,30 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger one error breaking eslint-plugin-react-native:
+// no-restricted-imports
+
+import Svg, { Circle, Rect } from "react-native-svg";
+
+export const SvgComponent = () => {
+  return (
+    <Svg height="50%" width="50%" viewBox="0 0 100 100">
+      <Circle
+        cx="50"
+        cy="50"
+        r="45"
+        stroke="blue"
+        strokeWidth="2.5"
+        fill="green"
+      />
+      <Rect
+        x="15"
+        y="15"
+        width="70"
+        height="70"
+        stroke="red"
+        strokeWidth="2"
+        fill="yellow"
+      />
+    </Svg>
+  );
+};

example-app/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "expo": "^49.0.0",
     "react": "^18.2.0",
-    "react-native": "^0.73.0"
+    "react-native": "^0.73.0",
+    "react-native-svg": "^15.5.0"
   }
 }

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

@@ -23,6 +23,11 @@ export const performanceConfig = defineConfig({
             message:
               "Please use useFocusEffect instead of useIsFocused to avoid excessive rerenders.",
           },
+          {
+            name: "react-native-svg",
+            message:
+              "Usage of react-native-svg is discouraged. Consider alternatives if applicable.",
+          },
         ],
       },
     ],