Retool Mobile quickstart
Learn about the fundamental concepts of Retool Mobile.
This guide serves as an introduction to Retool mobile apps that run natively on iOS and Android. It covers many of the concepts and terminology you would come across as you build mobile apps. After reading this page, you should have a good understanding of the fundamentals for building Retool mobile apps.
Assemble the interface
A Retool Mobile app's user interface is comprised of screens and components. These interface elements function as objects with internal state.
- Screens are separate sections that contain their own code and components. Users navigate between screens, which are often used for distinct use cases. For example, a customer support app might have separate screens to view a list of customers and details of a selected customer.
- Components are interface elements, such as a text input field or a button, with which users interact.
Retool Mobile app screens function in much the same way as pages in Retool apps.
Retool exposes properties, methods, and events with which you can interact. As you interact with components, their properties change. For example, entering text into a Text Input component changes its value
property value.
You also write code that interacts with data, transforms values, or control behavior using JavaScript methods. For example, use setValue('Jenny Appleseed')
to set the value
property value of a Text Input component to Jenny Appleseed.
Components
You build mobile apps using the App IDE for Retool Mobile, Retool's drag-and-drop app building web interface. You use the App IDE to:
- Visually assemble the mobile app interface.
- Write queries to interact with data.
- Configure actions based on user interactions.
- Share apps directly with users.
Screens
Retool only evaluates a screen's objects when the screen is currently in view. This allows for apps to serve multiple functions without impacting performance.
The Screens tab contains a list of screens within the app. The default screen is the one that first loads when launching the app. You can explore and manage all screens, change the default screen, and view more details.
Screens also function as modals and sheets, providing a number of ways for which users can interact. You can optionally configure screens with actions—buttons in the top bar that trigger event handlers