For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /it/docs/mobile/ui.md (or send Accept: text/markdown).

UI nativa e temi

Primitivi di schermata e view-model condivisi che rispecchiano le decisioni di design del web.

Chiedi informazioni su questa guida

Prima di iniziare

Apri il progetto supastack scaricato in Visual Studio Code utilizzando File → Apri cartella, quindi scegli Terminale → Nuovo terminale. La radice del repository è la cartella contenente package.json, app e pacchetti. Esegui il comando qui sotto e lascia il suo terminale aperto. Se un comando non viene riconosciuto, completare la guida all'installazione dello strumento prima di continuare.

Leggi prima il tutorial sulla piattaforma. Un server è il processo dell'app che risponde alle richieste del browser o del telefono. Il Web legge apps/web/.env.local, Expo legge apps/mobile/.env.local e i comandi di migrazione del database leggono root .env. La dimostrazione senza database/dashboard è separata dagli account reali/auth, che necessitano della migrazione Postgres. Un pagamento solo telefonico o desktop richiede un backend Web eseguito separatamente.

corepack pnpm --filter @supastack/mobile start

Installazione e configurazione

Le primitive di schermata risiedono in apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — stilizzate da apps/mobile/src/theme, così una scelta visiva fatta per il web si riflette sull’interfaccia nativa. Nelle impostazioni di Aspetto, la modalità «Segui app web» (apps/mobile/src/theme/synced.ts tramite GET/PUT /api/mobile/appearance) applica il pacchetto di colori web sincronizzato dell’utente autenticato da una cache locale.

packages/ui-native porta gli helper view-model cross-piattaforma: createEntitlementCard trasforma lo stato di entitlement del server in titolo, stato, dettaglio, etichetta dell'azione ed etichetta di accessibilità di una card, così web e mobile renderizzano la stessa decisione di accesso.

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

Flusso di implementazione

Componi le schermate dai primitivi condivisi prima di scrivere elementi nuovi; rispetta i token e la densità del modulo tema invece di hardcodare dimensioni e colori.

Tieni la copy di prodotto fuori dai primitivi — renderizzano etichette, non decisioni di copy. Porta le etichette di accessibilità attraverso le righe custom come fa createEntitlementCard.

Verifica e risoluzione dei problemi

Verifica una schermata in chiaro e scuro, alla dimensione massima del testo, con label per screen reader e su un dispositivo piccolo. Un componente che tronca o taglia al 200% del testo non è finito.