Giter VIP home page Giter VIP logo

expo-boilerplate's Introduction

Expo Boilerplate

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


milva-bird


Expo Boilerplate Structure

src
 ├── assets
     ├── color
     ├── images
     └── localization
	├── components
	├── helpers
     └── storage
 ├── hooks
 ├── modules
     └── app
         ├── api
         ├── components
         ├── redux
         ├── services
         └── utils
 ├── providers
 ├── routers
 ├── 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 ✨

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.