Expo Boilerplate

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

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

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

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

Expo Project Link

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