Passing Data

Passing data through Navigation Params between screens will allow you to provide a user experience in your app where the app user can navigate from a List View (initial screen) by selecting an item from that list and be taken to a Detail View (destination screen).

There are 4 main steps in setting this up:

  1. Selecting how you want to pass between screens by defining navigation params in the REST Services & Endpoints menu
  2. Configuring your List View screen and Detail View screen
  3. Configuring the data to be passed inside of a navigation action
  4. Mapping the passed data on the Detail View screen

Defining Navigation Params on an Endpoint

After you've added a new Service you will be prompted to create a new endpoint. You will need two endpoints: one for the List View and one for the Detail View.

1768

REST API Service

In the Endpoint menu, you will see an input to Paths & Parameters.

1198

For the List View screen: create an endpoint for the entire list.

1760

List View endpoint

For the Detail View screen: create an endpoint that takes a Variable (with double brace {{}} notation). In this case, you are setting the item's id as the Navigation Param. Adding a variable the Param will trigger a Test Value section to appear, as seen below. Here, you will be prompted to add a value to use for your query as you build your screen.

1768

Detail View endpoint

Save and exit the modal after creating the service and two endpoints.

After you've exited, you can edit or delete your Navigation Param at any time by editing what you've entered in the Paths & Parameters input.

Configuring your List View screen and Detail View screen

Configure your List screen the way you would normally set the screen to Fetch Data with endpoint you created to fetch the entire list in the first step. Make sure to wrap your View containing the List items in a Touchable, as seen below. Wrapping the View in a Touchable is what will allow you to navigate to the Detail view screen.

644

For your Detail View screen, make sure to include a Fetch component at the top of the screen, put a View inside of it, and then build out the rest of your screen inside of the View. Including the Fetch component is necessary for mapping the data to the rest of the components on your screen.

Configuring data to be passed in the navigation action

Select the Touchable on your List View screen in the Layout tree. Then, go to the Interactions tab in the Properties Panel. Click the '+' next to the Action header to add a new Navigation Action

Select the Detail View screen as the destination. A Pass Data section will appear and here is where you can define which values you'd like to pass from the List View screen to the Detail View screen by typing value names into the input and selecting one of the original endpoint values from the dropdown, next to the input, as seen below.

2240

Mapping data to Detail View screen

Select the Fetch component at the top of the Detail View screen. In the Data tab, select your Service and the Endpoint that is configured to fetch a single item. After selecting the Endpoint, set the Navigation Param from the dropdown under Configuration.

1400

Once you have that set-up, you are able to map data values to each component inside of your Detail View screen.

Additional Resources