Configuración del proyecto

¿Tengo que modificar app.config?

Neural Native no exige configuración global ni expone un proveedor de inicialización para toda la aplicación. La plantilla oficial de Angular Native 0.18.2 arranca desde src/main.ts y no requiere un archivo app.config.ts para utilizar estos controles. Importar un control lo habilita en ese componente; NeuTheme configura el tema para sus descendientes.

Si tu aplicación ya agrupa providers en app.config, consérvalos para sus rutas, HTTP o servicios y pásalos al arranque configurado con Angular Native. Neural Native no sustituye esa configuración. Este paquete nativo no necesita los providers ni los estilos globales de Neural UI para web.

Archivos del proyecto: qué cambiar

En una app nueva creada con la plantilla oficial, empieza por instalar Neural Native y editar src/app/app.ts. El framework ya prepara el punto de entrada y Metro. Las rutas siguientes son relativas a la carpeta de la aplicación.

my-neural-app/
├── package.json
├── package-lock.json
├── app.json
├── metro.config.js
├── tsconfig.json
├── vitest.config.mts
└── src/
    ├── main.ts
    └── app/
        ├── app.ts
        └── app.test.ts

src/app/app.ts: añade tu pantalla

Este es el archivo que debes editar para crear tu primera pantalla con Neural Native. En la plantilla recién generada, sustituye su contenido por el ejemplo completo siguiente. En una app existente, añade los imports y los controles a tu componente actual conservando su lógica.

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.');
  }
}

Los tres puntos que debes editar son los imports de TypeScript al principio, el array imports de @Component y la plantilla. El estado y los métodos de acción van dentro de export class App. Conserva ese nombre de clase porque el punto de entrada generado importa App.

El ejemplo coloca los dos controles en la misma pantalla. Su estado se mantiene en signals y se actualiza al interactuar con ellos.

src/main.ts: conserva el arranque generado

No tienes que añadir nada a este archivo para utilizar Neural Native. La plantilla oficial ya arranca el framework y renderiza App. Conserva el punto de entrada generado completo. Lo siguiente es solo el import que lo conecta con tu pantalla, no un sustituto del archivo.

// Keep this import in the generated src/main.ts.
import { App } from './app/app.ts';

La biblioteca no exige crear app.config.ts ni añadir un proveedor de inicialización. Al editar la pantalla exportada desde src/app/app.ts, este arranque existente ya la muestra.

package.json: npm añade la dependencia

Ejecuta este comando desde la carpeta de la aplicación. Deja que npm actualice package.json y package-lock.json.

npm install @neural-ui/native@beta

Este fragmento muestra la dependencia de la base documentada. npm guarda la versión que instala; conserva las demás dependencias, los scripts y la configuración que creó la plantilla. El lockfile registra las versiones exactas instaladas.

{
  "dependencies": {
    "@neural-ui/native": "0.1.0-beta.1"
  }
}

metro.config.js: configuración de la plantilla

La plantilla oficial ya contiene esta integración. Normalmente no se modifica para añadir Neural Native. Si tienes una app Expo sin Angular Native, completa primero la instalación manual del framework y después instala la biblioteca de componentes.

const { getDefaultConfig } = require('expo/metro-config');
const { withAngularNative } = require('@ng-native/metro/config.cjs');

module.exports = withAngularNative(getDefaultConfig(__dirname));

Instalación manual de Angular Native

Tema y layout nativo

Configura la apariencia compartida en el NeuTheme raíz: scheme elige el modo y tokens permite personalizarlo. Las primitivas de área segura y flex: 1 hacen que el contenido ocupe el espacio disponible.

Personalizar el tema es opcional. En el App del ejemplo anterior, añade este import de tipo junto a los demás imports al principio de src/app/app.ts.

import type { NeuTokens } from '@neural-ui/native/foundation';

Añade esta propiedad dentro de export class App, junto a name y feedback. Conserva las propiedades y los métodos existentes.

  readonly tokens = {
    accent: '#3B5BDB',
    onAccent: '#FFFFFF',
    radius: 16,
  } satisfies Partial<NeuTokens>;

Por último, añade [tokens] al tag de apertura neu-theme existente en la plantilla. Conserva el contenido de la pantalla y su tag de cierre.

<neu-theme scheme="system" [tokens]="tokens">

Explora los temas

Consulta todos los tokens de diseño

app.json: opciones de la aplicación

El app.json generado ya activa la apariencia automática y el soporte de iPad. Este fragmento muestra los campos relevantes; integra los cambios en el archivo existente sin sustituir sus iconos, identificadores u otros plugins. Estas opciones describen tu app, no una configuración global de Neural Native.

{
  "expo": {
    "name": "My Neural App",
    "slug": "my-neural-app",
    "platforms": [
      "ios",
      "android"
    ],
    "userInterfaceStyle": "automatic",
    "ios": {
      "supportsTablet": true
    },
    "plugins": [
      "@ng-native/metro"
    ]
  }
}

Si añades un módulo nativo o cambias un plugin nativo, reinicia Metro y recompila el host nativo cuando el cambio lo requiera. Expo Go solo ejecuta los módulos incluidos en su runtime; utiliza una compilación de desarrollo para las integraciones nativas adicionales.

Signals y formularios

En un input sencillo, [(value)] enlaza directamente con un signal de Angular. Checkbox y Switch utilizan [(checked)]. Estos enlaces no necesitan FormsModule ni ngModel. Importa cada control en el componente cuya plantilla lo utiliza, aunque otra pantalla ya lo haya importado.

Signal Forms es opcional para la validación y el estado de los campos. Instala @angular/forms en la misma versión que los paquetes Angular de la app, importa FormField desde @angular/forms/signals en el componente que lo utiliza y sigue la guía de formularios.

Conecta un formulario completo

CSS dentro del componente o en un archivo separado

Define el CSS en el componente mediante styles o en un archivo separado mediante styleUrl. Utiliza styleUrls cuando necesites varias hojas. Angular Native compila ese CSS para su renderizador nativo.

Los ejemplos cortos utilizan styles para que todo se vea en un mismo bloque. En tu proyecto, crea los dos archivos siguientes y coloca app-summary dentro del neu-theme raíz existente. Importa SummaryComponent en su padre. No necesitas importar CSS global ni cambiar el arranque.

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

@Component({
  selector: 'app-summary',
  imports: [Text, View],
  template: `
    <view class="panel">
      <text class="title">Your workspace</text>
      <text class="description">Shared with your team</text>
    </view>
  `,
  styleUrl: './summary.component.css',
})
export class SummaryComponent {}

.panel {
  padding: var(--neu-spacing);
  gap: 8px;
  background-color: var(--neu-surface);
  border-radius: var(--neu-radius);
}

.title {
  color: var(--neu-text);
  font-size: var(--neu-font-size);
  font-weight: 600;
}

.description {
  color: var(--neu-muted);
  font-size: 14px;
}

Elige styles o styleUrl para este ejemplo; no dupliques las mismas reglas en ambos. Los selectores de clase y las variables del tema funcionan en cualquiera de las dos ubicaciones. El layout nativo utiliza las funciones CSS admitidas por el framework, por lo que debes emplear sus layouts flex nativos en lugar de asumir que admite todo el CSS del navegador.

Idioma, dirección y fechas

El selector de idioma de la documentación cambia esta web. En tu aplicación, aporta etiquetas, ayudas, errores, estados vacíos y nombres accesibles traducidos. Mantén estables los IDs de las opciones y los valores guardados al traducir sus etiquetas visibles.

<neu-date-input label="Fecha de entrega" locale="es" [(value)]="deliveryDate" />
<neu-calendar locale="es" [(value)]="selectedDate" />

Declara deliveryDate y selectedDate como signals escribibles en el componente e importa los dos controles. DateInput y Calendar utilizan locale en su interfaz de fechas; sus valores mantienen el formato YYYY-MM-DD, independientemente del idioma mostrado. No guardes una fecha como texto localizado ni conviertas una fecha sin hora a UTC sin definir antes las reglas de zona horaria de tu aplicación.

locale da formato a las fechas y a los nombres del calendario. Aporta también las acciones, como closeLabel, previousLabel y nextLabel, en el idioma de tu app. TreeSelect expone expandLabel y emptyLabel; Uploader acepta stateLabels para sus cuatro estados visibles. La referencia API enumera las etiquetas disponibles en cada componente.

Para idiomas de derecha a izquierda, configura la dirección mediante el framework nativo y comprueba la pantalla completa en cada plataforma. Traducir no refleja automáticamente el layout ni los iconos direccionales. Revisa el orden de lectura, los espacios de inicio y fin, las etiquetas largas y el texto ampliado; conserva la orientación de los símbolos y contenidos que no sean direccionales.

Integraciones según la funcionalidad

Configura la selección y subida de archivos

Explora la integración de iconos