Skip to content

Accelerate your mobile app development with our React Native Expo Boilerplate. It offers a robust foundation, integrating best practices, essential dependencies, and a well-organized structure for cross-platform applications. Kickstart your projects efficiently with React Native and Expo power.

Notifications You must be signed in to change notification settings

Alanmc021/react-native-expo-boilerplate

Repository files navigation

GREENIUM V2 APP MOTORISTA

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


milva-bird


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

modules+expo


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

Run Expo Go

expo-go


Expo Project Link

About

Accelerate your mobile app development with our React Native Expo Boilerplate. It offers a robust foundation, integrating best practices, essential dependencies, and a well-organized structure for cross-platform applications. Kickstart your projects efficiently with React Native and Expo power.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published