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.
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.
There are two methods for navigating between screens in a mobile app:
- The tab bar
- Event handlers
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.
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.
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.
|Navigate to screen||Navigate to the specified screen.|
|Open Modal||Open a modal using the specified screen.|
|Back||Go back to the previous screen.|
|Back to root||Navigate back to the first screen.|
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.
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.
Updated about 1 month ago
Learn more about building Retool Mobile apps.