Merge branch 'main' into feature/netinfo

Author: MatthysDev

challenges/ecosystem/02.md

@@ -42,30 +42,41 @@ Prettier is an opinionated code formatter. It enforces a consistent style by par
 
 ![Prettier format on save preview on VS Code](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/ecosystem/format-on-save.png)
 
-### Setup ESLint rules for React Native project
 
-- [ ] Install ESLint as a dev dependency.
+### Setup ESLint in your expo project
 
 ```console
-npm install --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
-# same as `yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser`
+npx expo lint
 ```
 
-- [ ] Create a `.eslintrc.js` file at the root of your project with the following content: (you can use `touch .eslintrc.js` from the terminal).
+You can lint your code manually by rerunning `npx expo lint` in your terminal.
 
-```javascript
-// .eslintrc.js
+- [ ] Setup ESLint in your project.
+- [ ] Run `npx expo lint` in your terminal.
 
+### Prettier
+
+For other packages managers
+```console
+npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier
+```
+
+For yarn
+```console
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
+```
+
+- [ ] add the dependencies to your project.
+
+- [ ] Update your `eslintrc.js` file to add the following rules:
+
+```javascript
 module.exports = {
-  env: {
-    node: true
+  extends: ["expo", "prettier"],
+  plugins: ["prettier"],
+  rules: {
+    "prettier/prettier": "warn",
   },
-  parser: "@typescript-eslint/parser",
-  root: true,
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-  ],
 };
 ```
 
@@ -113,7 +124,10 @@ We are making progress, but we are not done yet. We need to add rules for React
 - [ ] Install the following plugins
 
 ```console
-npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-simple-import-sort
+npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
+```
+```console
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react 
 ```
 
 - [ ] Update your `.eslintrc.js` file to add the following rules:
@@ -134,37 +148,15 @@ module.exports = {
     "plugin:react/jsx-runtime", // support for React 17 JSX
     "plugin:prettier/recommended" // Prettier recommended rules
   ],
-  plugins: ["react", "react-native", "simple-import-sort"], // add React and React Native plugins
+  plugins: ["react"], // add React and React Native plugins
   rules: {
     "prettier/prettier": [ // Prettier rules
       "warn",
       {
         usePrettierrc: true
       }
     ],
-    "react-native/no-color-literals": 2, // enforce color literals are not used
-    "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
-    "react-native/no-raw-text": 0, // detect raw text outside of Text component
-    "react-native/sort-styles": 2, // enforce style definitions are sorted
     "@typescript-eslint/no-unused-vars": "warn", // detect unused variables
-    "simple-import-sort/exports": "warn", // enforce sorting exports within module
-    "simple-import-sort/imports": [
-      "warn",
-      {
-        groups: [
-          // Side effect imports.
-          ["^\\u0000"],
-          // Packages `react` related packages come first.
-          ["^react", "^@?\\w"],
-          // Environment variables
-          ["^(@env)(/.*|$)"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-        ]
-      }
-    ]
   }
 };
 ```
@@ -185,11 +177,80 @@ module.exports = {
 }
 ```
 
-- [ ] Run `--fix` to automatically fix your errors.
 - [ ] if you encounter a difference between errors on your terminal and VSCode, reload VSCode with `⌘ + ⇧ + P` "Developer: Reload Window".
 
 ### Updating ESLint rules
 
+We want to add some rules to our ESLint configuration.
+
+```console
+npm install --dev eslint-plugin-react-native
+```
+```console
+yarn add -D eslint-plugin-react-native
+```
+
+- [ ] Update your `.eslintrc.js` file to add the following react-native rules:
+
+```json
+// .eslintrc.js
+
+{
+  plugins: ["react", "react-native"],
+  "rules": {
+    ...
+    "react-native/no-color-literals": 2, // enforce color literals are not used
+    "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
+    "react-native/no-raw-text": 0, // detect raw text outside of Text component
+    "react-native/sort-styles": 2, // enforce style definitions are sorted
+  },
+}
+```
+
+- [ ] Lint your code and push your changes to GitHub.
+
+We now want to sort our imports automatically. We can use the `simple-import-sort` plugin.
+
+```console
+npm install --dev eslint-plugin-simple-import-sort
+```
+```console
+yarn add -D eslint-plugin-simple-import-sort
+```
+
+- [ ] Update your `.eslintrc.js` file to add the following import rules:
+
+```json
+// .eslintrc.js
+
+{
+  "rules": {
+    plugins: ["react", "react-native", "eslint-plugin-simple-import-sort"],
+    ...
+    "simple-import-sort/exports": "warn", // enforce sorting exports within module
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        groups: [
+          // Side effect imports.
+          ["^\\u0000"],
+          // Packages `react` related packages come first.
+          ["^react", "^@?\\w"],
+          // Environment variables
+          ["^(@env)(/.*|$)"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+        ]
+      }
+    ],
+  },
+}
+```
+
+- [ ] Lint your code and push your changes to GitHub.
+
 We have no control on the api data we are pulling from SWAPI. Sometimes we want to update our rules to reflect differences.
 
 In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we want to disable this rule.
@@ -202,12 +263,14 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 {
   "rules": {
     ...
-    "camelcase": "off", // disable camelcase rule
+    camelcase: "off", // disable camelcase rule
     "@typescript-eslint/no-explicit-any": "warn" // detect usage of `any` type
   },
 }
 ```
 
+- [ ] Lint your code and push your changes to GitHub.
+
 ## 👽 Bonus
 
 You can share your VSCode settings with your team by adding a `.vscode` folder at the root of your project with the following content:

challenges/foundation/02.md

@@ -135,3 +135,5 @@ Create a better UX to show/hide the password:
 - [ ] Add a function to toggle the password visibility.
 
 ![password](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/foundation/password.gif)
+
+- [ ] Check [`Expo.new`](https://expo.dev/onboarding/hello) and try to create a new project. It will setup and deploy everything for you.

challenges/foundation/05.md

@@ -162,25 +162,4 @@ import { ScreenContainer } from "~/components/ScreenContainer";
 }
 ```
 
-- [ ] install `babel-plugin-root-import` with
 
-```console
-npm install babel-plugin-root-import
-```
-
-- [ ] Open your `babel.config.js` file and add plugins array section:
-
-```diff
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        "babel-plugin-root-import",
-        {
-          rootPathPrefix: "~/",
-          rootPathSuffix: "./src/",
-        },
-      ],
-    ],
-  };
-```

challenges/react-navigation/02.md

@@ -39,3 +39,10 @@ You can use these component to make it pretty:
 
 - [ ] Change the `screenOptions` to display your screen as a `modal`.
 - [ ] Add a "close modal" Button with an icon.
+- [ ] Add [`expo-dev-tools`](https://docs.expo.dev/debugging/devtools-plugins/#expo-dev-tools-plugins) to your project
+
+- [ ] Look with the `expo-dev-tools` the `route` and `params` of the screen.
+
+Start the project with and open the `expo-dev-tools` with `?` and `shift + m` in your terminal to open the menu and select `@dev-plugins/react-navigation`.
+
+Now you can navigate in your app and see the `route` and `params` of the screen.