Retool Mobile screens

Organize content to create Retool Mobile apps with multi-page layouts.

πŸŽ‰

beta

Retool Mobile is currently in private beta. Sign up to join the waitlist β†’

Retool Mobile organizes mobile components into separate screens that you create for different purposes. Users navigate between screens using the tab bar or by interactions that trigger event handlers, such as pressing a button or selecting an item from a list.

Manage screens

When editing a Retool Mobile app, the App editor includes an additional mobile panel on the left. Use the Screens section of the mobile panel to select, add, or delete screens from your mobile app.

To add a new screen, click the + button. To delete an existing screen, click the β€’β€’β€’ icon next to the screen, then select Delete.

Each screen has a title and name that you can update in the Inspector.

  • The title (e.g., Screen 1) is the text displayed in the app, similar to a web component's label. It appears in the title bar area of your app and in the tab bar at the bottom (if visible).
  • The name (e.g., screen1) is used within the editor as the reference when you configure settings or write queries.

When you select a screen, any mobile components it contains appear in the Components section of the mobile panel.

Manage screens and mobile components in Retool MobileManage screens and mobile components in Retool Mobile

Navigate between screens

There are two methods for navigating between screens in a mobile app:

  • The tab bar
  • Event handlers

Navigate with the tab bar

Mobile apps automatically include a tab bar at the bottom of the app if Add to tab bar is enabled on at least two screens. Pressing a tab navigates to the screen associated with it.

You customize the tab bar in the Tabs settings of the Inspector. Click and drag to change the order of tabs, or click on a tab to customize its title, the icon to display, and associated screen.

Manage how screens appear in the tab barManage how screens appear in the tab bar

The tab bar displays the screen name by default. You can set a custom icon and title for each tab. This is useful if you need to display a shorter title in the tab bar.

Navigate with event handlers

Retool uses event handlers to trigger queries or other actions in response to user events on mobile components. You can create event handlers that navigate to a screen when a specified action occurs.

MethodDescription
Navigate to screenNavigate to the specified screen.
Open ModalOpen a modal using the specified screen.
BackGo back to the previous screen.
Back to rootNavigate back to the first screen.

You can also write JavaScript to control navigation using navigator.navigateTo('screenName').

Modal screens

Mobile app modals use the same principles as desktop apps. You can present a screen as a modal that doesn't change the user's navigation position. Modals have no navigation buttons and can be dismissed by pressing Done.

Modal screenModal screen

Action buttons

You can configure action buttons in the title bar area to trigger queries or control navigation. The title bar supports a maximum of three action buttonsβ€”one left and two right. You can set a custom icon and text for action buttons, and select the action to perform.

Action buttons provide additional ways for users to interact with your appsAction buttons provide additional ways for users to interact with your apps


Did this page help you?