jeff2106 / 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

• Boilerplate Features
• Structure
  • Assets
  • Components
  • Helpers
  • Hooks
  • Modules
  • Providers
  • Routers
  • Screens
  • Utils
• Run in Dev Environment
• Code Push
• Run Expo Go
• Expo Project Link

Boilerplate Features:

• Routing
• Theme
• Network
• Local Storage
• Redux
• Provider example
• Notifications
• Dark Theme Support
• Multi Language Support
• Folder Structure
• TypeScript
• Eslint
• Font
• Splash
• Code Push
• Toast Message

Expo Boilerplate Structure

src
 ├── assets
     ├── animation
     ├── color
     ├── enums
     ├── images
     └── localization
 ├── helpers
     └── storage
 ├── components
 ├── hooks
 ├── modules
     └── app
         ├── api
         ├── components
         ├── redux
         ├── services
	 ├── types
         └── utils
     └── profile
         ├── api
         ├── components
         ├── redux
         ├── services
	 ├── types
         └── utils	 
 ├── providers
 ├── routers
     └── components
 ├── 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 ✨

Code Push

• expo-update documentation link : https://docs.expo.dev/workflow/publishing/
• Run on expo publish

Run Expo Go

Expo Project Link

https://expo.dev/@alikeskin/milvasoft