Actions can be assigned to any Buttons or Touchable in your project.

Types of Actions

Once opened, you will be able to see the available Actions:

Action

Description

Navigate: screen

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 Site in 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.

Link to Phone, Text or Email app

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.

Custom Function

Run a function you've created in the Custom Screen Code window.

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

Parse JSON

Chain with an API Request action and use this action to parse its response with .json().

Extract Key

Chain with API Request and Parse JSON actions and 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".

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 property Destination

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:


Did this page help you?