docs: add react version documentation (#80)

* fix: correct table in readme

* doc: add documentation about React version

Author: clementDours

packages/eslint-plugin/.eslint-doc-generatorrc.js

@@ -5,8 +5,8 @@ const { prettier: prettierRC } = require("./package.json"); // or wherever your
 const config = {
   postprocess: (content, path) =>
     prettier.format(content, { ...prettierRC, parser: "markdown" }),
-  urlRuleDoc: path => `
-https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/${path}.md`,
+  urlRuleDoc: (path) =>
+    `https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/${path}.md`,
 };
 
 module.exports = config;

packages/eslint-plugin/README.md

@@ -41,6 +41,19 @@ Update your `.vscode/settings.json` by adding the directories of apps using the
 }
 ```
 
+### ⚠️ React version
+
+With the introduction of React 18, it's no longer necessary to import React in your JSX files. The ESLint plugin is configured for React version 18 and above, so you won't encounter any errors. However, TypeScript will generate an error if it isn't configured correctly. To resolve this, simply add `"jsx": "react-native"` to your `tsconfig.json` file.
+
+If your project is using a version of React that's below 18, iyou should upgrade to a newer version of React. If upgrading isn't an option, here's the situation: importing React in your JSX files remains mandatory, but ESLint won't flag any errors, even though it should. This is due to the plugin configuration; the recommended configuration extends the plugin react/jsx-runtime, which disables the following rules:
+
+- `'react/jsx-uses-react': "error"`
+- `'react/react-in-jsx-scope': "error"`
+
+These rules are crucial as they trigger an error when React is not in scope. Therefore, you'll need to include them in the rules section of your .eslintrc.js file to ensure an error is flagged whenever someone omits the import for React.
+
+Remember, the recommended solution is to upgrade to a newer version of React. This advice should only be disregarded in exceptional circumstances where upgrading React is not feasible.
+
 ## Shareable configurations
 
 This plugin exports multiple configurations that can be used in your `.eslintrc` config file:
@@ -74,15 +87,14 @@ This plugin exports some custom rules that you can optionally use in your projec
 🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\
 💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
-| Name                                        | Description | 💼  | 🔧  | 💡  |
-| :------------------------------------------ | :---------- | :-- | :-- | :-- |
-
-| [accessibility-props-require-accessible](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/accessibility-props-require-accessible.md) | Requires accessible prop when accessibility props are defined | ♿ | 🔧 | |
-| [do-not-use-role-on-image](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/do-not-use-role-on-image.md) | Disallow role prop on Image component | ♿ | 🔧 | |
-| [image-requires-accessible-prop](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/image-requires-accessible-prop.md) | Require accessible prop on image components | ♿ | 🔧 | 💡 |
-| [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect | | | |
-| [requires-accessibility-label](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/requires-accessibility-label.md) | Enforces label when component accessible | ♿ | | 💡 |
-| [requires-accessibility-role-when-accessible](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible | ♿ | | 💡 |
+| Name                                                                                                                                                                                            | Description                                                     | 💼  | 🔧  | 💡  |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :-- | :-- | :-- |
+| [accessibility-props-require-accessible](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/accessibility-props-require-accessible.md)           | Requires accessible prop when accessibility props are defined   | ♿  | 🔧  |     |
+| [do-not-use-role-on-image](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/do-not-use-role-on-image.md)                                       | Disallow role prop on Image component                           | ♿  | 🔧  |     |
+| [image-requires-accessible-prop](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/image-requires-accessible-prop.md)                           | Require accessible prop on image components                     | ♿  | 🔧  | 💡  |
+| [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md)                                               | Enforces the use of named functions inside a useEffect          |     |     |     |
+| [requires-accessibility-label](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/requires-accessibility-label.md)                               | Enforces label when component accessible                        | ♿  |     | 💡  |
+| [requires-accessibility-role-when-accessible](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible | ♿  |     | 💡  |
 
 <!-- end auto-generated rules list -->