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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wich.gitbook.io/wichreactnativestarter/project-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.