Instalación

Antes de instalar

Crea tu aplicación con la plantilla oficial de Angular Native: configura las dependencias del runtime del framework. Estas versiones identifican nuestro entorno probado. Los módulos nativos adicionales dependen de las funciones que utilice tu aplicación.

Utiliza npm con su resolución de dependencias peer predeterminada. Android necesita un SDK y un emulador o un teléfono compatible; el simulador de iOS requiere macOS y Xcode. También puedes abrir una app compatible en Expo Go en un dispositivo físico.

1. Crea una app Angular Native

Parte de la plantilla oficial, fijada a la versión del framework compatible con esta versión de la biblioteca. La plantilla instala Angular y el runtime del framework, configura Metro y crea src/main.ts y src/app/app.ts. Si tu app ya utiliza Angular Native 0.18.2, omite este paso.

npx create-expo-app@latest my-neural-app --template @ng-native/template@0.18.2
cd my-neural-app

Instalación oficial de Angular Native

2. Instala Neural Native

Ejecuta el comando desde la carpeta de la aplicación, junto a package.json. La instalación incluye los 64 componentes y resuelve las dependencias y los peers declarados.

npm install @neural-ui/native@beta

No hay un proveedor global de Neural Native que añadir a app.config, un NgModule que importar ni una hoja de estilos global del tema que cargar. El siguiente paso importa los controles y aplica el tema en un componente Angular.

3. Crea tu primera pantalla

Sustituye src/app/app.ts de la plantilla generada por este ejemplo completo. Conserva App como nombre de la clase exportada: el punto de entrada generado ya la monta. El input actualiza un signal de Angular y el botón muestra una confirmación al pulsarlo.

import { Component, inject, signal } from '@angular/core';
import { SafeAreaProvider, SafeAreaView, Text, View } from '@ng-native/components';
import { StatusBar } from '@ng-native/device';
import { NeuThemeComponent } from '@neural-ui/native/theme';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-root',
  imports: [
    SafeAreaProvider, SafeAreaView, View, Text,
    NeuThemeComponent, NeuInputComponent, NeuButtonComponent,
  ],
  template: `
    <safe-area-provider>
      <neu-theme scheme="system">
        <safe-area-view class="screen">
          <view class="body">
            <neu-input label="Full name" placeholder="Enter your name" [(value)]="name" />
            <neu-button label="Save profile" (pressed)="save()" />
            <text class="feedback">{{ feedback() }}</text>
          </view>
        </safe-area-view>
      </neu-theme>
    </safe-area-provider>
  `,
  styles: `
    :host, .screen { flex: 1; }
    .body { padding: 24px; gap: 16px; }
    .feedback { color: var(--neu-text); }
  `,
})
export class App {
  readonly name = signal('');
  readonly feedback = signal('');

  constructor() {
    inject(StatusBar).set({ style: 'auto' });
  }

  save(): void {
    const name = this.name().trim();
    this.feedback.set(name ? 'Saved: ' + name : 'Enter your name.');
  }
}

SafeAreaProvider y SafeAreaView respetan las áreas seguras del dispositivo. NeuTheme proporciona el tema compartido, scheme="system" sigue la apariencia del dispositivo y los imports habilitan los selectores en minúsculas dentro de esta plantilla.

4. Prueba tu pantalla

Sustituye el test del contador de src/app/app.test.ts por estas pruebas del formulario de perfil. Comprueban el guardado del nombre y el envío vacío.

import { cleanup, fireEvent, render, screen, userEvent } from '@ng-native/testing';
import { afterEach, expect, test } from 'vitest';
import { App } from './app.ts';

afterEach(cleanup);

test('saves the profile name', async () => {
  await render(App);
  await fireEvent.changeText(screen.getByLabelText('Full name'), 'Ada');
  await userEvent.setup().press(screen.getByRole('button', { name: 'Save profile' }));
  expect(screen.getByText('Saved: Ada')).toBeTruthy();
});

test('asks for a name before saving', async () => {
  await render(App);
  await userEvent.setup().press(screen.getByRole('button', { name: 'Save profile' }));
  expect(screen.getByText('Enter your name.')).toBeTruthy();
});

En vitest.config.mts, incluye la biblioteca distribuida en la opción inline de ngNative. Esta es la configuración completa del ejemplo; conserva los ajustes de pruebas adicionales que necesite tu aplicación.

import { ngNative } from '@ng-native/testing/vitest';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [ngNative({ inline: ['@neural-ui/native'] })],
});

5. Ejecuta la aplicación

npm start

Metro abre el servidor de desarrollo. Pulsa a para abrir Android o i para abrir el simulador de iOS, o escanea el QR con una app Expo Go compatible. Debes ver el campo Full name y el botón Save profile. Escribe un nombre y pulsa el botón para comprobar el estado y los eventos.

Ejecuta las comprobaciones de la plantilla después de editar. El typecheck valida TypeScript y las plantillas Angular; no sustituye las pruebas de interacción en un dispositivo.

npm run typecheck
npm test

Añadirla a un proyecto existente

Una app Angular Native existente necesita instalar el paquete, importar los componentes y envolver la pantalla correspondiente con el tema. Conserva su arranque y sus servicios de aplicación. Una app Angular web convencional necesita el renderizador Angular Native Web para ejecutar estos componentes; instalar el paquete no convierte por sí solo una web en una app nativa.

Continúa con la configuración del proyecto

Si algo no funciona

npm ls @neural-ui/native @angular/core @ng-native/components @ng-native/device @ng-native/icons
npx expo install --check

Consulta la compatibilidad de versiones