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

Angular Native renders Angular components straight onto React Native's Fabric renderer, so a 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.

A component

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.

Features

• Native rendering. An incremental renderer commits only what changed to Fabric, with native

• CSS and Tailwind. Component stylesheets, CSS variables, media queries, dark mode,

• Native navigation. @angular/router over native stacks, tabs, headers, modals and sheets,

• Forms. Signal Forms bound to native controls.
• Expo modules as Angular services. Camera, location, notifications, secure storage, the file

• Animation. animate.enter and animate.leave, CSS transitions, Animated and Reanimated

• Testing. A Testing Library API that runs components in Node against a fake Fabric, with no

• Fits existing workspaces. Generators for the Angular CLI (ng add @ng-native/schematics) and

• The web too. @ng-native/web renders the same components to the DOM.

Documentation