🔗

Mapping URLs from a REST API to Touchables

With Data-enabled Linking, you're now able to map URLs from an API to Buttons and Touchables in the Builder. For this quick example, we're just going to use the /sneakers endpoint from our Example Data service since each item contains image URLs. We're going to attach the imageURL to each sneaker in the list so that when you select a sneaker, it'll open the Image in the browser in a separate window.

image

💡

Not familiar with configuring an API in the Builder? Learn how to get set up by checking the documentation.

After we've set up the REST API in the Builder, you can set up a basic Fetch component. In most tutorials, you'll set everything up as Fetch > List > View > and then design each list item inside of the View. This time, you're going to want to set everything up as Fetch > List > View > Touchable > View > and design the list item inside of the 2nd View (pictured below)

image

⚠️

Make sure you don't forget to include the Touchable! There's no way to attach the Linking action without it.

Next, you can map your data to the components you've added inside of your View. To keep things simple, we've just mapped the imageURL to the Image component and the title to the Text component.

image

Now, the last thing to map is the imageURL to the Touchable. To do this, select the Touchable in the Layer Tree and go to the Actions tab.

Next, you'll click the '+' on the right-hand side of the Action header and select 'Open Link with Linking' from the dropdown.

image

Once that's been selected, a dropdown will appear that will allow you to select the Destination (a data value that you want the Touchable to link to). Select media.imageUrl from the dropdown.

image

And that's it! All there's left to do is preview your work. You can do this by viewing your app in Live Preview. After you've loaded your app, select one of the sneakers from the list and watch as you're taken directly to your browser.

image