Actions
Actions can be used on a screen in your Draftbit app that has an On Screen Focus Trigger or a component like Fetch in addition to components that support interactions like Button, Touchable, Action Sheet Item, etc.
Types of Actions
Once opened, you will be able to see the available Actions:

Action | Description |
---|---|
Navigate | In the dropdown, select a screen in the current navigator or a different navigator to navigate to. (Stack Navigator only: Aside from screens and navigators, a Go back option is in the dropdown which takes you to the previous screen in the stack.) |
Open Browser | Accepts the URL for a website. This action allows you to open any http:// or https:// URL in the systems web browser.On iOS and Android this will open the URL and when the user is finished will return them to the application. On the web, this will open the URL in a new window. |
Open App Link | Accepts a URL Scheme to open links to other applications. For example, you can open the telephone, messages, maps, or the browser. On iOS and Android, this will take users out of your application and into another, exiting your application. You can only open an application that the local system supports. |
Run a Custom Function | Run a function you've created in the Custom Code. |
API Request | Make API requests after a button is pressed. Learn how to configure in this article: Sending Data. |
Set Global Variable | Set the value of a defined Global Variable. (For example, from the response of an API Request). |
Extract Key | Chained with API Request action. Use this action to extract a key from an object or array. To construct the Path , use dot (. ) or square bracket notation ([] ) to traverse deeply nested objects.For example, use .fields.Name to extract the value of Name from the following object:{ "fields": { "Name": "Some Value" } } |
Conditional Stop | Requires a value to be checked whether it evaluates to true or false. When it evaluates to true, no further actions will be performed in the list of "Actions". |
Open Camera | Opens a device's Camera to take a picture or record a video to upload. Returns image data in Base64 format. Can be chained with the "Run a Custom Function" action to upload the data to a cloud service. The image data returned can be also be stored in a Variable to upload to a backend service (only if the backend service allows uploading images/videos in Base64 format). |
Open Image Picker | Opens a device's media library to select a photo or a video to upload. Returns image data in Base64 format. Can be chained with the "Run a Custom Function" action to upload the data to a cloud service. The image data returned can be also be stored in a Variable to upload to a backend service (only if the backend service allows uploading images/videos in Base64 format). |
Log to Console | An action that is used as a debugging tool. You can pass the result of an action (for example, an API request or a Custom function, or any type of action that returns a result) to a preview response. The result triggered by this action is shown in the Console Logs tab in the Bottom Panel. This is similar to the browser's Developer Tools and for quick previewing is now available in Draftbit. |
Refetch Data | An action that is used to re-trigger a specific endpoint to fetch the data updates from it. You will use this type of action, for example, when you want to allow fetching data updates manually within the application. To use it, add it as an action, for example, on a Button component. There are a couple of requirements to remember when using this action: - The component that triggers this action must be nested inside the Fetch component. - The endpoint you are re-fetching the data for, needs to have a Role and an Object type configured already. |
Get Location | An action that requests permission and saves an object with location information of the device. The result saved can be assigned a name so that you can re-use the result or save it in a App or a Device Variable. The location object returned by this action contains the following fields: js { coords: { accuracy: 20.6185685750211, altitude: 43.04912245369878, altitudeAccuracy: 6.938014590198416, heading: 180.40493651139974, latitude: 30.747315, longitude: -85.088285, speed: 0 }, timestamp: 1634698876011.571 } |
Update Map Location | Action that allows you to focus on a specific region of the map when triggered. It requires longitude and latitude coordinates as input values.This action also requires a Map component on the app screen to reference. |
Get Expo Push Token | Action that returns a unique token associated with the device for Expo push notifications. It is usually chained with a "Run a Custom Function" action to upload the data to a cloud service or to store the value of the token in a database. |
Dismiss Keyboard | Action that is used on touch or button components to dismiss the Keyboard (when already opened). An example to use this action is with the Keyboard Aware Scroll View component when the Allow Touch Events has set its value to always. |
Select File | Action that opens the device's file picker. Encode Selected File to Base64: If this option is enabled, the result will be a base64 string representation of the selected file. Good for uploading to a database or object storage. When not enabled, the result returns a DocumentResult object |
Show Alert | Action that displays a platform-native alert dialog. Accepts a Title, Message, and Button Text. Note: On web, only Message is displayed. |
Media Actions
In a Draftbit app, you can implement features such as opening a device's camera, taking a picture, and uploading to a cloud service to a backend of the choice using the following actions:
- Open Camera
- Open Image Picker
Both of these actions share the same set of attributes. These attributes are used to manipulate the image or the video after it has been taken or recorded but before uploading using a device's native controls.
Attribute | Description |
---|---|
Media Types | To set the value to either select an image or a video. |
Allow Editing | enable this option to edit an image or a video after its picker. On iOS, you will find native features like trimming a video. |
Quality | Using the range slider, you set the value for the compression size of the image to be picked between 0 and 1. The value 0 represents compress for small size and 1 represents compress for maximum quality. |
Result Name | It is useful to store the image with a variable name such that the variable name can be used to send the image data in the body configuration to a cloud service (uploading an image) using an API request action. The result by the action is in the image data in Base64 format. |
Both of these actions can be mapped as interactions on a Buttons or a Touchable component.
In the above example, you will see the example of the "Open Image Picker" action.
Results of the picker using image picker or camera action return image data. The data is in Base64 format. It can be further chained with a "Run a Custom Function" action to upload the data to a cloud service.
The image data returned can be also be stored in a Variable to upload to a backend service (only if the backend service allows uploading images/videos in Base64 format).
Tutorials on Image Uploading and using Media actions
Common Action Recipes
Using Log to Console action with API requests
If you want to debug or preview the result of an API request action, you can add a Log to Console as a subsequent action. The results of the Log to Console action are shown in the Console Logs tab in the Bottom Panel.
Here is an example of a POST
API request that returns an error when using a Log to Console action is used as subsequent action to the API request action. The error message is visible when the Console Logs tab is toggled from the Bottom Panel.
If the previous API request to submit new data returns a response and not an error, it logs the result (if) returned by the API request.

Debugging with Log to Console with an action
Any type of action that is returning a result to be used by a subsequent action, because you can use it to confirm that data is being passed in (e.g. debugging auth, getting data from a camera component, etc.) can be used with Log to Console.
Best practice: Remove Console Log actions before publishing the app
Make sure to remove any references to Console Log actions in your Draftbit app when you are preparing or are ready to publish your app to the app store.
Behind the scenes, a Console Log action is a
console.log()
statement. These statements can cause a bottleneck in your production app. Reference.
Console Log statements in Custom Code
If you have a console.log()
statement in your Custom Code, you will see them logged in the Console Logs tab in the Bottom Panel.
In the example below, there is a Custom Code Component defined as follows:
import React from 'react';
import { Text } from 'react-native';
export const MyComponent = () => {
console.log('Console statement inside Custom Code Component triggered!');
return <Text>Hello world!</Text>;
};
Once the screen that uses the MyComponent
from the above snippet is in focus, you can view the results of the log statements in the Console Logs tab (as shown below).

Best practice: Remove console.log() statements from Custom Code before publishing the app
Make sure to remove any references to
console.log()
statements in your Draftbit app's Custom Components or Functions, when you are preparing or are ready to publish your app to the app store.These statements can cause a bottleneck in your production app. Reference.
Navigating between screens using "Navigate" action
Using the action type Navigate, you can create a user experience to allow them to navigate from one screen to another.
To implement this navigation behavior:
- select a Button or Touchable in the Components tree
- go to the Interactions tab in the Properties Panel
- click the '+' (plus button) next to the Action to open the menu of Actions to choose from
- choose the action
Navigate: screen
and then select the appropriate screen to navigate as a value to the propertyDestination
Passing data between screens using "Navigate" action
Creating a navigate action by adding navigation params to an endpoint will allow you to Pass Data between your screen. In the example below, the field title
is coming from Navigation Params.

This is possible because of a property called initial value. On a Text Input component, you will find this property in Data Tabs (of Properties panel). The value for this property is used to initialize with a value from a data source or navigation parameter. In the current example, the initial value is passed as a navigation parameter from a List inside a Fetch component. This means that the value is coming from the REST API.
The Navigation Params to pass data are defined in the Parent screen or the screen the user is navigating from.

Here is a complete flow of passing a param using the action on a button when navigating from one screen to another.

Creating Navigation Params using "Navigate" action
Navigation Params allow passing data from the initial screen to the destination screen. When developing screens you can create the defined Navigation Params using the "Navigate" action.
Here is how to use Create Navigation Params
- On the initial screen, select the Button or Touchable, go to the Interactions tab in the Properties Panel

- Then, under Create Navigation Parameter define a variable name that you'd expect on the destination screen and select its value from the dropdown menu. Since its a navigation parameter, it will show under the section Pass Data.

- Go to the Destination screen. Select screen name in the Components tree. Select the Data tab in the Properties panel and you can verify that the navigation parameter defined in the previous step exists.
Under the section Receive Parameters, you can view which parameters are available on the Destination screen.

While building the destination screen, under the section Receive Parameters you can add a test value for each navigation parameter. This will allow you to add mock data for representation components such as Text.
Note that once you map variables from an API Endpoint the test values for the receiving parameters are replaced by dynamic values incoming from the API endpoint.

To remove a Navigation Param, you can click the '-' button next to the param.

Stacking Actions
You can add multiple actions to your Button or Touchable by clicking the '+' button in the Actions panel and selecting additional actions from the dropdown.
Below is an example of Stacked Actions at a Button component. When the Button is pressed, the highlighted actions in the Properties panel execute in the sequence they are added.

URL schemes
This section describes how URL schemes should be described as an input to the Link to Phone, Text or Email app action.
URL scheme | Example Use | Description |
---|---|---|
mailto | mailto:[email protected] | Opens a new email in the Mail app with the email address provided set as the recipient. |
tel | tel:+15555555555 | Prompts user to call the the phone number provided. |
sms | sms:+15555555555 | Opens a new message in the SMS app with the phone number provided set as the recipient. |
https:// or http:// | https://draftbit.com | Opens the website in the default browser, outside the app. |
Google Maps
If Google Maps is installed on the user's device, the Google Maps application will open. If it isn't installed, Google Maps will open in the browser. Check the Google Maps Developer Guide for more information on constructing valid URLs.
Search
Launch Google Maps with a list of locations that match the query with the closest one being pinned.
https://www.google.com/maps/search/?api=1&query=Shake+Shack

Directions
Launch Google Maps with directions to the location defined in the URL from the user's current location.
https://www.google.com/maps/dir/?api=1&destination=Shake+Shack+66+E+Ohio+St+Chicago+IL

Display a Map
Launch a blank map with the user's location highlighted.
https://www.google.com/maps/@?api=1&map_action=map

Display a Street View panorama
Launch a Street View panorama of the selected location.
https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=48.857832,2.295226&heading=-45&pitch=38&fov=80

Additional Resources
Stacked Actions is used in the following guides:
Updated 4 months ago