NFC on Mobile - Implementation, Testing ,and Editing Question

💬 App Building
,
1

My goal is to allow users to tap their phone on an iPad and have a form be populated with their contact information - first name, last name, birthday , etc. - if they choose to do so. The form can still be filled out manually....

I added an NFC reader to my mobile app but since I am editing the app on my laptop, how am I supposed to know what data I read from the device since the nfc reader doesn't capture in web browsers? The docs are fairly sparse on this and I have not found any more info in this forum to help me resolve my questions.

Additionally, seems that when I am trying to read an NFC "tag" nothing happens when both devices are close together....

Any help or direction would be appreciated.

2

I found a potential example of a vCard and parse it out for now.
The vCard coulld be the output from the reader so more work may need to be done....

const vCardData = `
BEGIN:VCARD
VERSION:3.0
FN:John Doe
ORG:ABC Corp
TITLE:Product Manager
TEL;TYPE=WORK,VOICE:+1-555-123-4567
EMAIL:john.doe@example.com
URL:https://www.example.com
ADR;TYPE=HOME:;;123 Main St;Los Angeles;CA;90001;United States of America
END:VCARD
`;

function parseVCard(vCard) {
  const lines = vCard.split(/\r?\n/).map(line => line.trim()).filter(line => line !== '');

  const result = {};

  lines.forEach((line) => {
    if (line.startsWith('FN:')) {
      const name = line.replace('FN:', '').trim();
      const [first_name, ...last_name] = name.split(' ');
      result.first_name = first_name || '';
      result.last_name = last_name.join(' ') || '';
    } 
    else if (line.startsWith('EMAIL:')) {
      result.email = line.replace('EMAIL:', '').trim();
    } 
    else if (line.startsWith('ADR;TYPE=HOME:')) {
      const addressParts = line.replace('ADR;TYPE=HOME:', '').trim().split(';');
      result.city = addressParts[3] || ''; // City
      result.state = addressParts[4] || ''; // State
      result.country = addressParts[6] || ''; // Country
    }
  });

  return result;
}

// Parse and output the result
//const parsedData = parseVCard(vCardData);
//console.log(parsedData);


return  parseVCard(vCardData);
3

Hey @ScottR,

Sorry for the delayed response I was out of office.

Just heard back from our mobile engineering manager.

They told me they " think the shape of the data can depend on the type of NFC tag. I think the user's best bet is to test on their device and display nfcReader1.rawData in a text component".

And they tested out an NFC tag with the Retool mobile app and got the following data payload.

IMG_9303
IMG_93031320×2868 114 KB

Hope this helps and let me know if you are still having trouble getting the data payload with you testing!