React Native MVVM Clean Architecture

A React Native mobile application starter project implementing Clean Architecture with the MVVM (Model-View-ViewModel) pattern.

---

Project Overview

This project is built using React Native and follows a modular, scalable architecture to improve maintainability, testability, and separation of concerns.

• Clean Architecture: Layers separate concerns into data, domain, and presentation.
• MVVM Pattern: Presentation logic is managed through ViewModels that connect Views (Screens) with domain/business logic.
• TypeScript: Typed codebase for better developer experience and fewer runtime errors.
• Dependency Injection: Shared services and repositories are injected via a factory to promote loose coupling.

---

Current Features

• Authentication: Login, Logout and Session.
• View Profile.
• Supports multiple backend data sources:
  • Firebase
  • REST API
• Switch seamlessly between Local, Firebase or REST API implementations using dependency injection and repository factories.

---

Inspiration

This project architecture is inspired by the principles described in the book:

Clean Architecture: A Craftsman's Guide to Software Structure and Design
by Robert C. Martin (Uncle Bob)

---

Architecture Layers

1. Data Layer (/data)

• Handles data sources, DTOs (Data Transfer Objects), mappers, and repository implementations.
• Interacts with external systems such as REST APIs, Firebase, or local storage.
• Transforms data formats between external and domain models.

2. Domain Layer (/domain)

• Contains core business models like UserModel.
• Defines abstract repository interfaces.
• Hosts Use Cases (application/business rules) that orchestrate domain logic — currently a placeholder and should be fully implemented to encapsulate business workflows.

3. Presentation Layer (/presentations)

• Houses UI components including screens, styles, and ViewModels.
• ViewModels manage UI state and serve as an intermediary between Views and domain logic.
• Organized by feature modules (auth, map, notifications, products, profile, root, splash).

4. Shared (/shared)

• Contains app-wide configurations (app, Firebase, data sources).
• Provides dependency injection support (RepositoryFactory).
• Includes enums, helpers, hooks, and TypeScript types for reuse.

---

MVVM Architecture Diagram

Below is a diagram illustrating the MVVM pattern adapted in this project:

---

Getting Started

Prerequisites

• Node.js (v16 or higher)
• React Native CLI
• Xcode (for iOS development)
• Android Studio (for Android development)
• CocoaPods (for iOS dependencies)

Installation

1. Clone the repository:

   git clone [email protected]:zvhir3/react-native-mvvm.git
   cd react-native-mvvm

2. Install dependencies:

   npm install

3. Install iOS dependencies (iOS only):

   cd ios && pod install && cd ..

4. Environment Setup:

   cp .env.example .env

   Then edit the .env file with your configuration values.

Running the Application

For iOS:

npx react-native run-ios

For Android:

npx react-native run-android

For Metro bundler (if needed separately):

npx react-native start

---

Environment Configuration

The application uses environment variables for configuration. Make sure to set up your .env file with the following variables:

# API Configuration
API_BASE_URL=https://your-api-url.com
API_KEY=your-api-key

# Firebase Configuration (if using Firebase)
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_API_KEY=your-firebase-api-key
FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
FIREBASE_STORAGE_BUCKET=your-project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=123456789
FIREBASE_APP_ID=1:123456789:web:abcdef123456

# Data Source Selection
DATA_SOURCE=firebase # Options: 'local', 'firebase', 'api'

---

Troubleshooting

Common Issues

Metro bundler cache issues:

npx react-native start --reset-cache

iOS build issues:

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..

Android build issues:

cd android
./gradlew clean
cd ..

---

Room for Improvement

• Use Cases Implementation: Currently missing or minimal. Complete implementation of use cases will better encapsulate business rules and app logic.
• Unit Testing: Adding comprehensive tests for ViewModels, Use Cases, and Repositories would improve code quality and reliability.
• Error Handling: Implement comprehensive error handling and user feedback mechanisms.
• Offline Support: Add offline capabilities with data synchronization.
• Performance Optimization: Implement performance monitoring and optimization strategies.

---

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Feel free to contribute or suggest enhancements!