chore: linter rules to detect forwardRef usage

.eslintrc

@@ -5,7 +5,12 @@
 
   "extends": "@callstack",
 
+  "plugins": ["eslint-plugin-local-rules"],
+
   "rules": {
+    "local-rules/no-import-react-forwardref": "error",
+    "local-rules/no-react-forwardref-usage": "error",
+
     "one-var": "off",
     "no-multi-assign": "off",
     "no-nested-ternary": "off",
@@ -49,6 +54,15 @@
     "react-native-a11y/has-valid-accessibility-descriptors": "off"
   },
 
+  "overrides": [
+    {
+      "files": ["*.test.js", "*.test.tsx"],
+      "rules": {
+        "local-rules/no-react-forwardref-usage": "off"
+      }
+    }
+  ],
+
   "settings": {
     "import/extensions": [".js", ".ts", ".tsx"],
     "import/parsers": {

eslint-local-rules/index.js

@@ -0,0 +1,2 @@
+Object.assign(exports, require('./no-import-react-forwardref'));
+Object.assign(exports, require('./no-react-forwardref-usage'));

eslint-local-rules/no-import-react-forwardref.js

@@ -0,0 +1,27 @@
+exports['no-import-react-forwardref'] = {
+  meta: {
+    docs: {
+      description: 'Disallow importing of React.forwardRef',
+      category: 'Possible Errors',
+      recommended: false,
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== 'react') return;
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== 'ImportSpecifier') continue;
+          if (specifier.imported.name !== 'forwardRef') continue;
+
+          context.report({
+            loc: specifier.loc,
+            message: 'Import forwardRef from src/utils/forwardRef instead',
+          });
+        }
+      },
+    };
+  },
+};

eslint-local-rules/no-react-forwardref-usage.js

@@ -0,0 +1,28 @@
+exports['no-react-forwardref-usage'] = {
+  meta: {
+    docs: {
+      description: 'Disallow usage of React.forwardRef',
+      category: 'Possible Errors',
+      recommended: false,
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (node.callee?.type !== 'MemberExpression') return;
+
+        const { callee } = node;
+        if (callee.object.type !== 'Identifier') return;
+        if (callee.object.name !== 'React') return;
+        if (callee.property.type !== 'Identifier') return;
+        if (callee.property.name !== 'forwardRef') return;
+
+        context.report({
+          loc: callee.loc,
+          message: 'Use forwardRef from src/utils/forwardRef instead',
+        });
+      },
+    };
+  },
+};

package.json

@@ -78,6 +78,7 @@
     "dedent": "^0.7.0",
     "eslint": "8.31.0",
     "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-local-rules": "^1.3.2",
     "expo-constants": "^9.3.5",
     "flow-bin": "0.92.0",
     "glob": "^7.1.3",
@@ -99,8 +100,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-vector-icons": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "react-native-vector-icons": "*"
   },
   "husky": {
     "hooks": {

src/components/Surface.tsx

@@ -12,6 +12,7 @@ import { useInternalTheme } from '../core/theming';
 import overlay, { isAnimatedValue } from '../styles/overlay';
 import shadow from '../styles/shadow';
 import type { ThemeProp, MD3Elevation } from '../types';
+import { forwardRef } from '../utils/forwardRef';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -39,7 +40,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
   ref?: React.RefObject<View>;
 };
 
-const MD2Surface = React.forwardRef<View, Props>(
+const MD2Surface = forwardRef<View, Props>(
   ({ style, theme: overrideTheme, ...rest }: Omit<Props, 'elevation'>, ref) => {
     const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle;
     const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme);
@@ -105,7 +106,7 @@ const MD2Surface = React.forwardRef<View, Props>(
  * });
  * ```
  */
-const Surface = React.forwardRef<View, Props>(
+const Surface = forwardRef<View, Props>(
   (
     {
       elevation = 1,

src/components/ToggleButton/ToggleButton.tsx

@@ -12,6 +12,7 @@ import color from 'color';
 import { useInternalTheme } from '../../core/theming';
 import { black, white } from '../../styles/themes/v2/colors';
 import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
 import { ToggleButtonGroupContext } from './ToggleButtonGroup';
@@ -92,7 +93,7 @@ export type Props = {
  *
  * ```
  */
-const ToggleButton = React.forwardRef<View, Props>(
+const ToggleButton = forwardRef<View, Props>(
   (
     {
       icon,

src/components/Typography/Text.tsx

@@ -9,6 +9,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import { Font, MD3TypescaleKey, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 
 export type Props = React.ComponentProps<typeof NativeText> & {
   /**
@@ -149,4 +150,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default React.forwardRef(Text);
+export default forwardRef(Text);

src/components/Typography/v2/Text.tsx

@@ -9,6 +9,7 @@ import {
 import type { MD2Theme } from 'src/types';
 
 import { useInternalTheme } from '../../../core/theming';
+import { forwardRef } from '../../../utils/forwardRef';
 
 type Props = React.ComponentProps<typeof NativeText> & {
   style?: StyleProp<TextStyle>;
@@ -58,4 +59,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default React.forwardRef(Text);
+export default forwardRef(Text);

src/utils/forwardRef.tsx

@@ -1,5 +1,5 @@
-import {
-  forwardRef as reactForwardRef,
+import * as React from 'react';
+import type {
   ForwardRefRenderFunction,
   PropsWithoutRef,
   RefAttributes,
@@ -20,4 +20,4 @@ export type ForwarRefComponent<T, P = {}> = ForwardRefExoticComponent<
  */
 export const forwardRef: <T, P = {}>(
   render: ForwardRefRenderFunction<T, P>
-) => ForwarRefComponent<T, P> = reactForwardRef;
+) => ForwarRefComponent<T, P> = React.forwardRef;

yarn.lock

@@ -5199,6 +5199,11 @@ eslint-plugin-jest@^27.0.1:
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
+eslint-plugin-local-rules@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-local-rules/-/eslint-plugin-local-rules-1.3.2.tgz#b9c9522915faeb9e430309fb909fc1dbcd7aedb3"
+  integrity sha512-X4ziX+cjlCYnZa+GB1ly3mmj44v2PeIld3tQVAxelY6AMrhHSjz6zsgsT6nt0+X5b7eZnvL/O7Q3pSSK2kF/+Q==
+
 eslint-plugin-prettier@^4.0.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"