🏗️Project Structure

Open your new project on your editor and you will see the following structure

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

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.