Pages and navigation

Choose Pages in the rail to list every page in your project with its number of components. A Start badge marks the start page, and small icons mark a page that is locked, needs sign in or has a direct link. Click a row to open that page on the canvas.

1. Add a pageChoose Add page beside the Pages heading.
2. Name itEnter a Page name, such as Profile or Checkout. Canvas defaults can set its background and spacing now.
3. Create itChoose Create page. The page starts empty, in your app's theme, and opens on the canvas.

Each row has a menu: choose the three dots at its end, right-click it, or press Shift+F10.

Page settings

Rename the page and change its design and navigation. Double-clicking a row, or pressing F2, opens it too.

Preview this page

Runs the app from this page without changing the start page.

Set as start page

Makes your app open on this page.

Duplicate page

Copies the page straight after the original. Buttons in the copy that opened the original now open the copy.

Move up, Move down

Change the page's place in the list. You can also drag a row by its grip, or press Alt with the Up or Down arrow.

Delete page

Removes the page after you review what links to it.

Page names are only labels. Actions, links and code point at each page's stable ID, so renaming a page never breaks a link to it.

The start page is where your app opens. Set it with Set as start page, or under App start page in Page settings. Above the phone, the canvas labels it Start page.

• Reordering pages never changes the start page.
• Duplicating the start page keeps the original as the start.
• Deleting the start page makes the first remaining page the start.

Choose Delete page in the page's menu, or the delete button at the foot of Page settings. The dialog counts the components that go with the page and names the controls elsewhere that open it. Under Update incoming navigation, redirect them all to another page or choose Remove navigation actions. One undo brings back the page and its links together.

Nothing in Page settings changes until you choose Save changes; then everything you changed applies as one undo step.

Page design

Page name

Up to 200 characters.

App start page

The page shown when your app opens.

System status bar

Use app defaults, or Customise for this page to show, hide or recolour the status bar here.

Canvas & layout

Background, inside space, item flow and spacing. Open page in Inspector shows the rest.

Navigation

Parent page

Places this page inside another, such as Workout details inside Workouts. With no previous page, going back opens the parent.

Require sign in

Sends people who are not signed in to the App sign in page first. Your sign in code reports the result with useApp().setAuthStatus. This guards navigation only; your backend must still protect private data.

Values this page receives

Named Text, Number or Yes or no values passed when the page opens, optionally Required or with a default.

Link path

A path such as workouts/:workoutId that opens this page from a link. Set the scheme or domain in App settings, and test links in a development or installed build: Expo Go cannot receive them.

Navigation is an action on a component. Select a button, open the Inspector's Actions tab and choose an Action under When tapped:

Actions run in Preview and in your app. In code, useApp() offers navigate, back and canGoBack; navigate can pass values known only while the app runs:

import { useApp } from "@appsanic/app";
import { pages } from "@appsanic/design";

export function useOpenWorkout() {
  const app = useApp();
  // pages.workoutDetails stands for a page reference in your generated
  // @appsanic/design file. Copy the real one from there.
  return (workoutId: number) => app.navigate(pages.workoutDetails, { workoutId });
}

Page navigation bar

Tabs that each open a page. In its Actions tab, keep Show every page on, or turn it off and order your own Pages to show. Add it to each page where it should appear; it is not fixed to the screen for you.

Page header

A title with an optional start icon. Its action runs when that icon is tapped, so give a back arrow Go back.

Text link

Words that open a page, a panel or a website.

Side drawer

A panel from the left or right edge, opened with Show a popup or panel.

Tabbed panels

Switches between groups of content on one page, without moving between pages.

The status bar is the phone's own time, signal and battery display. Set it for the whole app in App settings under Appearance:

Show status bar

Shows or hides it above your app.

Icon colour

Device default, Dark icons for light pages or Light icons for dark ones. Device default does not look at your page's colours.

System controls appearance

Light, Dark or Follow device for the phone's own controls, applied in a new native build.

To change one page, choose Customise for this page in its Page settings. Pages keep their content clear of notches and system bars by themselves, and hiding the status bar does not give that space back. Real cutouts vary by phone, so check on a device.

Screen rotation, under General in App settings, applies to the whole app: Automatic, Portrait only or Landscape only. With Automatic, the rotate control above the canvas turns the preview without changing your app or adding an undo step.