How to Use Retool on Mobile Devices

From the Retool home page, click '+ New' and select 'Mobile App' (not 'App'). Alternatively, if you're in a regular app, you cannot switch it to a mobile app — you must create a new Mobile App from scratch. The mobile builder looks similar to the web editor but uses a phone-sized canvas (375px wide by default). The component panel on the left shows only mobile-compatible components, and many web-only components (like the Retool HTML component) are not available.

The mobile canvas uses a vertical stack layout by default — components stack vertically from top to bottom. Drag components from the panel onto the canvas. Key mobile components: List View (scrollable item list), Scanner (camera-based barcode/QR reader), Signature Pad, Native Camera (capture photos), Location (get GPS coordinates), Text Input, Button, and Select. Mobile components snap to the full width of the canvas by default, which is appropriate for touch targets.

Mobile queries work the same as web queries — create SQL or REST API queries in the Query panel and reference them in component properties. The key difference is that mobile apps often run offline or on poor connections, so design queries to be lightweight. A List View component bound to {{ getItems.data }} will display each item with configurable title and subtitle fields. Reference query columns in the List View Inspector: Title: {{ item.name }}, Subtitle: {{ item.status }}.

1-- Mobile-optimized query: limit columns and rows
2SELECT id, name, status, created_at
3FROM work_orders
4WHERE assigned_to = {{ retoolContext.currentUser.email }}
5  AND status IN ('pending', 'in_progress')
6ORDER BY created_at DESC
7LIMIT 100;

Drag a Scanner component onto the canvas. The Scanner supports both camera-based QR/barcode scanning and USB/Bluetooth hardware scanners (Zebra, Honeywell, Proglove). In the Inspector, set the Scanner type: 'Camera' for device camera, or 'Keyboard wedge' for hardware scanners that simulate keyboard input. Set an event handler on 'On scan' to trigger a query using {{ scanner1.value }} — the scanned barcode value. For example, a SELECT query: WHERE barcode = {{ scanner1.value }}.

1// On scan event handler — JS Query
2// Triggered when scanner1 reads a barcode
3await getItemByBarcode.trigger({
4  additionalScope: { barcode: scanner1.value }
5});
6
7// If item not found, show notification
8if (!getItemByBarcode.data.length) {
9  utils.showNotification({
10    title: 'Not found',
11    description: `No item found for barcode: ${scanner1.value}`,
12    notificationType: 'warning',
13  });
14}

Save your mobile app. On your iOS or Android device, open the Retool Mobile app and log in with your Retool credentials. Your app will appear in the list of available apps. Tap it to open it. Changes you make in the mobile builder are reflected immediately in the device app when you save — no rebuild or deployment step needed during development. This live preview makes mobile development fast.

Drag a Location component onto the canvas (not visible to users — it runs in the background). In its Inspector, configure 'Detect location on page load' to ON. Reference the current location in queries or other components using {{ location1.coords.latitude }} and {{ location1.coords.longitude }}. For example, use these in a SQL query to find nearby items: WHERE ST_Distance(coordinates, ST_MakePoint({{ location1.coords.longitude }}, {{ location1.coords.latitude }})) < 1000.

When ready to deploy to your team, click 'Publish' in the mobile builder (same as web apps). Team members who have the Retool Mobile app installed and belong to your Retool org will automatically see the published app in their app list. To control which users see which apps, use Retool's standard permission system: Settings → Groups → assign the app to specific groups.