Mobile app development
Learn about Retool Mobile app development.
Retool Mobile is a complete solution for building mobile apps that run natively on iOS and Android devices (both phones and tablets), and on the web as progressive web apps (PWA). You connect your data sources, visually build your app's interface, and write queries to interact with your data.
Mobile apps can use built-in functionality of mobile devices, such as NFC readers and cameras. Retool Mobile also supports Zebra Android devices with integrated scanners and sensors.
Retool makes all of your mobile apps available in the Retool Mobile app for iOS and Android. You can use this app to browse, search, and run your organization's mobile apps natively. You can also configure apps to work offline by caching data and storing changes that take place when the connection is restored. If you self-host Retool and your instance is behind a VPN, the device you access Retool Mobile apps from must also be on the VPN.
Build Retool Mobile apps
Certain versions of Android, especially older releases, may not support some features. As you develop mobile apps, be mindful of any functionality considerations that could affect your apps.
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.
Mobile app interface
The UI of Retool Mobile apps consists of screens and components:
- Screens separate the interface into multi-page layouts required for mobile apps.
- Components are interface elements, such as input fields, that each screen contains.
The App IDE includes an additional mobile panel on the left to manage screens and components.
You configure screens and components using the Inspector in the right panel. You can use event handlers to trigger queries or other actions in response to user events, such as pressing a button, navigating to another screen, or using the pull-to-refresh gesture.
Mobile screens
Retool Mobile apps contain separate screens to serve different purposes. Only a single screen is visible to a user at any one time. Users can navigate between screens using interface elements like a tab bar, or interactions that trigger event handlers.
Mobile components
You can only use Retool Mobile components to build mobile apps.
Retool's mobile-specific components are the fundamental building blocks of Retool Mobile apps. They are prebuilt interface elements designed for mobile devices to display data, allow user input, and trigger actions based on interactions.
You assemble mobile components for each screen to perform a certain task (e.g., a list of contacts). Any changes to the component's state are immediately reflected.
Handle user interactions
You can configure screens and components with event handlers that trigger queries or other actions in response to user events, such as pressing a button, navigating to another screen, or using the pull-to-refresh gesture.
Testing and debugging
You can use Retool's Debug Tools to explore your Retool Mobile app, review errors, and debug issues during development. You can also use the Model browser in the left panel of the App IDE to explore all component and query properties.
Retool Mobile does not support interactions using the web console. This includes console.log() or running JavaScript using the Console tab of Debug Tools. Instead, you can use components to display output by setting their values (e.g., Text Area) or Run JS Code JavaScript queries to perform certain commands directly in the App IDE.
