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
• 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	 
 ├── 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.

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