Mobile app development

Retool Mobile is a complete solution for building mobile apps that run natively on iOS and Android, 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 Retool Mobile apps natively. You can also configure apps to work offline to cache data and enqueue changes to run when the connection is restored.

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 editor for Retool Mobile, Retool's drag-and-drop app building web interface. You use the App editor 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 editor 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.

Run Retool Mobile apps

Retool Mobile eliminates the need for compiling apps, complex distribution, and store listings with lengthy reviews. Instead of separate apps, you use a single app—Retool Mobile for iOS and Android—to browse and run apps natively. Retool Mobile apps also function as progressive web apps.

This approach simplifies deployment and makes all Retool Mobile apps instantly available. You can share links to apps so users can launch them on their device, or open them in a browser.

Natively with Retool Mobile for iOS and Android

The Retool Mobile app for iOS and Android uses React Native to run mobile apps natively. Users can log in to their Retool organization, browse or search for mobile apps, and launch them on their mobile device.

You can share Retool Mobile app links with users to launch them automatically in the Retool Mobile app. If a user doesn't have the app installed, they are automatically routed to the Apple App Store or Google Play.

On the web

You can also launch Retool Mobile apps as progressive web apps (PWA). This makes it possible to use Retool Mobile apps on a wide range of devices that are unable to use the Retool Mobile app for iOS and Android (e.g., Amazon Fire tablets).

Retool Mobile apps viewed on the web include a QR code that can open the app directly in Retool Mobile.

Functionality considerations

Some functionality supported by Retool is not available in Retool Mobile due to restrictions or limitations when apps run natively.

General limitations

Certain functionality supported by desktop Retool web apps are not available in Retool Mobile. As you build Retool Mobile apps, keep these considerations in mind to ensure a consistent and seamless experience.

In addition, certain versions of Android:

• Use older versions of Node.js (e.g., v10.15.3) that do not support some functionality, such as Set and flatMap(). Refer to Node.js ES2015/ES6, ES2016 and ES2017 support to learn what functionality of Node.js is available in the version available for Android.
• Do not support existential operators, (e.g., foo?.bar).

JavaScript limitations

Certain JavaScript features are unavailable. This includes:

• Access to the Window object.
• Some third-party JavaScript libraries, including those directly available in Retool.
• Use of toLocalDateString(). You can use the third-party Moment JavaScript library, which is built into Retool and is available natively.

Interactions using the web console are also unavailable in Retool Mobile. This includes console.log() or running commands 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 editor.

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 editor 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 editor.