theilgaz / expo-boilerplate

Architectures, methods and much more that We use while developing mobile applications

Expo Boilerplate

Architectures, methods and much more that We use while developing mobile applications

• Structure
  • Assets
  • Components
  • Helpers
  • Hooks
  • Modules
  • Providers
  • Routers
  • Screens
  • Utils
• Run in Dev Environment

Expo Boilerplate Structure

src
 ├── assets
     ├── color
     ├── images
     └── localization
	├── components
	├── helpers
     └── storage
 ├── hooks
 ├── modules
     └── app
         ├── api
         ├── components
         ├── redux
         ├── services
         └── utils
 ├── providers
 ├── routers
 ├── screens
     ├── stack-1
     ├── stack-2
     └── stack-3
 └── utils
     └── network

Assets

Assets used in the project.
Sample: color, images, svg etc.

Components

Components Folder containing base components in the project.
Sample: ToastMessage etc.

Helpers

Helpers Folder containing base functions in the project.
Sample: storage process, redux management from out of components etc.

Hooks

Hooks Folder containing base hooks in the project.
Sample: useTheme etc.

Modules

The Modules is a special folder. It allows you to manage your application more easily by dividing it into modules according to business logic.

Modules have their own files inside;

• Component (CustomButton, CustomLayout etc.)
• Redux (Actions, Reducers, Store etc.)
• Utils (Type etc. )
• API (API request, routes)
• Services

In this way, it provides a simpler and easier development process by searching the codes related to the Module only in that folder.

Providers

Providers Folder containing base providers and container in the project.
Sample: ThemeProvider, Localization etc.

Routers

Everything about routing.

Screens

The folder where the pages in the application are located. Stack-based grouping simplifies management.
Sample: ProfileStack { Profile, Post, Settings } etc.

Utils

Utils Folder containing base utils and container in the project.
Sample: Routes Type, Network etc.

Run in Dev Environment

• Setting up the development environment: https://reactnative.dev/docs/environment-setup.
• Install dependencies: expo install ( yarn install or npm install).
• Run on both Android & iOS: expo start (or yarn start).
• Run on Android: yarn android (or npm run android).
• Run on iOS: yarn ios (or npm run ios).
• ✨ Don't forget to enable eslint ✨