{"id":47844718,"url":"https://github.com/quinnjr/angular-platform-mobile","last_synced_at":"2026-04-03T21:08:24.731Z","repository":{"id":331389461,"uuid":"1126439911","full_name":"quinnjr/angular-platform-mobile","owner":"quinnjr","description":"Build native iOS and Android apps with Angular - React Native-like framework","archived":false,"fork":false,"pushed_at":"2026-01-03T18:15:22.000Z","size":1140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-07T10:58:02.980Z","etag":null,"topics":["android","angular","cross-platform","ios","mobile","native","react-native-alternative","typescript"],"latest_commit_sha":null,"homepage":"https://angular-platform-mobile.dev","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/quinnjr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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":"AGENTS.md","dco":null,"cla":null},"funding":{"patreon":"PegasusHeavyIndustries"}},"created_at":"2026-01-01T23:10:03.000Z","updated_at":"2026-01-03T18:15:18.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/quinnjr/angular-platform-mobile","commit_stats":null,"previous_names":["quinnjr/angular-platform-mobile"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/quinnjr/angular-platform-mobile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Fangular-platform-mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Fangular-platform-mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Fangular-platform-mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Fangular-platform-mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quinnjr","download_url":"https://codeload.github.com/quinnjr/angular-platform-mobile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Fangular-platform-mobile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31377579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T17:53:18.093Z","status":"ssl_error","status_checked_at":"2026-04-03T17:53:17.617Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["android","angular","cross-platform","ios","mobile","native","react-native-alternative","typescript"],"created_at":"2026-04-03T21:08:23.766Z","updated_at":"2026-04-03T21:08:24.726Z","avatar_url":"https://github.com/quinnjr.png","language":"TypeScript","funding_links":["https://patreon.com/PegasusHeavyIndustries","https://www.patreon.com/c/PegasusHeavyIndustries?vanity=user"],"categories":[],"sub_categories":[],"readme":"# Angular Platform Mobile\n\n\u003e Build native iOS and Android apps using Angular\n\n[![npm version](https://img.shields.io/npm/v/@pegasusheavy/angular-platform-mobile.svg)](https://www.npmjs.com/package/@pegasusheavy/angular-platform-mobile)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Angular](https://img.shields.io/badge/Angular-18+-dd0031.svg)](https://angular.io)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.3+-3178c6.svg)](https://www.typescriptlang.org)\n\n**Copyright © 2026 Pegasus Heavy Industries LLC**\n\n---\n\n## Overview\n\nAngular Platform Mobile enables you to build native iOS and Android applications using Angular. Similar to React Native, this platform provides a bridge between Angular components and native mobile views, allowing you to write your UI logic in TypeScript while rendering actual native components.\n\n## ✨ Features\n\n- 🚀 **Native Performance** - Renders actual native views, not web views\n- 📱 **Cross-Platform** - Single codebase for iOS and Android\n- 🎨 **Familiar Angular** - Use Angular components, services, and dependency injection\n- 🔄 **Hot Reload** - Fast development with hot reload support\n- 🎯 **TypeScript** - Full TypeScript support with strict type checking\n- 📦 **Angular 18+** - Supports standalone components and signals\n- ⚡ **Optimized** - Built-in performance optimizations (style caching, easing LUTs)\n- 🛡️ **Type-Safe** - No `any` types - fully typed codebase\n\n## 📦 Installation\n\n```bash\n# Using pnpm (recommended)\npnpm add @pegasusheavy/angular-platform-mobile\n\n# Using npm\nnpm install @pegasusheavy/angular-platform-mobile\n\n# Using yarn\nyarn add @pegasusheavy/angular-platform-mobile\n```\n\n## 🚀 Quick Start\n\n### 1. Initialize a new project\n\n```bash\nnpx ng-mobile init my-app --platform both\ncd my-app\n```\n\n### 2. Create your Angular app\n\n```typescript\n// src/app/app.component.ts\nimport { Component } from '@angular/core';\nimport { ViewComponent, TextComponent, ButtonComponent } from '@pegasusheavy/angular-platform-mobile';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [ViewComponent, TextComponent, ButtonComponent],\n  template: `\n    \u003cmobile-view [style]=\"containerStyle\"\u003e\n      \u003cmobile-text [style]=\"titleStyle\"\u003eWelcome to Angular Mobile!\u003c/mobile-text\u003e\n      \u003cmobile-button\n        title=\"Get Started\"\n        color=\"#007AFF\"\n        (press)=\"onPress()\"\u003e\n      \u003c/mobile-button\u003e\n    \u003c/mobile-view\u003e\n  `\n})\nexport class AppComponent {\n  containerStyle = {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#ffffff',\n  };\n\n  titleStyle = {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 20,\n  };\n\n  onPress() {\n    console.log('Button pressed!');\n  }\n}\n```\n\n### 3. Bootstrap the app\n\n```typescript\n// src/main.ts\nimport { bootstrapMobileApplication } from '@pegasusheavy/angular-platform-mobile';\nimport { AppComponent } from './app/app.component';\n\nbootstrapMobileApplication(AppComponent, {\n  config: {\n    debug: true,\n    appId: 'com.mycompany.myapp',\n  },\n}).catch(err =\u003e console.error(err));\n```\n\n### 4. Run on device\n\n```bash\n# Run on Android\nnpx ng-mobile run android\n\n# Run on iOS\nnpx ng-mobile run ios\n```\n\n## 📱 Components\n\n### Core Components\n\n| Component | iOS | Android | Description |\n|-----------|-----|---------|-------------|\n| `\u003cmobile-view\u003e` | UIView | ViewGroup | Basic container view |\n| `\u003cmobile-text\u003e` | UILabel | TextView | Text display |\n| `\u003cmobile-image\u003e` | UIImageView | ImageView | Image display |\n| `\u003cmobile-scroll-view\u003e` | UIScrollView | ScrollView | Scrollable container |\n| `\u003cmobile-text-input\u003e` | UITextField | EditText | Text input field |\n| `\u003cmobile-button\u003e` | UIButton | Button | Native button |\n| `\u003cmobile-touchable\u003e` | - | - | Touchable wrapper |\n| `\u003cmobile-flat-list\u003e` | UITableView | RecyclerView | Virtualized list |\n| `\u003cmobile-modal\u003e` | UIViewController | Dialog | Modal dialog |\n| `\u003cmobile-switch\u003e` | UISwitch | Switch | Toggle switch |\n| `\u003cmobile-slider\u003e` | UISlider | SeekBar | Slider control |\n| `\u003cmobile-webview\u003e` | WKWebView | WebView | Web content |\n| `\u003cmobile-safe-area-view\u003e` | - | - | Safe area container |\n| `\u003cmobile-status-bar\u003e` | - | - | Status bar control |\n| `\u003cmobile-activity-indicator\u003e` | UIActivityIndicatorView | ProgressBar | Loading spinner |\n\n### Example Usage\n\n```typescript\nimport { Component } from '@angular/core';\nimport {\n  ViewComponent,\n  TextComponent,\n  ImageComponent,\n  ScrollViewComponent,\n  TextInputComponent\n} from '@pegasusheavy/angular-platform-mobile';\n\n@Component({\n  selector: 'app-profile',\n  standalone: true,\n  imports: [\n    ViewComponent,\n    TextComponent,\n    ImageComponent,\n    ScrollViewComponent,\n    TextInputComponent\n  ],\n  template: `\n    \u003cmobile-scroll-view [style]=\"{ flex: 1 }\"\u003e\n      \u003cmobile-view [style]=\"containerStyle\"\u003e\n        \u003cmobile-image\n          [source]=\"{ uri: 'https://example.com/avatar.jpg' }\"\n          [style]=\"avatarStyle\"\u003e\n        \u003c/mobile-image\u003e\n\n        \u003cmobile-text [style]=\"nameStyle\"\u003e{{ userName }}\u003c/mobile-text\u003e\n\n        \u003cmobile-text-input\n          [(ngModel)]=\"bio\"\n          placeholder=\"Enter your bio\"\n          [style]=\"inputStyle\"\n          multiline\u003e\n        \u003c/mobile-text-input\u003e\n      \u003c/mobile-view\u003e\n    \u003c/mobile-scroll-view\u003e\n  `\n})\nexport class ProfileComponent {\n  userName = 'John Doe';\n  bio = '';\n\n  containerStyle = { padding: 20, alignItems: 'center' };\n  avatarStyle = { width: 100, height: 100, borderRadius: 50 };\n  nameStyle = { fontSize: 20, fontWeight: 'bold', marginTop: 16 };\n  inputStyle = { width: '100%', marginTop: 20, padding: 12, borderWidth: 1, borderColor: '#ddd', borderRadius: 8 };\n}\n```\n\n## 🎨 Styling\n\nStyle properties follow React Native conventions:\n\n```typescript\nconst styles = {\n  container: {\n    flex: 1,\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f5f5f5',\n    padding: 20,\n  },\n\n  card: {\n    backgroundColor: '#ffffff',\n    borderRadius: 12,\n    padding: 16,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3, // Android shadow\n  },\n\n  title: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    color: '#333333',\n  },\n};\n```\n\n## 🔧 Services\n\n### NavigationService\n\n```typescript\nimport { NavigationService } from '@pegasusheavy/angular-platform-mobile';\n\n@Component({ ... })\nexport class HomeComponent {\n  constructor(private nav: NavigationService) {}\n\n  goToProfile() {\n    this.nav.navigate('Profile', { userId: '123' });\n  }\n\n  goBack() {\n    this.nav.goBack();\n  }\n}\n```\n\n### StorageService\n\n```typescript\nimport { StorageService } from '@pegasusheavy/angular-platform-mobile';\n\n@Component({ ... })\nexport class SettingsComponent {\n  constructor(private storage: StorageService) {}\n\n  async saveSettings() {\n    await this.storage.setItem('theme', 'dark');\n  }\n\n  async loadSettings() {\n    const theme = await this.storage.getItem('theme');\n  }\n}\n```\n\n### DeviceService\n\n```typescript\nimport { DeviceService } from '@pegasusheavy/angular-platform-mobile';\n\n@Component({ ... })\nexport class AppComponent {\n  constructor(private device: DeviceService) {\n    console.log('Platform:', device.platform);\n    console.log('Is iOS:', device.isIOS);\n    console.log('Is Android:', device.isAndroid);\n  }\n}\n```\n\n### PermissionsService\n\n```typescript\nimport { PermissionsService } from '@pegasusheavy/angular-platform-mobile';\n\n@Component({ ... })\nexport class CameraComponent {\n  constructor(private permissions: PermissionsService) {}\n\n  async requestCamera() {\n    const status = await this.permissions.request('camera');\n    if (status === 'granted') {\n      // Access camera\n    }\n  }\n}\n```\n\n### AlertService\n\n```typescript\nimport { AlertService } from '@pegasusheavy/angular-platform-mobile';\n\n@Component({ ... })\nexport class MyComponent {\n  constructor(private alert: AlertService) {}\n\n  showAlert() {\n    this.alert.alert('Title', 'Message', [\n      { text: 'Cancel', style: 'cancel' },\n      { text: 'OK', onPress: () =\u003e console.log('OK pressed') },\n    ]);\n  }\n}\n```\n\n## 🖥️ CLI Commands\n\n```bash\n# Initialize a new project\nng-mobile init my-app --platform both\n\n# Start development server\nng-mobile start\n\n# Build the app\nng-mobile build android\nng-mobile build ios\nng-mobile build android --release\n\n# Run on device/emulator\nng-mobile run android\nng-mobile run ios\nng-mobile run android --device\nng-mobile run ios --release\n\n# View device logs\nng-mobile logs android\nng-mobile logs ios\n\n# List connected devices\nng-mobile devices\n\n# Clean build artifacts\nng-mobile clean\n\n# Link native dependencies\nng-mobile link\n```\n\n## 📁 Project Structure\n\n```\nmy-app/\n├── android/                  # Android project\n│   ├── app/\n│   │   ├── src/main/\n│   │   │   ├── java/        # Kotlin/Java source\n│   │   │   ├── res/         # Android resources\n│   │   │   └── AndroidManifest.xml\n│   │   └── build.gradle\n│   └── settings.gradle\n├── ios/                      # iOS project\n│   ├── App/\n│   │   ├── AppDelegate.swift\n│   │   └── Info.plist\n│   ├── App.xcodeproj\n│   └── Podfile\n├── src/                      # Angular source\n│   ├── app/\n│   │   └── app.component.ts\n│   └── main.ts\n├── assets/                   # Shared assets\n├── ng-mobile.json           # Project config\n├── package.json\n└── tsconfig.json\n```\n\n## ⚙️ Configuration\n\n### ng-mobile.json\n\n```json\n{\n  \"name\": \"MyApp\",\n  \"displayName\": \"My App\",\n  \"appId\": \"com.example.myapp\",\n  \"platforms\": {\n    \"android\": {\n      \"minSdkVersion\": 24,\n      \"targetSdkVersion\": 34\n    },\n    \"ios\": {\n      \"deploymentTarget\": \"15.0\"\n    }\n  },\n  \"bundleEntry\": \"./src/main.ts\",\n  \"outputPath\": \"./dist\"\n}\n```\n\n## 📋 Requirements\n\n- **Node.js** 18+\n- **Angular** 18+\n- **TypeScript** 5.3+\n\n### For Android Development\n- Android Studio\n- Android SDK (API 24+)\n- Java 17+\n\n### For iOS Development\n- macOS\n- Xcode 15+\n- CocoaPods\n\n## ⚡ Performance\n\nAngular Platform Mobile includes built-in performance optimizations:\n\n- **Style Caching** - ~20x faster style transformations\n- **Easing LUTs** - ~79x faster animation easing calculations\n- **Message Batching** - Reduced bridge overhead\n- **Diff-based Updates** - Only send changed properties\n\nRun benchmarks:\n```bash\npnpm benchmark\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## 📄 License\n\nMIT License - Copyright © 2026 Pegasus Heavy Industries LLC\n\nSee [LICENSE](LICENSE) for details.\n\n## 💖 Support\n\nIf you find this project useful, please consider:\n- ⭐ Starring the repository\n- 🐛 Reporting bugs\n- 💡 Suggesting features\n- 🎁 [Supporting on Patreon](https://www.patreon.com/c/PegasusHeavyIndustries?vanity=user)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquinnjr%2Fangular-platform-mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquinnjr%2Fangular-platform-mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquinnjr%2Fangular-platform-mobile/lists"}