Retool Mobile components

Learn how to assemble Retool Mobile app interfaces.

πŸŽ‰

beta

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

Retool Mobile provides you with a library of mobile-specific components that work natively on iOS and Android. Mobile components function in the same way as Retool's web components for web apps.

Add mobile components

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

Retool Mobile groups mobile components into separate screens that serve specific purposes. To add a mobile component to a screen:

  1. Select the desired screen from the Screens section of the mobile panel.
  2. Click + in the Components section.
  3. Select a mobile component to add.

Manage components in Retool MobileManage components in Retool Mobile

Arrange mobile components

Retool Mobile organizes mobile components in a vertical (column) layout. Additional mobile components first appear at the bottom of the Component section. You can drag mobile components to change the order in which they appear.

Reorder mobile componentsReorder mobile components

You can customize the layout of mobile components to arrange them horizontally, adjust their width, and increase padding.

Configure mobile components

You configure mobile components in the same way as Retool's web components. You can write JavaScript almost anywhere, edit option lists, and more.

Use the Inspector in the right panel of the App editor to configure the settings for a selected mobile component.

Text Input to edit the selected product's nameText Input to edit the selected product's name

Mobile component event handlers

πŸ‘

You can configure event handlers to open URLs with alternative URI schemes, such as tel:, sms:, and mailto:, to perform other actions like phone calls, text messages, and emails.

Retool uses event handlers to trigger queries or other actions in response to user events, such as pressing a button, navigating to another screen, or running a query. Use the Interaction settings in the Inspector to configure event handlers for the selected mobile component.

Open a screen as a modalOpen a screen as a modal

Conditional and multiple actions

You can configure event handlers to perform actions only when a certain condition is met by setting Only run when to a truthy value. You can also add multiple event handlers for the same event to perform different actions at the same time, such as setting values of multiple components. Multiple event handlers trigger actions simultaneously, not in a sequential order. If you need to trigger multiple actions in a specific order, consider writing a JavaScript query instead.


Did this page help you?