Expo Boilerplate
Architectures, methods and much more that We use while developing mobile applications
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
ornpm install
). - Run on both Android & iOS:
expo start
(oryarn start
). - Run on Android:
yarn android
(ornpm run android
). - Run on iOS:
yarn ios
(ornpm 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