# Project Structure

{% code fullWidth="false" %}

```
src
├── assets
│   ├── icons
│   │   └── index.ts
│   ├── illustrations
│   │   └── index.ts
│   └── index.ts
├── components
│   ├── bottom-sheet.tsx
│   ├── button.tsx
│   └── ...
├── config
│   ├── config.ts
│   ├── nums.ts
│   └── ...
├── hooks
│   ├── use-padding-bottom.ts
│   └── index.ts
├── i18n
│   ├── id.json
│   ├── i18n.ts
│   └── ...
├── navigator
│   ├── stack-navigator.tsx
│   ├── stack-screens.ts
│   └── ...
├── screens
│   ├── home
│   │   ├── home-screen.tsx
│   │   └── style.ts
│   ├── login
│   │   ├── login-screen.tsx
│   │   └── style.ts
│   └── ...
├── services
│   ├── api
│   │   ├── api.ts
│   │   ├── app-base-query.ts
│   │   └── ...
│   ├── notification
│   │   ├── notification-press-handler.ts
│   │   ├── notification.ts
│   │   └── ...
├── store
│   ├── slices
│   │   ├── auth-slice.ts
│   │   └── index.ts
│   ├── root-reducer.ts
│   ├── store.ts
│   └── ...
├── styles
│   ├── colors.ts
│   ├── typography.ts
│   └── ...
├── types
│   ├── api-types.ts
│   ├── app-types.ts
│   └── ...
├── utils
│   ├── image-picker.ts
│   ├── storage.ts
│   └── ...
└── app.tsx

```

{% endcode %}

### assets

Folder for placing your images. We split this folder into two categories, icons and illustrations. You can place your icons (note: this is not for the app icon) in the `icons` folder, and your illustrations into `illustrations` folder, respectively.\
And don't forget to register your icon/illustration names in `index.ts` after you import them.

### components

Folder for placing your custom components that are used throughout the entire app.\
WRNS already include some of built-in components that are ready for you to use.

### config

Folder for placing your configurations, such as base-url or fixed number constants.

### hooks

Folder for placing your custom hook that are used throughout the entire app.\
WRNS already include a custom hook called `use-padding-bottom.ts` for the purpose of providing reliable bottom padding on a scrollable view.

### i18n

Contains translation files and default language config. Default language that used is `id` (Indonesian), but obviously you can change it to your preferred language. Using translation file is more preferred way even if you didn't plan to support multiple languages.

### navigator

Contains navigation configurations, stack screens, and more. You can add your new screen in the `stack-screens.ts`, screen params in `stack-params.ts` .

### screens

Contains all of your app screens. Place your screens inside this folder.

### services

Contains built-in APIs and notification service. WRNS use RTKQuery for managing APIs and data-fetching. For the notification we use Notifee from Invertase.

### store

Contains a (bit) boring boilerplate of RTK, along with some built-in slices. You can place your Redux slices inside the `slices` folder.

### styles

Contains all styling-related things, such as colors, typography, size, and commonly used RN styles

### types

Contains all the TS types you used throughout entire app. WRNS split types into three categories:

* api-types: Contains all types that are related to API only, such as response types and params.
* shared-types: Contains all the types that are related to both API and app, such as user model.
* and app-types: Contains all the types that are related to app only.

### utils

Contains useful utilities that can be used throughout the app. WRNS already have some built-in utils, such as image-picker for picking image from user gallery or camera, a custom Redux Persist storage using MMKV, and more.