Every page has configuration that lives separately from the components on its canvas. Select the page itself and the Properties panel swaps its component tabs for three page level tabs:
Settings: the header, navigation and status bar for this screen.
Variables: the parameters the page receives, the state local to it, and the state shared across the app.
Actions: the events that run automatically as the page loads, gains focus, loses focus, or when someone taps a header icon.
By the end of this guide you will have set a page’s header, created a page variable, and attached an action to a lifecycle event.Prerequisites
A NativeFlow Studio account, signed in, with a project open that has at least one page.
No backend or auth provider is needed for any of the three tabs.
To select the page, click the Page row at the top of the Component Tree, or click empty canvas space with nothing else selected. If you still see Style, Data and Actions, a component is selected rather than the page.
Toggling Suppress back button, adding and removing a header icon, creating and deleting a Page Variable, and attaching and removing a Show Toast action.
The recording above is a real, unscripted session — it runs at automation speed with no narration. Every temporary object it creates (the header icon, the Page Variable, the action) is removed again by the end.
Header: a three way choice of Default, Custom or None.
Title: a text field. Its placeholder is the page’s own name. The helper text reads “Shown in the header bar. Leave empty to use the page name.”
Title alignment: Left, Center or Right. Helper text: “Applies on canvas, preview, Expo Go and the exported app. Default comes from App config > Mobile > Header.”
A small live preview of the header bar renders at the bottom of the tab and updates as you change these fields.
The Settings tab for a page, showing the Header, Navigation, Actions and Appearance groups with their fields
2
Control the back button and status bar
Under NAVIGATION, the Suppress back button toggle hides the back chevron on this screen only.Under APPEARANCE:
Status bar content: a dropdown that defaults to “Inherit app setting.”
Immersive header: a toggle that paints this screen’s header under the status bar.
3
Add a header icon
The ACTIONS group in this tab is labelled “Right-side icons in the native header” and starts empty with “No actions on this screen.”Click + Add and you get one header icon row: an icon picker, a Label (accessibility) text field, and a behaviour dropdown with four options: No behaviour, Navigate to page, Go back and Open drawer. The icon appears in the canvas header straight away. A trash icon on the row removes it.
The Settings tab ACTIONS section with one header icon configured, showing the icon picker, the Label field and the behaviour dropdown
“Actions” means two different things in this tab set. The Settings tab’s ACTIONS section configures which icons appear in the header, with a simple built in behaviour. The separate Actions tab’s On Header Action event is what runs when one of those icons is tapped, wired to the full action catalog. They are linked but they are not the same control.
PAGE PARAMETERS: “Received from navigation.” Empty state reads “No parameters declared / Add params to receive data from other screens”, with + Add Parameter.
PAGE VARIABLES: “Local to this screen only.” Empty state reads “No page variables yet”, with + Create.
APP VARIABLES: “Global, available everywhere.” Empty state reads “No app variables yet”, with its own + Create.
A footer tip ties them together: “Start with Page Variables. Only promote to App Variables when needed across screens.”
The Variables tab with all three sections empty: Page Parameters, Page Variables and App Variables, plus the start local and promote later tip
Click + Create under PAGE VARIABLES. The Create Page Variable dialog offers eight quick templates, each a pre filled starting point:
Template
Type and default
Loading State
boolean: isLoading = false
Error Message
string: errorMessage = ""
Selected Item
object: selectedItem = null
Search Query
string: searchQuery = ""
Counter
number: count = 0
Toggle Visibility
boolean: isVisible = false
Tab Selection
number: selectedTab = 0
Custom Variable
Create your own from scratch
The Create Page Variable dialog listing the eight quick templates
2
Edit the variable details
Picking a template opens the Variable Details form, pre filled and fully editable: Variable Name with live “Valid name” validation, Type, Initial Value, an optional Description, and a Computed Variable toggle.Choosing Loading State fills it in as name isLoading, type Boolean, initial value false, description “Loading state for API calls”.
The Variable Details form pre filled from the Loading State template, with Variable Name, Type, Initial Value, Description and the Computed Variable toggle
3
Create it
Click Create Variable. The variable appears in the Page Variables list straight away, tagged with its type, its initial value, and a live reference count reading “Used in: 0 places” until something binds to it.
The Page Variables section after creating isLoading, shown as Boolean, Initial false, Used in 0 places
Click + next to a lifecycle event to open a searchable action picker. Search for the action you want and select it.Selecting Console Log on On Screen Load attached it immediately. The row then showed a 1 action badge and a numbered step with a Message field, plus an Add Action control for chaining more. A View as Code toggle reveals a plain language step list reading 1. Console Log.
On Screen Load with a Console Log action attached, showing the 1 action badge, the numbered step and the View as Code readout
A Console Log attached to a page event will not show up in your browser’s console while you use Preview. The Preview panel runs on a different origin from the Studio editor, so its output is not readable from the editor tab. The action did attach and run. The 1 action badge and the View as Code panel are the signals to trust.
Every lifecycle event, and On Header Action, opens the same picker: one shared searchable catalog, grouped by category, identical for every event. There is no per event list.The catalog holds 22 actions across six categories:
Navigation: move between pages or open an external URL.
Data: trigger a configured API call or set a page or app variable.
Interaction: alerts, toasts, haptics, clipboard and overlays.
Communication: the native share sheet and composing an email.
Flow: run TypeScript, delay, or log to the console.
Authentication: sign in, sign up, sign out, OTP, magic link and password reset.
The action picker open at the top of the list, showing the search box, the Navigation category and the start of the Data category
Action reference
Every action in the catalog, with its parameters and its description.
