Angular Native

Angular apps, rendered as real native iOS and Android views.

Angular Native renders Angular components straight onto React Native's Fabric renderer, so a <view> is a UIView on iOS and an android.view.View on Android, and React is never in the render path. You write standalone components, signals, Signal Forms and @angular/router routes as you would for the web, then create, run, hot reload and ship the app with Expo.

npx create-expo-app@latest my-app --template @ng-native/template
cd my-app && npx expo start

Scan the QR code with Expo Go, or press i or a for a simulator.

import { Component, signal } from '@angular/core';
import { Pressable, SafeAreaProvider, SafeAreaView, Text } from '@ng-native/components';

@Component({
  selector: 'app-root',
  imports: [Pressable, SafeAreaProvider, SafeAreaView, Text],
  template: `
    <safe-area-provider>
      <safe-area-view class="screen">
        <text class="title">Angular, natively</text>
        <pressable accessibilityRole="button" class="button" (press)="count.set(count() + 1)">
          <text class="label">Tapped {{ count() }} times</text>
        </pressable>
      </safe-area-view>
    </safe-area-provider>
  `,
  styles: `
    :host {
      flex: 1;
    }
    .screen {
      flex: 1;
      justify-content: center;
      gap: 12px;
      padding: 24px;
    }
    .title {
      font-size: 28px;
      font-weight: 700;
    }
    .button {
      padding: 14px;
      border-radius: 10px;
      background-color: #3b6ef5;
      align-items: center;
    }
    .button:active {
      opacity: 0.8;
    }
    .label {
      color: white;
      font-weight: 600;
    }
  `,
})
export class App {
  protected readonly count = signal(0);
}

Elements are Angular components imported like any other, with lowercase names. Stylesheets compile to native styles at build time.

• Native rendering. An incremental renderer commits only what changed to Fabric, with native text, images, scroll views, virtual and section lists, text inputs, switches, modals and gestures.
• CSS and Tailwind. Component stylesheets, CSS variables, media queries, dark mode, transitions and @keyframes, plus a Tailwind preset with ios: and android: variants.
• Native navigation. @angular/router over native stacks, tabs, headers, modals and sheets, with guards, resolvers, lazy routes and deep links.
• Forms. Signal Forms bound to native controls.
• Expo modules as Angular services. Camera, location, notifications, secure storage, the file system, SQLite, biometrics, maps, haptics and more, injected like any other service.
• Animation. animate.enter and animate.leave, CSS transitions, Animated and Reanimated worklets.
• Testing. A Testing Library API that runs components in Node against a fake Fabric, with no simulator.
• Fits existing workspaces. Generators for the Angular CLI (ng add @ng-native/schematics) and Nx (nx add @ng-native/nx).
• The web too. @ng-native/web renders the same components to the DOM.

• Getting started
• Adding it to an existing app
• Theming and Tailwind
• Build a form
• Deployment
• How it compares
• Known limitations
• Architecture

The examples are complete apps: a bank (wallet), a habit tracker (habits), a music player (music), a run tracker with maps (runs) and a notes app (notes).

Angular 22, Expo SDK 57 and React Native 0.86 with the New Architecture, on Node 22.18 or later.

Angular Native is in alpha, so APIs can change between 0.x releases. The known limitations list every gap with its workaround.

See CONTRIBUTING.md for setting up the workspace, running the tests and what a pull request needs. Report a vulnerability privately, as SECURITY.md describes. Everyone taking part is expected to follow the Code of Conduct.

MIT

Angular Native is an independent open-source project. It is not affiliated with or endorsed by Google, the Angular team or Expo. Angular is a trademark of Google LLC.

Thanks goes to these wonderful people:

erKam 💻

Chau Tran 💻

Stavros Thalassinos 💻

Luis David Lopera 💻

Ajit Panigrahi 💻

Anthony 💻

Ola Boluwatife 💻

This project follows the all-contributors specification. Contributions of any kind welcome!