Expo React Native Boilerplate 🚀

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
• Scalable Architecture – Organized and maintainable folder structure
• TypeScript Ready – Strongly-typed project for reliability

Project Directory

src
├── app                    # Entry point or global app setup
├── assets                 # Fonts, images, videos, etc.
│   ├── fonts
│   └── images
├── components             # Reusable UI components
├── config                 # App-wide configurations
│   ├── appConfig.ts
│   ├── dynamicDimension.ts
│   └── theme.ts
├── constants              # App constants and color definitions
│   ├── appConstants.ts
│   └── appColors.ts
├── hooks                  # Custom React hooks
│   ├── useColorScheme.ts
│   ├── useColorScheme.web.ts
│   ├── useLocalization.ts
│   └── useThemeColor.ts
├── localization           # i18n and translation logic
├── selector               # Redux selectors or custom selectors
│   └── selector.ts
├── service                # API services
│   ├── axiosInstance.ts
│   └── query
│       ├── baseQuery.ts
│       └── rtkQuery.ts
├── store                  # Redux or RTK store setup and middlewares
│   ├── apiErrorMiddleware.ts
│   └── store.ts
├── types                  # TypeScript types/interfaces
│   ├── ApiRequest.ts
│   └── ApiResponse.ts
├── utils                  # Utility/helper functions
│   └── common.ts
├── zustand                # Zustand stores (state management)
│   ├── apiErrorStore.ts
│   ├── appStore.ts
│   └── snackBarStore.ts

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

• Node.js (latest)
• Yarn (latest)

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

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.