A practical exploration of software design patterns implemented with React Native + TypeScript. This repository contains small, focused examples that demonstrate how common design patterns map to real-world mobile app code.
Table of Contents
Each pattern lives under src/patterns and includes a short README, implementation, and a small demo screen that can be opened from the app. The goal is to learn how patterns improve maintainability and testability in React Native.
Explore the patterns by category.
graph TD
A["React Native<br/>Design Patterns Playground"]
A --> B["Behavioral Patterns"]
A --> C["Creational Patterns"]
A --> D["Structural Patterns"]
B --> B1["Strategy"]
B --> B2["Observer"]
B --> B3["Chain of Responsibility"]
B --> B4["..."]
%% B --> B3["Command"]
%% B --> B4["State"]
%% B --> B5["Chain of Responsibility"]
C --> C1["..."]
%% C --> C1["Factory Method"]
%% C --> C2["Abstract Factory"]
%% C --> C3["Builder"]
%% C --> C4["Prototype"]
%% C --> C5["Singleton"]
%% D --> D1["Adapter"]
%% D --> D2["Bridge"]
%% D --> D3["Composite"]
D --> D4["Decorator"]
%% D --> D5["Facade"]
%% D --> D6["Proxy"]
D --> D1["..."]
Patterns that focus on communication between objects and how behavior can vary independently.
| Pattern | Example | Status |
|---|---|---|
| Strategy | Dynamic Payment Processing | ✅ Available |
| Observer | Authentication Event Notifications | ✅ Available |
| Chain of Responsibility | Notification Handling | ✅ Available |
| TBD | — | 🚧 Coming soon |
Patterns that focus on object creation and initialization.
| Pattern | Example | Status |
|---|
Patterns that focus on how objects and classes are composed.
| Pattern | Example | Status |
|---|---|---|
| Decorator | API Service Behavior | ✅ Available |
| TBD | — | 🚧 Coming soon |
(Use the app demo screens to try each pattern interactively.)
- Node.js (16+) and npm or Yarn
- Xcode for iOS development (macOS)
- Android Studio + Android SDK for Android
- CocoaPods (for iOS native dependencies)
- Install dependencies:
# npm
npm install
# or yarn
# yarn install- Start Metro:
npm start
# or
# yarn start- Run on Android:
npm run android- Run on iOS (macOS only):
bundle install
bundle exec pod install --project-directory=ios
npm run iossrc/
patterns/ # Pattern implementations + READMEs
strategy/ # Strategy pattern example + demo screen
demo/ # App demo screens
services/ # Example services used by demos
Common npm scripts (see package.json for exact commands):
- npm start — start Metro bundler
- npm run android — build & install on Android emulator/device
- npm run ios — build & run on iOS simulator (macOS)
- npm test — run tests
Contributions welcome. Please open issues for ideas or PRs with small, focused changes. Keep demos self-contained and add tests for new examples.
This project is licensed under the MIT License — see the LICENSE file for details.