Once opened, you will be able to see the available Actions:
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
Open Site in Browser
Accepts the URL for a website. This action allows you to open any
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.
Run a function you've created in the Custom Screen Code window.
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).
Chain with an API Request action and use this action to parse its response with
Chain with API Request and Parse JSON actions and use this action to extract a key from an object or array.
To construct the
For example, use
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".
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: screenand then select the appropriate screen to navigate as a value to the property
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.
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.
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.
This section describes how URL schemes should be described as an input to the Link to Phone, Text or Email app action.
Opens a new email in the Mail app with the email address provided set as the recipient.
Prompts user to call the the phone number provided.
Opens a new message in the SMS app with the phone number provided set as the recipient.
Opens the website in the default browser, outside the app.
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.
Launch Google Maps with a list of locations that match the query with the closest one being pinned.
Launch Google Maps with directions to the location defined in the URL from the user's current location.
Launch a blank map with the user's location highlighted.
Launch a Street View panorama of the selected location.
Stacked Actions is used in the following guides:
Updated 18 days ago