🚀 React Native Boilerplate Template

A modern, production-ready React Native template that provides a solid foundation for your mobile app development. Built with industry best practices and the latest tools.

🛠️ Built With

⚡ Quick Start

Create a new React Native project using this template:

npx @react-native-community/cli init MyApp --template @mtopcu/rn-boilerplate

Table of Contents

• Features
• Installation
• Usage
• Project Structure
• Libraries
• Contributing

🎯 Features

• 🏗️ Modern Architecture: Built with Redux Toolkit and RTK Query
• 🧭 Navigation: React Navigation v6 with type safety
• 🎨 TypeScript: Full TypeScript support for better development experience
• 🧪 Testing: Jest and React Native Testing Library setup
• 📱 Cross-platform: iOS and Android support
• 🔧 Developer Tools: ESLint, Prettier, and pre-commit hooks
• 🚀 Production Ready: Optimized for deployment
• 📦 State Management: Redux Toolkit with async thunks
• 🌐 API Integration: RTK Query for efficient data fetching
• 🔒 Type Safety: Comprehensive TypeScript configuration

Installation

Prerequisites

Make sure you have the following tools installed on your system before running the project:

• Node.js
• Yarn (optional, npm can also be used)
• React Native CLI

Steps

1. Create a new React Native project using the following command:

npx @react-native-community/cli init MyApp --template @mtopcu/rn-boilerplate

2. Navigate to the project directory:

cd MyApp

3. Set up environment configuration:

cp .env-example .env

4. Update the .env file with your configuration values.

5. Start the Metro server:

npx react-native start

6. Run the project on an emulator or a physical device:

npx react-native run-android
# or
npx react-native run-ios

Usage

This boilerplate allows you to quickly add new features and extend the existing structure. The main file structure is described below:

Project Structure

src/
├── App.tsx
├── components/
│   └── index.ts
├── provider/
│   ├── ReduxProvider.tsx
│   └── index.ts
├── router/
│   ├── Router.tsx
│   ├── index.ts
│   └── Navigators/
│       ├── MainNavigator.tsx
│       └── index.ts
├── screens/
│   ├── HomeScreen/
│   │   ├── HomeScreen.tsx
│   │   ├── HomeScreen.test.ts
│   │   └── index.tsx
│   └── index.ts
├── services/
│   ├── api.ts
│   ├── baseQuery.ts
│   └── index.ts
├── store/
│   ├── store.ts
│   ├── index.ts
│   └── slices/
│       ├── authSlice.ts
│       └── index.ts
└── ...

📚 Libraries & Tools

Core Dependencies

• React Navigation - Type-safe navigation for React Native
• Redux Toolkit - Modern Redux state management
• RTK Query - Powerful data fetching and caching

Development Tools

• TypeScript - Static type checking for JavaScript
• ESLint - Code linting and formatting rules
• Prettier - Code formatting
• Jest - JavaScript testing framework
• React Native Testing Library - Simple testing utilities

Configuration

• React Native Config - Environment variable management
• Metro - JavaScript bundler for React Native
• Yarn - Package manager with workspaces support

API Configuration

The API configuration is managed through RTK Query and stored in the src/services/api.ts file. You can:

• Change the API base URL in your environment configuration
• Add new endpoints to the API slice
• Configure custom base queries in src/services/baseQuery.ts For more information, visit the RTK Query documentation.

Roadmap & Future Features

• 🔄 Redux Persist - State persistence for better user experience
• 📚 Storybook - Component development and testing environment
• 🧪 E2E Testing - End-to-end testing with Detox or Appium
• 🤖 Code Generation - Scripts to generate components, screens, and slices
• 🌙 Dark Mode - Theme switching support
• 🌍 Internationalization - Multi-language support
• 📱 Push Notifications - Firebase/native push notification setup

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have any improvements or new features to add.