Migrate React-Native template to flat config

Author: aryaemami59

packages/react-native-template-redux-typescript/template/.eslintrc.json

@@ -0,0 +1,95 @@
+import js from "@eslint/js"
+import prettierConfig from "eslint-config-prettier/flat"
+import jestPlugin from "eslint-plugin-jest"
+import reactPlugin from "eslint-plugin-react"
+import reactHooksPlugin from "eslint-plugin-react-hooks"
+import globals from "globals"
+import { config, configs } from "typescript-eslint"
+
+const eslintConfig = config(
+  {
+    name: "global-ignores",
+    ignores: [
+      "**/*.snap",
+      "**/dist/",
+      "**/.yalc/",
+      "**/build/",
+      "**/temp/",
+      "**/.temp/",
+      "**/.tmp/",
+      "**/.yarn/",
+      "**/coverage/",
+    ],
+  },
+  {
+    name: `${js.meta.name}/recommended`,
+    ...js.configs.recommended,
+  },
+  configs.strictTypeChecked,
+  configs.stylisticTypeChecked,
+  {
+    name: `${jestPlugin.meta.name}/recommended`,
+    ...jestPlugin.configs["flat/recommended"],
+  },
+  {
+    name: "eslint-plugin-react/jsx-runtime",
+    ...reactPlugin.configs.flat["jsx-runtime"],
+  },
+  reactHooksPlugin.configs["recommended-latest"],
+  {
+    name: "main",
+    linterOptions: {
+      reportUnusedDisableDirectives: 2,
+    },
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.node,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      "no-undef": [0],
+      "no-restricted-imports": [
+        2,
+        {
+          paths: [
+            {
+              name: "react-redux",
+              importNames: ["useSelector", "useStore", "useDispatch"],
+              message:
+                "Please use pre-typed versions from `src/app/hooks.ts` instead.",
+            },
+          ],
+        },
+      ],
+      "@typescript-eslint/consistent-type-definitions": [2, "type"],
+      "@typescript-eslint/consistent-type-imports": [
+        2,
+        {
+          prefer: "type-imports",
+          fixStyle: "separate-type-imports",
+          disallowTypeAnnotations: true,
+        },
+      ],
+    },
+  },
+  {
+    name: "commonjs",
+    files: ["metro.config.js"],
+    languageOptions: {
+      sourceType: "commonjs",
+    },
+    rules: {
+      "@typescript-eslint/no-require-imports": [
+        0,
+        [{ allow: [], allowAsImport: false }],
+      ],
+    },
+  },
+
+  prettierConfig,
+)
+
+export default eslintConfig

packages/react-native-template-redux-typescript/template/eslint.config.mjs

@@ -24,6 +24,7 @@
     "@babel/core": "^7.26.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/runtime": "^7.26.9",
+    "@eslint/js": "^9.22.0",
     "@react-native-community/cli": "^17.0.0",
     "@react-native-community/cli-platform-android": "^17.0.0",
     "@react-native-community/cli-platform-ios": "^17.0.0",
@@ -38,9 +39,12 @@
     "@types/react": "^19.0.10",
     "@types/react-test-renderer": "^19.0.0",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.22.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
     "jest": "^29.7.0",
     "prettier": "^3.5.3",
     "react-test-renderer": "^19.0.0",

packages/react-native-template-redux-typescript/template/package.json

@@ -3,7 +3,7 @@
 // usage of typed hooks throughout the application.
 // We disable the ESLint rule here because this is the designated place
 // for importing and re-exporting the typed versions of hooks.
-/* eslint-disable @typescript-eslint/no-restricted-imports */
+/* eslint-disable no-restricted-imports */
 import { useEffect, useRef } from "react"
 import { Animated, useWindowDimensions } from "react-native"
 import { useDispatch, useSelector } from "react-redux"

packages/react-native-template-redux-typescript/template/src/app/hooks.ts

@@ -10,4 +10,4 @@ type AllColors = {
   black: string
 }
 
-export const TypedColors: AllColors = Colors
+export const TypedColors: AllColors = Colors satisfies AllColors as AllColors

packages/react-native-template-redux-typescript/template/src/constants/TypedColors.ts

@@ -75,7 +75,7 @@ export const Counter = (): JSX.Element => {
             style={styles.button}
             disabled={status !== "idle"}
             onPress={() => {
-              dispatch(incrementAsync(incrementValue))
+              void dispatch(incrementAsync(incrementValue))
             }}
           >
             <Text style={styles.buttonText}>Add Async</Text>

packages/react-native-template-redux-typescript/template/src/features/counter/Counter.tsx

@@ -25,7 +25,7 @@ export const quotesApiSlice = createApi({
     // and the expected query argument. If there is no argument, use `void`
     // for the argument type instead.
     getQuotes: build.query<QuotesApiResponse, number>({
-      query: (limit = 10) => `?limit=${limit}`,
+      query: (limit = 10) => `?limit=${limit.toString()}`,
       // `providesTags` determines which 'tag' is attached to the
       // cached data returned by the query.
       providesTags: (_result, _error, id) => [{ type: "Quotes", id }],