Assemble mobile components
Learn how to assemble Retool Mobile app interfaces.
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.
Manage 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:
- Select the desired screen from the Screens section of the mobile panel.
- Click + in the Components section.
- Select a mobile component to add.
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.
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.
Trigger actions with event handlers
You can configure event handlers to open URLs with alternative URI schemes, such as tel:, sms:, and mailto:. These enable users 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.
You can also configure event handlers to perform conditional actions only when a the condition results in a truthy value.
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.
Upload captured signatures or images
Signature and Image Input components temporarily save captured data as blobs with blob: or file:// URI strings. You can reference this blob elsewhere in your app (e.g., to preview in an Image component) or upload captured images to a data store. You can also use utils.getDataByObjectURL() to convert blobs into a Base64-encoded string for other uses.
Queries that upload to data stores such as Google Cloud Store and Amazon S3 require the correct Content-Type and Upload data. You must also provide Upload file name if required.
Signature
Captured signatures are in PNG format. The Signature component's value contains a blob: or file:// URI for the signature image. Click Use custom value for Content-Type, then set it to image/png. Set Upload data to {{ signature1.value }}.
Image Input
Images taken with the camera or selected from a photo library can be in different formats. The Image Input component's value contains an array of blob: or file:// values, as the component supports multiple selections. The component's files property contains an array with details for each image, such as type.
The index of an image in value corresponds to the index in files. For example, if you capture a single image or only want to upload the first one, click Use custom value for Content-Type, then set it to {{ fileInput1.files[0].type }}. Set Upload data to {{ fileInput1.value[0] }}. If you need to set custom file names for each upload, you can use type to get the file extension with {{ imageInput1.files[0].type.split("/").pop() }}.
