Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/milvasoft/expo-boilerplate

Architectures, methods and much more that We use while developing mobile applications
https://github.com/milvasoft/expo-boilerplate

andorid expo expo-boilerplate expo-example expo-examples ios jest-tests mobile mobile-app react-native react-native-boilerplate react-native-example redux-toolkit

Last synced: 1 day ago
JSON representation

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

Awesome Lists containing this project

README

        

Expo Boilerplate

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


![milva-bird](https://user-images.githubusercontent.com/13048645/141461853-dbacad32-2150-4276-a848-45b81f2eeeb2.jpg)

- [Boilerplate Features](#Boilerplate-Features)
- [Structure](#Structure)
- [Assets](#Assets)
- [Components](#Components)
- [Helpers](#Helpers)
- [Hooks](#Hooks)
- [Localization](#Localization)
- [Modules](#Modules)
- [Network](#Network)
- [Providers](#Providers)
- [Routers](#Routers)
- [Store](#Store)
- [Styles](#Styles)
- [Utils](#Utils)
- [Run in Dev Environment](#Run)
- [Code Push](#Push)
- [Run Expo Go](#ExpoGo)
- [Expo Project Link](#ExpoProjectLink)



## Boilerplate Features:

* Routing
* Redux Toolkit
* Test
* Network
* Axios
* Theme
* Local Storage
* 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
├── enums
├── images
└── languages
├── helpers,
├── global
├── localization
├── router
├── storage
└── toast
├── components
├── ErrorComponent
├── ErrorComponent.test
├── index
├── style
└── type
├── GeneralActivityIndicator
├── NotFoundComponent
└── ToastMessage
├── hooks
├── useTheme
└── useThemedStyles
├── localization
├── en
└── tr
├── modules
└── app
├── api
├── components
├── redux
├── screens
├── services
├── types
└── utils
└── profile
├── api
├── components
├── redux
├── screens
├── services
├── types
└── utils
├── network
├── axiosInstance
└── baseQuery
├── providers
├── AppLoadingProvider
├── ErrorBoundary
├── Localization
├── NetworkInfoContainer
├── Notification
├── ThemeListener
├── ThemeProvider
└── Toast
├── routers
├── BottomNavigation
└── ProfileStack
├── store
├── rootReducer
└── store
├── styles
├── fonts
├── padding
├── theme
├── toast
└── typography
└── utils
├── Routes
└── ScreenOptions
```


# Assets

Assets used in the project.


Sample: color, images, svg etc.



# Components

Components Folder containing base components in the project.


Sample: ErrorComponent, 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.



# Localization
Localization Settings.


Sample: tr, en 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.)
- Screens (HomeScreen, ProfileScreen etc.)
- Redux (AppSlice, Store etc.)
- Utils (Helper Function etc. )
- API (API request, routes)
- Services


![abk-expo-boilerplate-modules](https://github.com/Milvasoft/milva-admin-generator/assets/32386753/b9cfff14-48d5-4e52-92af-a4d37700f2bd)


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


# Network
Network Folder containing base RTK and axiosInstance in the project.


# Providers
Providers Folder containing base providers and container in the project.


Sample: ThemeProvider, Localization etc.


# Routers
Everything about routing.


# Screens
Store Settings


# Styles
Base Style Settings


Sample: fonts, padding etc.


# Utils
Utils Folder containing base utils and container in the project.


Sample: Routes Type, ScreenOptions etc.


# Run in Dev Environment

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


# Code Push

- expo-update documentation link : https://docs.expo.dev/workflow/publishing/
- Run on `eas update`
- ✨ Don't forget to local expo-cli and node version check ✨


# Run Expo Go

![eas-update](https://github.com/Milvasoft/expo-boilerplate/assets/32386753/067203f8-ea57-4b91-a698-884938111152)


# Expo Project Link

```
https://expo.dev/%40aliburhankeskin/milvasoft-expo-boilerplate?serviceType=eas&distribution=expo-go&scheme=&channel=master&sdkVersion=50.0.0
```