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

.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

.yarnrc.yml

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

README.md

@@ -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:

documentation/docs/02-Installation.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/docs/03-Project Structure.md

@@ -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.

documentation/docs/04-Guides/01-Navigate.md

@@ -6,41 +6,41 @@ id: navigate
 keywords: [navigation, navigate, react-navigation]
 ---
 
-All navigation within the app is accomplished using [React Navigation](https://reactnavigation.org/). 
-We adhere to the default navigation options without any overrides, custom navigators, or special configurations. 
-This approach allows us to stay aligned with the latest releases of React Navigation, ensuring that we can swiftly adopt 
+All navigation within the app is accomplished using [React Navigation](https://reactnavigation.org/).
+We adhere to the default navigation options without any overrides, custom navigators, or special configurations.
+This approach allows us to stay aligned with the latest releases of React Navigation, ensuring that we can swiftly adopt
 any new features and improvements.
 
 ## Navigation structure
 
-All navigation-related configurations and navigators are neatly organized within the `src/navigators` folder. Here's a brief overview:
+All navigation-related configurations and navigators are neatly organized within the `src/navigations` folder. Here's a brief overview:
 
 ### Root file (`Application.{js, tsx}`)
 
 This serves as the root navigator, which is responsible for handling the initial navigation of the application.
 It's a simple stack navigator that includes the [`Startup`](/docs/data-fetching#fetching-data-at-startup) screen and an Example screen.
 
-The workflow is designed so that when the application launches, the user is initially presented with the `Startup` screen. 
-This screen takes on the responsibility of loading essential application data, such as user profiles and settings. 
+The workflow is designed so that when the application launches, the user is initially presented with the `Startup` screen.
+This screen takes on the responsibility of loading essential application data, such as user profiles and settings.
 Once this data is loaded, the `Startup` screen facilitates navigation to the `Example` screen.
 
 As your application evolves, you have the flexibility to extend this file by adding more screens and navigators.
 
 :::note Not a fan of the structure ?
-Please note that this navigation structure is intentionally kept simple, providing you with a foundational structure that you can build upon. 
+Please note that this navigation structure is intentionally kept simple, providing you with a foundational structure that you can build upon.
 You can either add your own navigators or, if you prefer, replace the existing structure with your own custom navigation.
 :::
 
 ## Using typescript
 
-It's crucial not to overlook the creation of types for your navigation parameters. This practice helps prevent errors and enhances autocompletion. 
-You can define these types in the `@types/navigation.ts` file.
+It's crucial not to overlook the creation of types for your navigation parameters. This practice helps prevent errors and enhances autocompletion.
+You can define these types in the `@/navigations/types.ts` file.
 
 For more in-depth information on this topic, please refer to the [React Navigation documentation](https://reactnavigation.org/docs/typescript/).
 
 ## Advanced usage
 
-To gain a deeper understanding of the various navigators and their usage in React Navigation, 
-We recommend following the [React Navigation documentation's "Getting Started" section](https://reactnavigation.org/docs/getting-started). 
-This resource provides comprehensive information and examples that will help you become proficient in using different 
+To gain a deeper understanding of the various navigators and their usage in React Navigation,
+We recommend following the [React Navigation documentation's "Getting Started" section](https://reactnavigation.org/docs/getting-started).
+This resource provides comprehensive information and examples that will help you become proficient in using different
 navigation options in your React Native application.

documentation/docs/04-Guides/02-Data Fetching.md

@@ -6,29 +6,29 @@ id: data-fetching
 keywords: [data fetching, react query, tanstack query, react-query, tanstack-query]
 ---
 
-Indeed, in the realm of React Native and React development, there are several valuable libraries that can significantly 
+Indeed, in the realm of React Native and React development, there are several valuable libraries that can significantly
 simplify data management tasks. One such library is TanStack Query, which has gained popularity for its ability to streamline
-data fetching, caching, error handling, and more. It's an excellent choice for integrating into this boilerplate, as it can 
+data fetching, caching, error handling, and more. It's an excellent choice for integrating into this boilerplate, as it can
 greatly enhance the efficiency and reliability of data management in your application.
 
 ## Fetching Data at Startup
 
-This boilerplate offers a convenient method for fetching data before presenting the application content to the user. 
-This capability is made possible through the [navigation structure](/docs/navigate#navigation-structure) of the initial 
+This boilerplate offers a convenient method for fetching data before presenting the application content to the user.
+This capability is made possible through the [navigation structure](/docs/navigate#navigation-structure) of the initial
 setup and the inclusion of the `Startup` screen.
 
-The `Startup` screen takes on the role of being the very first screen shown to the user upon launching the application. 
-It serves as the entry point where essential data can be fetched and prepared before the user interacts with the app's content. 
+The `Startup` screen takes on the role of being the very first screen shown to the user upon launching the application.
+It serves as the entry point where essential data can be fetched and prepared before the user interacts with the app's content.
 This ensures a smoother and more responsive user experience.
 
-```tsx title="src/screens/Startup/Startup.tsx" 
+```tsx title="src/screens/Startup/Startup.tsx"
   // highlight-next-line
 import { useQuery } from '@tanstack/react-query';
 
 const Startup = ({ navigation }: ApplicationScreenProps) => {
     const { layout, gutters, fonts } = useTheme();
-    const { t } = useTranslation(['startup']);
-    
+    const { t } = useTranslation();
+
     // highlight-start
     const { isSuccess, isFetching, isError } = useQuery({
         queryKey: ['startup'],
@@ -38,7 +38,7 @@ const Startup = ({ navigation }: ApplicationScreenProps) => {
         },
     });
     // highlight-end
-    
+
     useEffect(() => {
         navigation.reset({
             index: 0,
@@ -54,36 +54,34 @@ const Startup = ({ navigation }: ApplicationScreenProps) => {
 
 The `useQuery` hook is employed for data fetching. Now, let's explore how to formulate the request.
 
-Consider a scenario where we wish to retrieve application settings from an API before the user accesses the application's content. 
+Consider a scenario where we wish to retrieve application settings from an API before the user accesses the application's content.
 To achieve this, we will create a service responsible for fetching this data.
 
-Within the `services` folder, create a file named `startup/fetchSettings.ts`, and include the following code:
-
-```ts title="src/services/startup/fetchSettings.ts"
+```ts
 import { instance } from '@/services/instance';
 
 export default async () => instance.get(`/settings`);
 ```
 
-The `instance` is an Axios instance that comes pre-configured in the boilerplate.
+The `instance` is an http client instance that comes pre-configured in the boilerplate.
 
 Next, we will use the `fetchSettings` service within the `Startup` screen.
 
-```tsx title="src/screens/Startup/Startup.tsx" 
+```tsx title="src/screens/Startup/Startup.tsx"
 import { useQuery } from '@tanstack/react-query';
 // highlight-next-line
-import fetchSettings from '@/services/startup/fetchSettings';
+import fetchSettings from '@/folder/fetchSettings';
 
 const Startup = ({ navigation }: ApplicationScreenProps) => {
     const { layout, gutters, fonts } = useTheme();
     const { t } = useTranslation(['startup']);
-    
+
     const { isSuccess, isFetching, isError } = useQuery({
         queryKey: ['startup'],
         // highlight-next-line
         queryFn: fetchSettings,
     });
-    
+
     useEffect(() => {
         navigation.reset({
             index: 0,
@@ -99,5 +97,5 @@ const Startup = ({ navigation }: ApplicationScreenProps) => {
 
 ## Advanced usage
 
-Since we've utilized no additional or custom configuration, for further information, 
+Since we've utilized no additional or custom configuration, for further information,
 you should refer to the official documentation of the [library](https://react-query.tanstack.com/).

documentation/docs/04-Guides/03-I18n.md

@@ -6,32 +6,32 @@ id: internationalization
 keywords: [i18n, internationalization, translation, localization, i18next, react-i18next]
 ---
 
-As mentioned earlier, the boilerplate places a strong emphasis on maintaining a clean separation of concerns. 
-This is particularly important when it comes to organizing the textual content within your application, as it facilitates 
-the process of translating the application into different languages. 
+As mentioned earlier, the boilerplate places a strong emphasis on maintaining a clean separation of concerns.
+This is particularly important when it comes to organizing the textual content within your application, as it facilitates
+the process of translating the application into different languages.
 The boilerplate offers a structured solution for this separation while also providing a translation tool.
 
-To achieve this, the boilerplate leverages the react-i18next library. This library streamlines the task of translating 
-the content within a React application, making it straightforward to switch between different languages 
+To achieve this, the boilerplate leverages the react-i18next library. This library streamlines the task of translating
+the content within a React application, making it straightforward to switch between different languages
 within the application's interface.
 
 ## Translation files structure
 
-All the translations are situated in the `src/translations` folder. 
-Within this folder, you'll find subfolders for each language. Each language-specific subfolder contains translation files.
+All the translations are situated in the `src/translations` folder.
+Within this folder, you'll find one file for each language.
 
-These translation files are loaded into the i18n instance, which is located in the `src/translations/index.ts` file. 
-This setup centralizes and manages the translation resources for your application, making it easier to maintain 
+These translation files are loaded into the i18n instance, which is located in the `src/translations/index.ts` file.
+This setup centralizes and manages the translation resources for your application, making it easier to maintain
 and switch between different languages as needed.
 
 ## Going further
 
-As always, we adhere to community best practices rather than custom patterns. 
-If you're interested in delving deeper into the topic of internationalization, 
-We recommend exploring the [react-i18next documentation](https://react.i18next.com/). 
+As always, we adhere to community best practices rather than custom patterns.
+If you're interested in delving deeper into the topic of internationalization,
+We recommend exploring the [react-i18next documentation](https://react.i18next.com/).
 It provides comprehensive information and guidance on effectively implementing internationalization in your React application.
 
 :::info Good to know
-The boilerplate incorporates an Example screen that serves as a demonstration of how to use the i18n library, 
+The boilerplate incorporates an Example screen that serves as a demonstration of how to use the i18n library,
 complete with a button for changing the language.
-::: 
+:::

documentation/package.json

@@ -26,9 +26,9 @@
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "3.1.1",
-    "@docusaurus/types": "3.0.0",
     "@docusaurus/module-type-aliases": "3.1.1",
     "@docusaurus/tsconfig": "3.0.0",
+    "@docusaurus/types": "3.0.0",
     "@types/react": "^18.2.29",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",