Screens

A screen is an individual page within a flow. Each screen contains a tree of components that define what the user sees and interacts with. A flow can have one screen (a simple announcement modal) or many (a multi-step onboarding sequence).

Adding screens

To add a screen to your flow, click the + Add Node button on the canvas and select Add Screen from the menu.

Each new screen starts empty. Click on the screen node to open the screen editor and begin adding components.

Screen editor

The screen editor is where you build the visual content of a screen. It shows a device-sized preview in the center with a component panel on the left and a properties panel on the right.

• Component panel -- browse and drag components onto the screen.
• Canvas -- the live preview of how the screen looks on a device. Click components to select them.
• Properties panel -- configure the selected component's props (text content, colors, sizing, actions, etc.).

Presentation styles

Screens support three presentation modes on mobile devices:

Fullscreen (default)

The screen fills the entire device screen. This is the standard presentation for onboarding flows, feature tours, and any experience that should command the user's full attention.

Bottom sheet

The screen appears as a sheet that slides up from the bottom of the device, overlaying the current app content. Bottom sheets are ideal for quick prompts, feedback requests, and contextual actions.

Bottom sheet configuration options:

Popup

The screen appears as a centered card over a dimmed background. The card is a preset fraction of the device width and only as tall as its content, up to a cap, after which the content scrolls above the pinned button. Popups suit short prompts, permission primers, and confirmations that should not take the user out of context.

Popup configuration options:

What shows behind a sheet or popup

A bottom sheet or popup in the middle of a flow is drawn over the previous fullscreen screen of that flow, which stays visible but cannot be tapped. Only a sheet or popup that opens the flow sits directly over your app. Going back from the overlay returns to the screen it was drawn over.

Screen transitions

Each screen controls how it animates in when the flow navigates to it: a fade, a horizontal slide, or a rise from the bottom, with its own duration and easing. Screens left on the default keep the behavior they have always had. See Animations for the full set.

Screen background

You can set a background color for any screen. Click on the screen in the editor and use the background color picker in the properties panel to choose a color.

Auto-advance

A screen can move on by itself after a delay, so a screen with no call to action is still exitable. Use it for loading states, personalization moments, and celebration screens.

Skip when already granted

A permission primer explains why the app is about to ask for something. It has no job when the permission is already granted, so a screen can be skipped automatically in that case. In the properties panel, under Skip when granted, choose the permission the screen asks for: notifications, location, camera, tracking, microphone, or photo library.

When the flow reaches the screen, the SDK checks the current authorization without prompting. If it is already granted, the screen is skipped, records no view, and is left out of the back stack, so going back from the next screen lands on the screen before the primer.

Safe area handling

Screens respect device safe areas (notch, home indicator, status bar) by default. To run content edge to edge, turn on Edge-to-Edge on the screen's root container, which lets it draw beneath the safe areas.

Reordering screens

To change the order of screens in a flow, rearrange the edges on the flow builder canvas. The navigation order is determined by the graph structure, not by any fixed list order.