Passing data through navigation params between screens will allow you to create a List View screen, select an item from that list, and be taken to a Detail View screen.
There are 4 main steps in setting this up:
- Selecting how you want to pass between screens by defining navigation params in the REST Services & Endpoints menu
- Configuring your List View screen and Detail View screen
- Configuring the data to be passed inside of a navigation action
- Mapping the passed data on the Detail View screen
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.
In the Endpoint menu, you will see an input to
Add Path & Params.
For the List View screen: create an endpoint for the entire list.
For the Detail View screen: create an endpoint that takes a Variable (with double bracket notation). In this case, we're setting the item's id as the navigation param. Adding a variable as a navigation param will trigger a Test Values 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.
Save and exit the menu 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 'Add Path & Params' input.
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.
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.
Select the Touchable on your List View screen in the Layer Tree. Then, go to the Actions tab in the Properties Panel. Click the '+' next to the Action header to add a new navigation action and select your 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.
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 he Navigation Param from the dropdown under Configuration.
Once you have that set-up, you are able to map data values to each component inside of your View.
Updated 8 months ago