ng-native README

The project's README from github.com/ng-native/ng-native. As one markdown file: README.md.

Angular Native

All Contributors

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.

A component

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

@Component({
  selector: 'app-root',
  imports: [Pressable, SafeAreaView, Text],
  template: `
    <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>
  `,
  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

Documentation

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).

Packages

Package What it provides
@ng-native/platform mount(), the Angular renderer, and HttpClient for React Native.
@ng-native/components The elements: views, text, images, lists, inputs, pressables, gestures, animation.
@ng-native/router Native stack and tab navigation over @angular/router.
@ng-native/device Keyboard, screen, color scheme, app state, accessibility, deep links and more.
@ng-native/expo Expo's modules as Angular services and directives.
@ng-native/icons <ng-icon> with the @ng-icons sets, drawn as native SVG.
@ng-native/metro The Metro preset: the Angular compiler, the CSS compiler and hot reload.
@ng-native/tailwind The Tailwind preset and its platform variants.
@ng-native/testing Testing Library for Angular Native, running in Node.
@ng-native/web A DOM renderer for the same components, with a Vite preset.
@ng-native/schematics ng add and ng generate for Angular CLI workspaces.
@ng-native/nx nx add and an app generator for Nx workspaces.
@ng-native/fabric The framework-agnostic retained tree and commit engine the renderer is built on.

Requirements

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

Status

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

Contributing

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.

License

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.

Contributors ✨

Thanks goes to these wonderful people:

erKam
erKam
💻		 Chau Tran
Chau Tran
💻		 Stavros Thalassinos
Stavros Thalassinos
💻

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

ng-native (ng-native/ng-native)

Searching Database…

544 ·GitHub
Ng-native
Что это?Angular Native рендерит Angular-приложения как настоящие нативные представления iOS и Android, компилируя Angular-компоненты прямо на рендерер Fabric из React Native, так что компонент становится UIView на iOS или android.view.View на Android — без React в пути рендеринга.
Это UI-библиотека для React Native или этот проект полностью заменяет React?Он заменяет React в пути рендеринга: вы пишете обычные Angular standalone-компоненты, signals, Signal Forms и маршруты @angular/router, а специальный рендерер передаёт их напрямую в движок Fabric из React Native вместо прохода через React.
Как создать и запустить приложение с его помощью?Создайте рабочее пространство через Angular CLI (ng add @ng-native/schematics) или Nx (nx add @ng-native/nx), затем запустите его через Expo, отсканировав QR-код в Expo Go или нажав i или a для открытия симулятора.
Какие версии Angular, Expo и React Native нужны?Нужны Angular 22, Expo SDK 57, React Native 0.86 с включённой New Architecture и Node 22.18 или новее.
Насколько это стабильно для продакшен-приложения?Пока недостаточно: проект явно находится в альфе, поэтому API могут меняться между релизами 0.x, а в документации ведётся список известных ограничений с обходными путями.
Те же Angular-компоненты могут работать и в браузере?Да, пакет @ng-native/web рендерит те же Angular-компоненты в DOM через пресет Vite, так что одна кодовая база может таргетировать и натив, и веб.
Можно ли из Angular-кода обращаться к функциям устройства вроде камеры или геолокации?Да, @ng-native/expo оборачивает модули Expo — камеру, геолокацию, уведомления, защищённое хранилище, SQLite, биометрию, карты и хаптику — в обычные инъектируемые Angular-сервисы.
Поддерживается ли Tailwind для стилизации нативных представлений?Да, поверх стилей компонентов, CSS-переменных, тёмной темы, переходов и @keyframes он поставляет пресет Tailwind с вариантами ios: и android:.
Можно тестировать компоненты без запуска симулятора?Да, @ng-native/testing предоставляет API в духе Testing Library, который монтирует компоненты в Node на фиктивном дереве Fabric — симулятор не нужен.
What are similar projects?morphlet, react-native-elements, expo, expo-backdrop, react-native-calendars, awesome-react-native, tamagui, blobatar
Which topics is it in?expo, angular, native, react-native, tailwindcss, component-library, mobile-app, ui-components, animation, testing, css, sdk
Creator
ng-native
Size
14 MB
Stars
544
Updated
CommitOct 17Releasev0.15.0Oct 16
Age
20d
Commits · 90 Days