Add support for Flat Config (eslint v9) (#54297)

Summary:
Implements: #42996

Add support for Flat config (eslint v9) to `eslint-config-react-native`. To achieve this, I created `packages/eslint-config-react-native/flat.js` to export flat config as well as maintain legacy config for backward compatibility. I recognize we have had [the PR for supporting Flat config](#42996) already, but it looks stale and doesn't seem likely to move forward. That's why I created this PR.

I also updated `eslint-plugin-react-native` and `eslint-plugin-specs`  so that they comply with the current eslint plugin format.

## Changelog:

[GENERAL] [ADDED] - Add support for Flat Config (eslint v9)

Pull Request resolved: #54297

Test Plan:
1. Pull this branch into your local machine
2. `cd packages/eslint-config-react-native`
3.  `yarn link`
4. Clone https://github.com/pipopotamasu/rn-eslint-config-test in your local machine
5. `cd path/to/rn-eslint-config-test`
6. `yarn install`
7. `yarn link "react-native/eslint-config"`
8. `yarn lint`
9. Confirm that eslint rules from `react-native/eslint-config` are applied

<img width="1470" height="628" alt="image" src="https://github.com/user-attachments/assets/955fd655-8a79-4dd4-9031-e505d218d63a" />

Reviewed By: vzaidman

Differential Revision: D85851077

Pulled By: huntie

fbshipit-source-id: 9c78ecc4f5c3b10175a89417628b599735f95215

Author: pipopotamasu

package.json

@@ -81,7 +81,7 @@
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-redundant-undefined": "^0.4.0",
     "eslint-plugin-relay": "^1.8.3",
     "fb-dotslash": "0.5.8",

packages/eslint-config-react-native/README.md

@@ -12,6 +12,32 @@ yarn add --dev eslint prettier @react-native/eslint-config
 
 ## Usage
 
+### For ESLint 9+ (Flat Config)
+
+Add to your `eslint.config.js`:
+
+```javascript
+const reactNativeConfig = require('@react-native/eslint-config/flat');
+
+module.exports = [
+  ...reactNativeConfig,
+  // Your custom config here
+];
+```
+
+Or with ES modules:
+
+```javascript
+import reactNativeConfig from '@react-native/eslint-config/flat';
+
+export default [
+  ...reactNativeConfig,
+  // Your custom config here
+];
+```
+
+### For ESLint 8 (Legacy Config)
+
 Add to your eslint config (`.eslintrc`, or `eslintConfig` field in `package.json`):
 
 ```json

packages/eslint-config-react-native/flat.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @noflow
+ */
+
+const sharedConfig = require('./shared.js');
+const babelParser = require('@babel/eslint-parser');
+const reactNativePlugin = require('@react-native/eslint-plugin');
+const typescriptPlugin = require('@typescript-eslint/eslint-plugin');
+const typescriptParser = require('@typescript-eslint/parser');
+const prettierConfig = require('eslint-config-prettier');
+const eslintCommentsPlugin = require('eslint-plugin-eslint-comments');
+const ftFlowPlugin = require('eslint-plugin-ft-flow');
+const jestPlugin = require('eslint-plugin-jest');
+const reactPlugin = require('eslint-plugin-react');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+const reactNativeExternalPlugin = require('eslint-plugin-react-native');
+
+// Convert globals from legacy format (true/false) to flat config format ('readonly'/'writable')
+const convertGlobals = globals => {
+  const converted = {};
+  for (const [key, value] of Object.entries(globals)) {
+    converted[key] = value ? 'writable' : 'readonly';
+  }
+  return converted;
+};
+
+// Flat Config for ESLint 9+
+module.exports = [
+  // Apply prettier config first (to disable conflicting rules)
+  prettierConfig,
+
+  // Base configuration for all files
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: sharedConfig.parserOptions,
+      globals: convertGlobals(sharedConfig.globals),
+    },
+    plugins: {
+      'eslint-comments': eslintCommentsPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'react-native': reactNativeExternalPlugin,
+      '@react-native': reactNativePlugin,
+      jest: jestPlugin,
+    },
+    settings: sharedConfig.settings,
+    rules: sharedConfig.rules,
+  },
+
+  // JavaScript files with Babel parser and Flow
+  {
+    ...sharedConfig.overrides.flow,
+    files: ['**/*.js'],
+    languageOptions: {
+      parser: babelParser,
+    },
+    plugins: {
+      'ft-flow': ftFlowPlugin,
+    },
+  },
+
+  // JSX files with Babel parser
+  {
+    files: ['**/*.jsx'],
+    languageOptions: {
+      parser: babelParser,
+    },
+  },
+
+  // All JS/TS files - React Native specific rules
+  {
+    ...sharedConfig.overrides.reactNative,
+    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+  },
+
+  // TypeScript files
+  {
+    ...sharedConfig.overrides.typescript,
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescriptPlugin,
+    },
+  },
+
+  // Test files
+  {
+    ...sharedConfig.overrides.jest,
+    files: [
+      '**/*.{spec,test}.{js,ts,tsx}',
+      '**/__{mocks,tests}__/**/*.{js,ts,tsx}',
+    ],
+    languageOptions: {
+      globals: {
+        ...jestPlugin.environments.globals.globals,
+      },
+    },
+  },
+];