Skip to content

Expo Boilerplate built on RTK Query and Redux architecture to streamline React Native development. This boilerplate provides a scalable, maintainable, and production-ready setup for your mobile applications.

Notifications You must be signed in to change notification settings

piashcse/react-native-boilerplate

Repository files navigation

React Native [Expo] Boilerplate πŸš€

Expo React Native badge-Android badge-iOS Redux Toolkit GitHub license License

A well-structured Expo Boilerplate built on RTK Query and Redux architecture to streamline React Native development. This boilerplate provides a scalable, maintainable, and production-ready setup for your mobile applications.

✨ Features

  • RTK Query & Redux Toolkit – Efficient state management and API handling
  • Zustand Support – Lightweight alternative for global state management
  • Expo Router – File-based routing for a better navigation experience
  • Localization (i18n) – Multi-language support
  • Centralized Loading & Error Handling – Consistent error and loading state management across the app
  • Reusable Components – Well-structured UI components
  • Custom Hooks – Optimized hooks for state and effect management
  • TypeScript Ready – Strongly-typed project for reliability
  • Scalable Architecture – Organized and maintainable folder structure

Project Directory

src/
β”œβ”€β”€ app/               # Application entry points and main screens  
β”œβ”€β”€ components/        # Reusable UI components  
β”œβ”€β”€ config/            # Configuration files and environment settings  
β”œβ”€β”€ constants/         # Static values and constants used across the app  
β”œβ”€β”€ hooks/             # Custom React hooks for state and effect management  
β”œβ”€β”€ localization/      # Language translation and localization files  
β”‚   β”œβ”€β”€ locale-json/   # JSON files for different locales  
β”‚   β”œβ”€β”€ AppString/     # Centralized string constants for the app  
β”‚   └── I18nLocale/    # Internationalization (i18n) setup and utilities  
β”œβ”€β”€ redux/             # Redux state management  
β”‚   β”œβ”€β”€ query/         # API queries using Redux Toolkit Query  
β”‚   └── store/         # Redux store configuration and slices  
β”œβ”€β”€ selector/          # Selectors for retrieving and computing state  
β”œβ”€β”€ types/             # TypeScript type definitions and interfaces  
β”œβ”€β”€ utils/             # Utility functions and helper methods  
└── zustand/           # Zustand store for global state management  

Built With πŸ› 

  • Expo - An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
  • React-Native - React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.
  • Expo-Router - Expo Router is a file-based router for React Native and web applications. It allows you to manage navigation between screens in your app, allowing users to move seamlessly between different parts of your app's UI, using the same components on multiple platforms (Android, iOS, and web).
  • Expo-Font - Expo Font allows loading fonts from the web and using them in React Native components
  • Redux - Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.
  • RTK-Query - The official, opinionated, batteries-included toolset for efficient Redux developmen
  • Axios - Promise based HTTP client for the browser and node.js.
  • Redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development.
  • Netinfo - React Native Network Info API for Android, iOS, macOS, Windows & Web.
  • zustand - A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks.
  • react-native-async-storage - An asynchronous, persistent, key-value storage system for React Native.
  • react-native-paper - Material Design for React Native (Android & iOS).
  • react-native-vector-icons- Customizable Icons for React Native with support for image source and full styling.
  • patch-package - Fix broken node modules instantly
  • ESLint - ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
  • TypeScript - TypeScript is JavaScript with syntax for types.

Requirements

How to run

  • git clone git@github.com:piashcse/react-native-boilerplate.git
  • yarn install

Now, you can choose a command to run the project:

  • yarn ios to run on iOS simulator
  • yarn android to run on Android simulator

πŸ‘¨ Developed By

Mehedi Hassan Piash

Twitter Medium Linkedin Web Blog

License

Copyright 2023 piashcse (Mehedi Hassan Piash)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Expo Boilerplate built on RTK Query and Redux architecture to streamline React Native development. This boilerplate provides a scalable, maintainable, and production-ready setup for your mobile applications.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published