{"id":34694369,"url":"https://github.com/arielrvjr/natify","last_synced_at":"2026-01-29T03:13:10.701Z","repository":{"id":328836816,"uuid":"1057991128","full_name":"arielrvjr/natify","owner":"arielrvjr","description":"Clean native architecture for React Native using Ports \u0026 Adapters.","archived":false,"fork":false,"pushed_at":"2025-12-25T01:06:41.000Z","size":762,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-13T21:13:50.918Z","etag":null,"topics":["architecture","clean-architecture","dependency-injection","hexagonal","ports-and-adapters","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arielrvjr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-16T13:30:42.000Z","updated_at":"2025-12-25T01:04:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/arielrvjr/natify","commit_stats":null,"previous_names":["arielrvjr/navetify","arielrvjr/natify"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/arielrvjr/natify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielrvjr%2Fnatify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielrvjr%2Fnatify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielrvjr%2Fnatify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielrvjr%2Fnatify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arielrvjr","download_url":"https://codeload.github.com/arielrvjr/natify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielrvjr%2Fnatify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28861793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"online","status_checked_at":"2026-01-29T02:00:06.714Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["architecture","clean-architecture","dependency-injection","hexagonal","ports-and-adapters","react-native"],"created_at":"2025-12-24T22:29:18.235Z","updated_at":"2026-01-29T03:13:10.695Z","avatar_url":"https://github.com/arielrvjr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Natify\n\n**Natify** is a clean, modular architecture framework for React Native.\n\nIt decouples your business logic from native and third-party implementations\nusing **Ports \u0026 Adapters (Hexagonal Architecture)**.\n\nBuild faster. Refactor without fear. Swap implementations without touching your core.\n\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-blue.svg)](https://www.typescriptlang.org/)\n[![React Native](https://img.shields.io/badge/React%20Native-0.82+-61DAFB.svg)](https://reactnative.dev/)\n[![codecov](https://codecov.io/gh/arielrvjr/natify/branch/master/graph/badge.svg?token=ZB8A7SE5UD)](https://codecov.io/gh/arielrvjr/natify)\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)\n\n---\n\n## Table of Contents\n\n- [What is Natify?](#what-is-natify)\n- [Why Natify?](#why-natify)\n- [Architecture](#architecture)\n- [Key Features](#key-features)\n- [Integration Levels](#integration-levels)\n- [Quick Start](#quick-start)\n- [Use Cases](#use-cases)\n- [Available Capabilities](#available-capabilities)\n- [Comparison with Alternatives](#comparison-with-alternatives)\n- [Documentation](#documentation)\n- [Contributing](#contributing)\n\n---\n\n## What is Natify?\n\n**Natify** is a hexagonal architecture (Ports \u0026 Adapters) framework designed specifically for React Native. Its main goal is to **decouple business logic from native implementations**, enabling developers to build more maintainable, testable, and scalable applications.\n\nNatify implements **use cases** and **view models** to keep the UI layer clean and free of business logic, following Clean Architecture principles and separation of concerns.\n\n### The Problem It Solves\n\nIn traditional React Native, your business code is **directly coupled** to specific libraries:\n\n```typescript\n// Coupled code - hard to test and change\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport axios from 'axios';\n\nasync function login(email: string, password: string) {\n  // If you change from axios to fetch, you must rewrite all calls\n  const response = await axios.post('https://api.example.com/auth/login', {\n    email,\n    password,\n  });\n  // If you want to change to MMKV, you must search and replace in ALL code\n  await AsyncStorage.setItem('token', response.data.token);\n  \n  return response.data.user;\n}\n```\n\nWith Natify, you use **interfaces** and change implementations without touching your code:\n\n```typescript\n// Decoupled code - easy to test and change\nimport { useAdapter, HttpClientPort, StoragePort } from '@natify/core';\n\nfunction useLogin() {\n  const http = useAdapter\u003cHttpClientPort\u003e('http');\n  const storage = useAdapter\u003cStoragePort\u003e('storage');\n  \n  return async (email: string, password: string) =\u003e {\n    const response = await http.post('/auth/login', { email, password });\n  \n    await storage.setItem('token', response.data.token);\n  \n    // Changing from AsyncStorage to MMKV or from axios to fetch\n    // is just changing the adapter in App.tsx - this code does NOT change\n    return response.data.user;\n  };\n}\n```\n\n---\n\n## Why Natify?\n\nReact Native apps tend to couple business logic with libraries and native APIs.\n\nNatify introduces a clear architectural boundary:\n\n**UI → ViewModel → UseCase → Port → Adapter → Native**\n\nThis allows you to:\n- **Change implementations** without rewriting business logic\n- **Test easily** by mocking adapters\n- **Keep your architecture** clean and future-proof\n\n### For Teams and Projects\n\n| Scenario                          | Benefit                                    |\n| --------------------------------- | ------------------------------------------ |\n| **Large teams (3+ devs)**         | Clear architecture, easy onboarding       |\n| **Long-term projects**            | Maintainability and scalability            |\n| **Enterprise apps**               | Governance and control over capabilities   |\n| **Robust testing**                | Easy mocks, isolated tests                 |\n| **Library migration**             | Change implementations without breaking code |\n\n### Key Advantages\n\n#### 1. Simplified Testing\n\n```typescript\n// In tests, simply mock the adapter\nconst mockStorage = {\n  getItem: jest.fn(),\n  setItem: jest.fn(),\n};\n\n// Your business code is tested without native dependencies\nconst useCase = new LoginUseCase(mockStorage);\n```\n\n#### 2. Implementation Flexibility\n\n```typescript\n// Development: AsyncStorage (simpler)\nconst storage = new AsyncStorageAdapter();\n\n// Production: MMKV (30x faster)\nconst storage = new MMKVStorageAdapter();\n\n// Your business code does NOT change\n```\n\n#### 3. Governance and Control\n\n- **Typed interfaces** define what capabilities your app can use\n- **Centralized adapters** facilitate security audits\n- **Unified error system** for consistent handling\n\n#### 4. Scalable Architecture\n\n- **Module system**: Organize your app into independent modules\n- **Use cases**: Encapsulated and testable business logic\n- **View models**: Clear separation between UI and logic, clean and maintainable UI\n- **Dependency injection**: Automatic dependency management\n- **ActionBus**: Inter-module communication without coupling\n\n---\n\n## Architecture\n\nNatify follows the **Hexagonal (Ports \u0026 Adapters)** pattern combined with **Clean Architecture**:\n\n- **Ports (Interfaces)**: Contracts that define capabilities without implementation\n- **Adapters**: Concrete implementations of Ports using native libraries\n- **View Models** (Level 2): Handle UI state, loading, errors, and coordinate with use cases\n- **Use Cases** (Level 2): Contain pure business logic, orchestrate adapters\n\n### Principles\n\n- **Dependencies point toward the domain** (Clean Architecture)\n- **Layer separation**: UI → ViewModel → UseCase → Adapter\n- **Clean UI**: Components only render, no business logic\n- **Isolated use cases**: Use cases testable independently\n- **Implementation-agnostic interfaces**\n- **Testing without native dependencies**\n- **Change libraries without affecting business code**\n\n---\n\n## Key Features\n\n### Hexagonal Architecture\n\n- Ports \u0026 Adapters pattern fully implemented\n- Clear separation between business logic and infrastructure\n- Inverted dependencies (Dependency Inversion Principle)\n\n### Module System\n\n- Organize your app into independent modules (Auth, Products, Profile, etc.)\n- Each module explicitly declares its dependencies\n- Dynamic module loading/unloading (Hot Reload)\n\n### Dependency Injection\n\n- DI Container with support for singletons and factories\n- Automatic type inference for adapters\n- `useAdapter\u003cT\u003e()` and `useUseCase\u003cT\u003e()` hooks for typed access\n\n### ActionBus\n\n- Inter-module communication without direct coupling\n- Allows modules to communicate without knowing each other\n\n### Strong Typing\n\n- TypeScript throughout the framework\n- Typed interfaces for all Ports\n- Automatic type inference in adapters\n\n### Use Cases\n\n- Encapsulate pure business logic, independent of UI\n- Receive injected adapters, don't depend on concrete implementations\n- Highly testable without complex mocks\n- One Use Case = One business responsibility\n\n### View Models\n\n- Base hook (`useBaseViewModel`) for automatic loading and error handling\n- Coordinate between UI components and use cases\n- Maintain UI state (loading, error, data)\n- Reduce boilerplate in components\n- Consistent state across the app\n\n---\n\n## Integration Levels\n\nNatify offers **two integration levels** to adapt to your project's needs. You can integrate up to the level you want:\n\n### Level 1: Abstraction Only (NatifyProvider)\n\n**Ideal for:** Existing projects that only want to abstract native libraries without changing their architecture.\n\nThis level gives you access to **adapters and ports** (abstraction of implementations), but without the module system or full dependency injection.\n\n#### Level 1 Architecture\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    YOUR APPLICATION                          │\n│  ┌─────────────────────────────────────────────────────┐    │\n│  │              React Native Components                │    │\n│  │  ┌──────────────────────────────────────────────┐   │    │\n│  │  │  useAdapter\u003cPort\u003e() → Direct access         │   │    │\n│  │  └──────────────────────────────────────────────┘   │    │\n│  └─────────────────────────────────────────────────────┘    │\n│                            │                                 │\n│                            ▼                                 │\n│  ┌─────────────────────────────────────────────────────┐    │\n│  │            NatifyProvider (DI + Registry)          │    │\n│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  │    │\n│  │  │   PORTS     │  │   ERRORS    │  │   DI        │  │    │\n│  │  │ (Interfaces)│  │(NatifyError)│  │ Container  │  │    │\n│  │  └─────────────┘  └─────────────┘  └─────────────┘  │    │\n│  └─────────────────────────────────────────────────────┘    │\n│                            ▲                                 │\n│                            │ implements                      │\n│  ┌─────────────────────────┴───────────────────────────┐    │\n│  │               @natify/*                             │    │\n│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐             │    │\n│  │  │http-axios│ │storage-  │ │biometrics│             │    │\n│  │  │          │ │mmkv      │ │-rn       │             │    │\n│  │  └──────────┘ └──────────┘ └──────────┘             │    │\n│  └─────────────────────────────────────────────────────┘    │\n└─────────────────────────────────────────────────────────────┘\n\nIncludes: Ports, Errors, DI Container, Adapters\nDoes NOT include: Modules, Use Cases, View Models, ActionBus, Navigation\n```\n\n#### Level 1 Flow\n\n1. **Core** defines interfaces (Ports) - `HttpClientPort`, `StoragePort`, etc.\n2. **Adapters** implement interfaces using specific libraries\n3. **NatifyProvider** registers adapters in the DI container\n4. **UI Components** use `useAdapter\u003cPort\u003e()` to access adapters directly\n5. Business logic can be in components or custom functions/hooks\n\n```typescript\n// App.tsx\nimport { NatifyProvider, useAdapter } from '@natify/core';\nimport { AxiosHttpAdapter } from '@natify/http-axios';\nimport { MMKVStorageAdapter } from '@natify/storage-mmkv';\nimport { HttpClientPort, StoragePort } from '@natify/core';\n\nexport default function App() {\n  return (\n    \u003cNatifyProvider\n      adapters={{\n        http: new AxiosHttpAdapter('https://api.example.com'),\n        storage: new MMKVStorageAdapter(),\n      }}\n    \u003e\n      \u003cMyApp /\u003e\n    \u003c/NatifyProvider\u003e\n  );\n}\n\n// Use adapters in components\nfunction MyComponent() {\n  const http = useAdapter\u003cHttpClientPort\u003e('http');\n  const storage = useAdapter\u003cStoragePort\u003e('storage');\n  \n  const fetchData = async () =\u003e {\n    const response = await http.get('/users');\n    await storage.setItem('lastFetch', Date.now());\n  };\n  \n  return \u003cButton onPress={fetchData} title=\"Fetch\" /\u003e;\n}\n```\n\n**What you get:**\n\n- Native library abstraction (Ports \u0026 Adapters)\n- Typed adapter access with `useAdapter\u003cT\u003e()`\n- Change implementations without touching business code\n- Simplified testing with mocks\n\n**What it does NOT include:**\n\n- Module system\n- Dependency injection for use cases\n- Module Registry\n- ActionBus\n- Integrated navigation\n\n---\n\n### Level 2: Full Framework (NatifyApp)\n\n**Ideal for:** New projects or refactorings seeking complete architecture with modules, use cases, and view models.\n\nThis level includes **the entire framework**: module system, dependency injection, Module Registry, ActionBus, and integrated navigation.\n\n#### Level 2 Architecture\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    YOUR APPLICATION                          │\n│  ┌─────────────────────────────────────────────────────┐    │\n│  │              React Native Components                │    │\n│  │  ┌──────────────────────────────────────────────┐   │    │\n│  │  │  View Models → useBaseViewModel()             │   │    │\n│  │  │  useUseCase\u003cT\u003e() → Business cases           │   │    │\n│  │  │  useAdapter\u003cT\u003e() → Direct access           │   │    │\n│  │  └──────────────────────────────────────────────┘   │    │\n│  └─────────────────────────────────────────────────────┘    │\n│                            │                                 │\n│                            ▼                                 │\n│  ┌─────────────────────────────────────────────────────┐    │\n│  │              NatifyApp (Full Framework)            │    │\n│  │  ┌──────────────────────────────────────────────┐ │    │\n│  │  │  ModuleProvider → Module system              │ │    │\n│  │  │  ModuleRegistry → Dependency validation      │ │    │\n│  │  │  ActionBus → Inter-module communication      │ │    │\n│  │  └──────────────────────────────────────────────┘ │    │\n│  │  ┌──────────────────────────────────────────────┐ │    │\n│  │  │  NatifyProvider (DI + Registry)             │ │    │\n│  │  │  ┌─────────────┐  ┌─────────────┐           │ │    │\n│  │  │  │   PORTS     │  │   ERRORS    │           │ │    │\n│  │  │  │ (Interfaces)│  │(NatifyError)│           │ │    │\n│  │  │  └─────────────┘  └─────────────┘           │ │    │\n│  │  └──────────────────────────────────────────────┘ │    │\n│  │  ┌──────────────────────────────────────────────┐ │    │\n│  │  │  NavigationContainer + AppNavigator         │ │    │\n│  │  └──────────────────────────────────────────────┘ │    │\n│  └─────────────────────────────────────────────────────┘    │\n│                            ▲                                 │\n│                            │ implements                      │\n│  ┌─────────────────────────┴───────────────────────────┐    │\n│  │               @natify/*                             │    │\n│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐  │    │\n│  │  │http-axios│ │storage-  │ │biometrics│ │nav-    │  │    │\n│  │  │          │ │mmkv      │ │-rn       │ │react   │  │    │\n│  │  └──────────┘ └──────────┘ └──────────┘ └────────┘  │    │\n│  └─────────────────────────────────────────────────────┘    │\n└─────────────────────────────────────────────────────────────┘\n\nIncludes: EVERYTHING (Ports, Errors, DI, Adapters, Modules, Use Cases, \n         View Models, ActionBus, Navigation, Module Registry)\n```\n\n#### Level 2 Flow\n\n1. **Core** defines interfaces (Ports) - `HttpClientPort`, `StoragePort`, etc.\n2. **Adapters** implement interfaces using specific libraries\n3. **NatifyProvider** (internal) registers adapters in the DI container\n4. **ModuleProvider** loads and validates modules with their dependencies\n5. **Use Cases** encapsulate business logic and use injected adapters\n6. **View Models** coordinate between UI and use cases, handle UI state\n7. **UI Components** consume view models and remain free of business logic\n8. Components use `useUseCase\u003cT\u003e()` for business cases and `useAdapter\u003cPort\u003e()` for direct adapter access\n\n```typescript\n// App.tsx\nimport { NatifyApp } from '@natify/core';\nimport { AxiosHttpAdapter } from '@natify/http-axios';\nimport { MMKVStorageAdapter } from '@natify/storage-mmkv';\nimport { createReactNavigationAdapter } from '@natify/navigation-react';\n\n// Modules\nimport { AuthModule, ProductsModule } from './modules';\n\nconst adapters = {\n  http: new AxiosHttpAdapter('https://api.example.com'),\n  storage: new MMKVStorageAdapter(),\n  navigation: createReactNavigationAdapter(),\n};\n\nexport default function App() {\n  return (\n    \u003cNatifyApp\n      adapters={adapters}\n      modules={[AuthModule, ProductsModule]}\n      initialModule=\"auth\"\n    /\u003e\n  );\n}\n```\n\n**What you get:**\n\n- Everything from Level 1\n- Module system\n- Complete dependency injection\n- Use cases with `useUseCase\u003cT\u003e()`\n- Module Registry (dependency validation)\n- ActionBus (inter-module communication)\n- Integrated navigation\n- Hot reload of modules\n- View models with `useBaseViewModel()`\n\n---\n\n### Level Comparison\n\n| Feature                      | Level 1 (NatifyProvider) | Level 2 (NatifyApp) |\n| ---------------------------- | ------------------------ | ------------------- |\n| **Library abstraction**      | Yes                      | Yes                 |\n| **useAdapter `\u003cT\u003e`()**       | Yes                      | Yes                 |\n| **Module system**            | No                       | Yes                 |\n| **useUseCase `\u003cT\u003e`()**       | No                       | Yes                 |\n| **Module Registry**          | No                       | Yes                 |\n| **ActionBus**                | No                       | Yes                 |\n| **Integrated navigation**     | No                       | Yes                 |\n| **Hot reload modules**        | No                       | Yes                 |\n| **View Models**              | No                       | Yes                 |\n| **Complexity**               | Low                      | Medium-High          |\n| **Recommended for**          | Existing projects        | New projects        |\n\n---\n\n## Quick Start\n\n### Installation\n\n```bash\n# Install core\npnpm add @natify/core @natify/ui\n\n# Install required adapters\npnpm add @natify/http-axios\npnpm add @natify/storage-mmkv\npnpm add @natify/storage-keychain\npnpm add @natify/navigation-react\npnpm add @natify/biometrics-rn\npnpm add @natify/permissions-rn\npnpm add @natify/image-picker-rn\n```\n\n### Basic Setup (Level 1 - Abstraction Only)\n\nIf you prefer only abstraction without the full system:\n\n```typescript\n// App.tsx\nimport { NatifyProvider, useAdapter } from '@natify/core';\nimport { AxiosHttpAdapter } from '@natify/http-axios';\nimport { MMKVStorageAdapter } from '@natify/storage-mmkv';\nimport { HttpClientPort, StoragePort } from '@natify/core';\n\nexport default function App() {\n  return (\n    \u003cNatifyProvider\n      adapters={{\n        http: new AxiosHttpAdapter('https://api.example.com'),\n        storage: new MMKVStorageAdapter(),\n      }}\n    \u003e\n      \u003cMyApp /\u003e\n    \u003c/NatifyProvider\u003e\n  );\n}\n\n// Use in components\nfunction MyComponent() {\n  const http = useAdapter\u003cHttpClientPort\u003e('http');\n  const storage = useAdapter\u003cStoragePort\u003e('storage');\n  \n  // Your logic here\n}\n```\n\n### Basic Setup (Level 2 - Full Framework)\n\n```typescript\n// App.tsx\nimport React from 'react';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport { NatifyApp } from '@natify/core';\nimport { ThemeProvider } from '@natify/ui';\n\n// Adapters\nimport { AxiosHttpAdapter } from '@natify/http-axios';\nimport { MMKVStorageAdapter } from '@natify/storage-mmkv';\nimport { KeychainStorageAdapter } from '@natify/storage-keychain';\nimport { createReactNavigationAdapter } from '@natify/navigation-react';\n\n// Modules\nimport { AuthModule, ProductsModule } from './modules';\n\nconst adapters = {\n  http: new AxiosHttpAdapter('https://api.example.com'),\n  storage: new MMKVStorageAdapter(),\n  secureStorage: new KeychainStorageAdapter(),\n  navigation: createReactNavigationAdapter(),\n};\n\nexport default function App() {\n  return (\n    \u003cSafeAreaProvider\u003e\n      \u003cThemeProvider\u003e\n        \u003cNatifyApp\n          adapters={adapters}\n          modules={[AuthModule, ProductsModule]}\n          initialModule=\"auth\"\n        /\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/SafeAreaProvider\u003e\n  );\n}\n```\n\n### Create a Module (Level 2 Only)\n\n```typescript\n// modules/auth/index.ts\nimport { createModule } from '@natify/core';\nimport { LoginScreen } from './screens/LoginScreen';\nimport { LoginUseCase } from './usecases/LoginUseCase';\n\nexport const AuthModule = createModule('auth', 'Authentication')\n  .requires('http', 'secureStorage', 'navigation')\n  .screen({ name: 'Login', component: LoginScreen })\n  .useCase('login', (adapters) =\u003e \n    new LoginUseCase(adapters.http, adapters.secureStorage)\n  )\n  .initialRoute('Login')\n  .build();\n```\n\n### Create a View Model (Level 2 Only)\n\n```typescript\n// viewmodels/useLoginViewModel.ts\nimport { useBaseViewModel, useUseCase, useAdapter, NavigationPort } from '@natify/core';\nimport { useState, useCallback } from 'react';\nimport { LoginUseCase } from '../usecases/LoginUseCase';\n\nexport function useLoginViewModel() {\n  // Base state (loading, error)\n  const [baseState, { execute, clearError }] = useBaseViewModel();\n  \n  // Form state\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  // Injected use case (prefix: moduleId:useCaseKey)\n  const loginUseCase = useUseCase\u003cLoginUseCase\u003e('auth:login');\n  \n  // Navigation\n  const navigation = useAdapter\u003cNavigationPort\u003e('navigation');\n\n  const login = useCallback(async () =\u003e {\n    const result = await execute(() =\u003e\n      loginUseCase.execute({ email, password })\n    );\n\n    if (result) {\n      navigation.navigate('products/ProductList');\n    }\n  }, [email, password, loginUseCase, navigation, execute]);\n\n  return {\n    state: {\n      ...baseState,\n      email,\n      password,\n    },\n    actions: {\n      setEmail,\n      setPassword,\n      login,\n      clearError,\n    },\n  };\n}\n```\n\n### Use View Model in a Component (Clean UI)\n\n```typescript\n// screens/LoginScreen.tsx\nimport { View, TextInput, Button, ActivityIndicator } from 'react-native';\nimport { useLoginViewModel } from '../viewmodels/useLoginViewModel';\n\nexport function LoginScreen() {\n  // Component only consumes the view model, no business logic\n  const { state, actions } = useLoginViewModel();\n\n  return (\n    \u003cView\u003e\n      \u003cTextInput\n        value={state.email}\n        onChangeText={actions.setEmail}\n        placeholder=\"Email\"\n        editable={!state.isLoading}\n      /\u003e\n      \u003cTextInput\n        value={state.password}\n        onChangeText={actions.setPassword}\n        secureTextEntry\n        editable={!state.isLoading}\n      /\u003e\n  \n      {state.error \u0026\u0026 (\n        \u003cText style={{ color: 'red' }}\u003e{state.error.message}\u003c/Text\u003e\n      )}\n  \n      {state.isLoading ? (\n        \u003cActivityIndicator /\u003e\n      ) : (\n        \u003cButton title=\"Sign In\" onPress={actions.login} /\u003e\n      )}\n    \u003c/View\u003e\n  );\n}\n```\n\n---\n\n## Use Cases\n\n### Ideal For\n\n- **Enterprise applications** requiring long-term maintainability\n- **Large teams** needing structure and governance\n- **Complex projects** with multiple modules/features\n- **Apps requiring robust testing** (high test coverage)\n- **Projects that migrate libraries frequently** (e.g., changing from AsyncStorage to MMKV)\n- **Organizations needing control** over what native capabilities are used\n\n### Not Recommended For\n\n- **Quick prototypes** (unnecessary overhead)\n- **Very simple apps** (single screen, no complex logic)\n- **1-2 person teams** (may be excessive)\n- **Projects with very short timelines** (initial setup takes time)\n\n---\n\n## Available Capabilities\n\n### Implemented\n\n| Capability              | Adapter                              | Underlying Library                    |\n| ----------------------- | ------------------------------------ | ------------------------------------- |\n| **Analytics**           | `@natify/analytics-mixpanel`         | mixpanel-react-native                 |\n| **Biometrics**          | `@natify/biometrics-rn`              | react-native-biometrics               |\n| **Error Reporting**     | `@natify/error-reporting-sentry`     | @sentry/react-native                  |\n| **Feature Flags**       | `@natify/feature-flag-growthbook`     | @growthbook/growthbook-react          |\n| **File System**         | `@natify/file-system-rn`             | react-native-blob-util                |\n| **Geolocation**         | `@natify/geolocation-rn`             | @react-native-community/geolocation   |\n| **GraphQL**             | `@natify/graphql-apollo`             | @apollo/client                        |\n| **HTTP Client**         | `@natify/http-axios`                 | Axios                                 |\n| **Image Picker**        | `@natify/image-picker-rn`            | react-native-image-picker             |\n| **Navigation**           | `@natify/navigation-react`            | React Navigation                      |\n| **Permissions**         | `@natify/permissions-rn`             | react-native-permissions              |\n| **Push Notifications**  | `@natify/push-notification-firebase` | @react-native-firebase/messaging      |\n| **Push Notifications**  | `@natify/push-notification-notifee`  | @notifee/react-native                  |\n| **Secure Storage**      | `@natify/storage-keychain`            | react-native-keychain                 |\n| **State Management**    | `@natify/store-zustand`               | Zustand                               |\n| **Storage**             | `@natify/storage-async`               | AsyncStorage                          |\n| **Storage**             | `@natify/storage-mmkv`                | react-native-mmkv (30x faster)        |\n\n### Planned\n\n- Camera/Media (react-native-vision-camera)\n- Theme Engine (@shopify/restyle)\n- Toast/Alerts (react-native-toast-message)\n\n---\n\n## Comparison with Alternatives\n\n### Natify vs Expo\n\n| Aspect         | Expo                    | Natify                    |\n| -------------- | ----------------------- | ------------------------- |\n| **Purpose**    | Development platform    | Architecture framework    |\n| **Setup**      | Very fast               | Slower                    |\n| **Flexibility** | Limited (managed)       | High                      |\n| **Testing**    | Standard                | Easier                    |\n| **Architecture** | Doesn't impose        | Hexagonal                 |\n| **Build System** | EAS Build              | Manual                    |\n\n**Recommendation**: Use **Expo for tooling** (EAS Build, Updates) + **Natify for architecture**.\n\n### Natify vs Pure React Native\n\n| Aspect                  | Pure RN                      | Natify                        |\n| ----------------------- | ---------------------------- | ----------------------------- |\n| **Testing**             | Difficult (complex mocks)    | Easy (mockable adapters)      |\n| **Maintainability**     | Depends on team              | Clear structure               |\n| **Library migration**    | Search/replace everything    | Change adapter                |\n| **Onboarding**          | Depends on project           | Documented architecture       |\n| **Governance**          | Manual                       | Typed interfaces              |\n\n---\n\n## Documentation\n\n- **[Core Package](./packages/core/README.md)** - Architecture, modules, DI\n- **[UI Package](./packages/ui/README.md)** - Reusable components\n- **[Adapters](./packages/adapters/)** - Documentation for each adapter\n- **[Examples App](./apps/examples/)** - Complete demonstration app\n\n### Guides\n\nSee documentation in [`.cursorrules`](.cursorrules) for:\n\n- How to create a Port\n- How to create an Adapter\n- How to create a Module\n- Testing with Natify\n\n---\n\n## Tech Stack\n\n| Tool            | Version | Purpose                      |\n| --------------- | ------- | ---------------------------- |\n| **pnpm**        | 10.24.0 | Package manager (workspaces) |\n| **Turbo**       | 2.6.2   | Build system monorepo        |\n| **TypeScript**  | 5.9.3   | Static typing                |\n| **React Native** | 0.82+  | Mobile framework             |\n| **React**       | 19.1.1  | UI library                   |\n\n---\n\n## Complete Example\n\nSee the complete example app in [`apps/examples/`](./apps/examples/) which includes:\n\n- Authentication Module (Login, Register)\n- Products Module (List, Detail)\n- Profile Module (Settings, Biometrics, Permissions)\n- Integration of all adapters\n- View models with `useBaseViewModel`\n- Use cases with dependency injection\n- Navigation between modules\n\n```bash\n# Run example app\ncd apps/examples\npnpm install\npnpm ios    # or pnpm android\n```\n\n---\n\n## Contributing\n\nContributions are welcome. Please:\n\n1. Fork the repository\n2. Create a branch for your feature (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n### Contribution Guides\n\nSee [`.cursorrules`](.cursorrules) for:\n\n- How to create a new Adapter\n- How to create a new Port\n- Code and architecture conventions\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n## Support\n\n- [Complete Documentation](./packages/core/README.md)\n- [Example App](./apps/examples/)\n- [Report Issues](https://github.com/arielrvjr/natify/issues)\n\n---\n\n## Learn More\n\n### Key Concepts\n\n- **Hexagonal Architecture** - See architecture section in this README\n- **Ports \u0026 Adapters** - Interfaces defined in `packages/core/src/ports/`\n- **Module System** - See `packages/core/src/module/`\n- **Dependency Injection** - See `packages/core/src/di/`\n\n### Practical Examples\n\n- See [`apps/examples/`](./apps/examples/) for a complete app\n- Each adapter has its own README with examples in `packages/adapters/*/README.md`\n- See [`.cursorrules`](.cursorrules) for detailed guides\n\n---\n\n## Roadmap\n\n### Upcoming Capabilities\n\n- **Camera/Media** - react-native-vision-camera\n- **Location** - react-native-geolocation-service\n- **File System** - react-native-blob-util\n- **Theme Engine** - @shopify/restyle\n- **Toast/Alerts** - react-native-toast-message\n- **Crash Reporting** - Sentry integration\n- **Validation** - Zod schemas\n\n### Planned Improvements\n\n- Improved hot reload for modules\n- Metrics and telemetry\n- Improved testing utilities\n- Code generators (CLI)\n\n---\n\n## Compatibility\n\n### React Native\n\n- **0.82+** (Recommended)\n- Compatible with Expo (using Expo adapters)\n- Compatible with bare React Native\n\n### TypeScript\n\n- **5.9+** (Recommended)\n- Full typing throughout the framework\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made for the React Native community**\n\n**Star this repo** if you find it useful\n\n[Documentation](./packages/core/README.md) • [Examples](./apps/examples/) • [Issues](https://github.com/arielrvjr/natify/issues)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farielrvjr%2Fnatify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farielrvjr%2Fnatify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farielrvjr%2Fnatify/lists"}