How to Use the Retool Mobile App Features

Drag a 'Native Camera' component onto the mobile canvas. When triggered (usually by a button tap that opens the component or by setting it to auto-capture), it opens the device camera. The captured photo is available as {{ camera1.value }} — a Base64-encoded image string. Display it immediately using an Image component with Source set to {{ camera1.value }}. To store it, send the Base64 string to a REST API endpoint or Supabase Storage. For S3 uploads, use an Edge Function or API endpoint that accepts Base64 and stores the file.

1// JS Query: uploadCapturedPhoto
2// Sends Base64 photo to a REST API endpoint
3
4if (!camera1.value) {
5  utils.showNotification({
6    title: 'No photo',
7    description: 'Take a photo first.',
8    notificationType: 'warning',
9  });
10  return;
11}
12
13// Strip the data:image/jpeg;base64, prefix if present
14const base64Data = camera1.value.replace(/^data:image\/\w+;base64,/, '');
15
16await uploadPhoto.trigger({
17  additionalScope: {
18    photoData: base64Data,
19    fileName: `photo_${Date.now()}.jpg`,
20  },
21});

Enterprise warehouse and retail apps often use dedicated hardware scanners (Zebra, Honeywell, Proglove) instead of the device camera. These scanners output scanned values as keyboard input. In the Retool Mobile Scanner component Inspector, set Mode to 'Keyboard wedge'. In this mode, the component listens for rapid keyboard input that matches barcode patterns. The scanner works without needing camera access and processes scans faster than camera-based scanning. Test by connecting a USB or Bluetooth scanner to your device.

Drag an NFC component onto the mobile canvas. This component is invisible (no visual output) but reads NDEF-formatted NFC tags when the device is brought near one. Enable 'Auto start scanning' in the Inspector so it continuously listens. The scanned payload is available as {{ nfc1.value }} — typically a text string, URL, or JSON payload encoded in the NFC tag. Set an event handler on 'On scan' to process the NFC data. Android NFC scanning works in the background; iOS requires the user to explicitly hold the device near the tag.

1// On scan event handler for NFC
2// nfc1.value contains the NDEF text record payload
3
4const tagPayload = nfc1.value;
5
6try {
7  // Attempt to parse JSON payload from NFC tag
8  const parsed = JSON.parse(tagPayload);
9  await lookupAsset.trigger({
10    additionalScope: { assetId: parsed.id },
11  });
12} catch {
13  // Plain text NFC tag (e.g., serial number)
14  await lookupAsset.trigger({
15    additionalScope: { assetId: tagPayload },
16  });
17}

Drag a Signature Pad component onto the canvas. Users draw their signature on screen using their finger or a stylus. When the user lifts their finger, the signature is captured as a Base64 PNG image available via {{ signaturePad1.value }}. Display a preview using an Image component. Add a 'Clear' button connected to the Signature Pad's reset() method and a 'Submit' button that saves the signature. Store the Base64 PNG in your database or upload to cloud storage.

1// Submit button event handler — save signature
2await saveSignature.trigger({
3  additionalScope: {
4    signatureData: signaturePad1.value,
5    recordId: table1.selectedRow.data.id,
6    signedAt: new Date().toISOString(),
7    signedBy: retoolContext.currentUser.email,
8  },
9});
10
11utils.showNotification({
12  title: 'Signature saved',
13  notificationType: 'success',
14});
15
16// Clear the pad after saving
17await signaturePad1.reset();

The Location component captures the device's GPS coordinates. Set 'Watch position' to ON for continuous location tracking (useful for fleet management). For one-time location capture, use 'Detect on tap' via a button. Access coordinates as {{ location1.coords.latitude }}, {{ location1.coords.longitude }}, and accuracy as {{ location1.coords.accuracy }} in meters. Include coordinates in insert queries to tag records with a location. Use a Map component to display the current position.

1-- SQL INSERT with geolocation
2INSERT INTO field_reports (
3  title,
4  description,
5  latitude,
6  longitude,
7  accuracy_meters,
8  reported_by,
9  created_at
10) VALUES (
11  {{ titleInput.value }},
12  {{ notesInput.value }},
13  {{ location1.coords.latitude }},
14  {{ location1.coords.longitude }},
15  {{ location1.coords.accuracy }},
16  {{ retoolContext.currentUser.email }},
17  NOW()
18)
19RETURNING id;

Push notifications for Retool Mobile require the Business plan and use Retool Workflows. In your Retool org, create a Workflow with a schedule or webhook trigger. Add a 'Send push notification' step targeting specific users or groups. On the device, users must allow notifications when prompted by the Retool Mobile app. Notifications can deep-link to specific apps and include a data payload that the app can process when opened.