Project structure

Our project structure focuses on separating concerns where each folder and sub-folder contain files with a specific role.

The following schema explains the role of each folder and what it contain:

src
|
|── __mock__ => This folder contains files related to mock tests.
|
|── .husky => This folder contains all githooks we want to run with the help of husky.
|
|── config  => In this folder, we include the configuration that our app needs,
|              such as jest setup and env setup.
|
|── constants => In this folder, we put all constants that we need inside
|                our application, like react-query-keys and accessibilityIds.
|
|── hooks     => In this folder, we put all hooks we may be using globally
|    |           inside our application, for example, useIsNetworkEnabled, useApiHeaders... etc.
|    |
|    ├── api  => In this folder, we put all hooks of our API calls.
|    └── ..other hooks
|
|── lib  => In this folder, we put the integration of other services, such as sentry,
|           google analytics... etc
|
|── navigation => This folder includes all kinds of navigation, such as
|                 drawer navigation, tab navigation, and stack navigation.
|
|── screens
|      └── screen1  => each screen contains multiple folders that contains specifically
|             |       the elements that belong to it.
|             |
|             ├── components
|             ├── __tests__
|             ├── hooks
|             └── index.tsx
|
|── scripts => In this folder, we put all scripts that we need to run, for example,
|               We have a script that automatically creates a new screen, `gen-screen.ts`
|
|── store  => In this folder, we put all reducers that we need to use for redux.
|
|── translation => In this folder, we put all files related to translation.
|
|── types => This folder contains all types that we want to declare.
|
└── ui
    ├── components => Here we put all common components that are used across the application
    ├── fonts => Fonts for our application
    ├── icons => Here we put all icons
    └── theme => Here we define our theme