chore(update): update react native (#444)

* chore(update): update react native

* chore(update): update react native

* chore(update): update deps

* feat: 🔖 update react native deps and improve code structure

* feat: 🎨 improve code structure

* chore: remove unused devDependencies

* remove cache

* feat: Add .yarnrc.yml and update yarn version

Add .yarnrc.yml file with nodeLinker and yarnPath configurations. Also, update the yarn version to 4.5.0.

* Update react-native version to 0.75.4

* chore: update yarn to v4

* chore: Update yarn to v4 and add Yarn v4 installation step

- Update the yarn version to v4 in the dependencies setup action.yml file
- Add a new step to install Yarn v4 using corepack in the dependencies setup action.yml file
- Update the lint and type-check commands in the boilerplate-checks.yml file to use the correct yarn scripts
- Add a new step to run Prettier code formatting in the boilerplate-checks.yml file

* chore: Update yarn installation command to use Yarn v4

* chore: Update yarn installation command to use Yarn v4 and setup Node.js

* chore: Update yarn installation command to use Yarn v4 and add Yarn v4 installation step

* chore: Update yarn installation command to use Yarn v4.5.0

* chore: Update dependencies and remove unused code

* chore: Refactor prompts.js and index.js

Refactor the prompts.js and index.js files in the template/plugins/compile-js directory.
The changes include fixing indentation and formatting issues, as well as updating variable names and adding comments for clarity.

* chore: Update TypeScript and ESLint versions in compile-js plugin

* chore: Update TypeScript and ESLint versions in compile-js plugin

* chore: Update TypeScript and ESLint versions in compile-js plugin

Refactor prompts.js and index.js

Update dependencies and remove unused code

Update yarn installation command to use Yarn v4.5.0

Remove unused declaration for '*.png' module

Add .vscode/launch.json

Add IconByVariant component to atoms

Add send.svg to theme/assets/icons

Update getAssetsContext.ts to handle .svg files

Add '*.svg' module declaration

Add language.svg to theme/assets/icons

Update metro.config.js to include .svg files

Update package.json dependencies

Add IconByVariant component

Update Example screen to use IconByVariant component

Update Example screen to use IconByVariant component for buttons

* Remove unused launch configuration file

* Refactor image and icon loading logic

* Refactor image and icon loading error handling

* Update .github/actions/deps-setup/action.yml

Author: JeremyDolle

.github/actions/deps-setup/action.yml

@@ -4,7 +4,6 @@ inputs:
   working_directory:
     description: 'The directory where the install command will be run'
     required: true
-    type: string
 runs:
   using: composite
   steps:
@@ -14,6 +13,7 @@ runs:
         node-version: '20.x'
         cache: 'yarn'
         cache-dependency-path: ${{ inputs.working_directory }}/yarn.lock
+
     - name: Install dependencies
       run: yarn install --frozen-lockfile
       shell: bash

.github/workflows/boilerplate-checks.yml

@@ -24,10 +24,13 @@ jobs:
         with:
           working_directory: ./template
       - name: Run Eslint
-        run: yarn lint
+        run: yarn lint:coventions
+        working-directory: ./template
+      - name: Run Prettier
+        run: yarn lint:code-format
         working-directory: ./template
       - name: Run Typescript check
-        run: yarn type-check
+        run: yarn lint:type-check
         working-directory: ./template
       - name: Run Jest tests
         run: yarn test

.github/workflows/boilerplate-release.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   publish:
-    if: "!github.event.release.prerelease"
+    if: !github.event.release.prerelease
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -19,3 +19,4 @@ package-lock.json
 
 node_modules
 template/js
+template/.eslintcache

.yarn/install-state.gz

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -22,16 +22,16 @@ If you love this boilerplate, give us a star, you will be a ray of sunshine in o
 
 Node 18 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.
 
-You also need to install the dependencies required by React Native.  
-Go to the [React Native environment setup](https://reactnative.dev/docs/environment-setup), then select `React Native CLI Quickstart` tab.  
+You also need to install the dependencies required by React Native.
+Go to the [React Native environment setup](https://reactnative.dev/docs/environment-setup), then select `React Native CLI Quickstart` tab.
 Follow instructions for your given `development OS` and `target OS`.
 
 ## Quick start
 
 To create a new project using the boilerplate simply run :
 
 ```
-npx react-native@latest init MyApp --template @thecodingmachine/react-native-boilerplate
+npx @react-native-community/cli@latest init MyApp --template @thecodingmachine/react-native-boilerplate
 ```
 
 Assuming you have all the requirements installed, you can run the project by running:

README.md

@@ -8,16 +8,16 @@ keywords: [getting started, installation, react native, react-native, react-nati
 
 ## Requirements
 
-To get started, you simply need to meet the same requirements as outlined in the 
-[React Native environment setup](https://reactnative.dev/docs/environment-setup) guide. 
+To get started, you simply need to meet the same requirements as outlined in the
+[React Native environment setup](https://reactnative.dev/docs/environment-setup) guide.
 Follow the installation instructions, and you'll be on your way!
 
 ## Using the boilerplate
 
 You can create a new project using the React Native CLI's init command and set the appropriate template by running:
 
 ```bash title=">_ terminal"
-npx react-native@latest init MyApp --template @thecodingmachine/react-native-boilerplate
+npx @react-native-community/cli@latest init MyApp --template @thecodingmachine/react-native-boilerplate
 ```
 
 During the installation process, you will encounter the following prompt:
@@ -26,7 +26,7 @@ During the installation process, you will encounter the following prompt:
 📘 Using typescript ? (Y/n)
 ```
 
-This prompt gives you the flexibility to choose whether you want to use TypeScript or not. 
+This prompt gives you the flexibility to choose whether you want to use TypeScript or not.
 If you choose not to use TypeScript, the project will be created without any TypeScript configuration.
 
 ## Running the project
@@ -35,5 +35,5 @@ Assuming you have all the requirements installed, you can run the project with t
 
 - Run `yarn start` to initiate the Metro bundler. Open a separate terminal for this.
 
-- Run `yarn <platform>` to launch the application on your desired platform. 
+- Run `yarn <platform>` to launch the application on your desired platform.
 Make sure to either start a simulator or connect a physical device for testing.

documentation/.yarn/install-state.gz

@@ -6,8 +6,8 @@ id: project-structure
 keywords: [project structure, structure, architecture]
 ---
 
-The overarching objective of this boilerplate's architecture is to ensure a clear separation of concerns and to harness 
-the full potential of React Native. 
+The overarching objective of this boilerplate's architecture is to ensure a clear separation of concerns and to harness
+the full potential of React Native.
 To achieve this, the project structure is thoughtfully organized into distinct sections, each serving a specific purpose.
 
 ## Specific Top-Level Boilerplate Folders
@@ -16,12 +16,11 @@ To achieve this, the project structure is thoughtfully organized into distinct s
 |--------------------|-------------------------------------------------------------------------------------------------------------------|
 | `src/components`   | Home to application components, following the atomic design methodology for organizing presentational components. |
 | `src/hooks`        | Custom hooks used throughout the application.                                                                     |
-| `src/navigators`   | Navigator components responsible for handling navigation.                                                         |
+| `src/navigations`  | Navigator components responsible for handling navigation.                                                         |
 | `src/screens`      | Screen components representing various app screens.                                                               |
-| `src/services` ️   | Houses data fetching and related services.                                                                        |
+| `src/services` ️    | Houses data fetching and related services.                                                                        |
 | `src/theme`        | Holds theme configuration for the application.                                                                    |
 | `src/translations` | Configuration related to language support.                                                                        |
-| `src/types`        | Custom type definitions for the project.                                                                          |
 
 ## Specific Top-Level Boilerplate Files
 
@@ -35,6 +34,6 @@ To achieve this, the project structure is thoughtfully organized into distinct s
 
 ## Atomic Design
 
-The `components` folder follows the [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) methodology. 
-This approach emphasizes modularity and reusability by breaking down elements into atomic components. 
+The `components` folder follows the [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) methodology.
+This approach emphasizes modularity and reusability by breaking down elements into atomic components.
 By doing so, development teams can create more consistent, scalable, and maintainable projects.