# NFC connection

This NFC feature enable you to communicate with an NFC device, read its content and use that content in an API call.

{% hint style="info" %}
This feature is available with the [Advanced and Business add-ons](https://www.bravostudio.app/pricing).
{% endhint %}

## Requirements

1. An NFC tag with content.
2. A published app in able to test.
3. A device with NFC.

## The tag

:round\_pushpin:**Where to add the tag:** Any layer except top-level.

To create the NFC action, use the following tag in the UI element that should open the NFC sensor upon pressing it.

<mark style="color:red;">`[action:remote-nfc]`</mark>

Once you do that, you'll be able to bind a request to send the code data to your backend. In this request, there will be two variables available to use:

* <mark style="color:red;">`${nfcResult}`</mark> -> contains the value of the NFC.
* <mark style="color:red;">`${nfcFormat}`</mark> -> contains the format of the NFC used. If there isn't any specification, it will return NFC.

## How to set it up

1. Add the <mark style="color:red;">`[action:remote-nfc]`</mark> tag to the UI element that will trigger the NFC scanner.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FVTfIh4sAoN1AuxXv6YRB%2Fimage.png?alt=media&#x26;token=ac79be7b-85d3-4357-a75b-166e770a251c" alt=""><figcaption></figcaption></figure>

2. Create an API request that communicates with your backend. Use <mark style="color:red;">`${nfcResult}`</mark> in the request to send the data read by NFC.&#x20;
3. Bind the request to the NFC remote action

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FsUDpZWlp5CZRoi1Mzkys%2Fimage.png?alt=media&#x26;token=5b9dcc01-45d6-43d6-8b12-e6a4b6bb95f6" alt=""><figcaption></figcaption></figure>

## How to test

1. Open the app and tap on the component with the action <mark style="color:red;">`[action:remote-nfc]`</mark>
2. In Android, if the device has no NFC, an alert will be displayed. If it has NFC but disabled, another alert will be displayed with a link to enable NFC. If it has NFC and it is enabled, a modal will show up.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FsfYabOElbxmQWemWIyz3%2FFrame%204%20(7).png?alt=media&#x26;token=699e9edf-f9d2-4d61-aaba-03d7569301e7" alt=""><figcaption></figcaption></figure>

3. Approach your device to an NFC tag/anything contactless, and it should show the string read in the next page.

{% hint style="info" %}
In Android, NFC works on **final apps**. In able to test in the final app, you will need to ask for a build and install it. You can use a **debug APK** to test it without publishing it to Google Play.
{% endhint %}

## Example app

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/file/hj6owF1XYhTYwb5vJzonkO/Bravo-Sample%3A-NFC-connect?node-id=0-1&t=O4FPXMwibb6Pq47V-0>" %}