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 /nl/docs/mobile/ui.md (or send Accept: text/markdown).

Native UI en theming

Schermprimitieven en gedeelde view-models die de designbeslissingen van het web spiegelen.

Vraag over deze handleiding

Voordat je begint

Open uw gedownloade supastack-project in Visual Studio Code met behulp van Bestand → Map openen en kies vervolgens Terminal → Nieuwe terminal. De root van de repository is de map met package.json, apps en pakketten. Voer daar de onderstaande opdracht uit en laat de terminal open. Als een opdracht niet wordt herkend, voltooi dan de installatiehandleiding van het hulpprogramma voordat u verdergaat.

Lees eerst de platformtutorial. Een server is het app-proces dat browser- of telefoonverzoeken beantwoordt. Web leest apps/web/.env.local, Expo leest apps/mobile/.env.local en opdrachten voor databasemigratie lezen root .env. De demonstratie zonder database/dashboard staat los van echte/auth-accounts, waarvoor Postgres moet worden gemigreerd. Voor een telefoon- of desktop-afrekening is een afzonderlijk draaiende web-backend nodig.

corepack pnpm --filter @supastack/mobile start

Setup en configuratie

Schermprimitieven staan in apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — gestyled vanuit apps/mobile/src/theme, zodat een visuele keuze voor het web wordt doorgevoerd in de native interface. In de Weergave-instellingen past de modus “Overeenkomen met webapp” (apps/mobile/src/theme/synced.ts via GET/PUT /api/mobile/appearance) het gesynchroniseerde webkleurenpakket van de ingelogde gebruiker toe vanuit een lokale cache.

packages/ui-native bevat de cross-platform view-modelhelpers: createEntitlementCard zet server-entitlementstatus om in een kaarts titel, status, detail, actielabel en accessibility-label, zodat web en mobiel dezelfde toegangsbeslissing renderen.

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 }

Implementatieworkflow

Stel schermen samen uit de gedeelde primitieven voordat je nieuwe elementen schrijft; volg de tokens en density van de themamodule in plaats van maten en kleuren te hardcoden.

Houd productcopy uit de primitieven — ze renderen labels, geen copybeslissingen. Neem accessibility-labels mee in custom rijen zoals createEntitlementCard doet.

Verificatie en probleemoplossing

Verifieer een scherm in licht en donker, op de grootste tekstgrootte, met screenreader-labels en op een klein toestel. Een component dat bij 200% tekst afkapt of clipt is niet af.