React Native vCards - vCards JS for use with React Native

Updated for newer versions of expo-file-system. Now listed as a peerDependency.

Create vCards to import contacts into Outlook, iOS, Mac OS, and Android devices from your website or application.

Install

Note that this package requires expo-file-system for saving files. The easy way to install expo-file-system is the following:

expo insatll expo-file-system

Then to install this package, run the following:

expo install react-native-vcards@https://github.com/idxbroker/react-native-vcards.git --save

Usage

Below is a simple example of how to create a basic vCard and how to save it to a file, or view its contents from the console.

Basic vCard

import vCard from "react-native-vcards";

//create a new vCard
contact = vCard();

//set properties
contact.firstName = "Eric";
contact.middleName = "J";
contact.lastName = "Nesser";
contact.organization = "ACME Corporation";
contact.photo.attachFromUrl(
  "https://avatars2.githubusercontent.com/u/5659221?v=3&s=460",
  "JPEG"
);
contact.workPhone = "312-555-1212";
contact.birthday = new Date("01-01-1985");
contact.title = "Software Developer";
contact.url = "https://github.com/enesser";
contact.note = "Notes on Eric";

//save to file
contact.saveToFile("./eric-nesser.vcf");

//get as formatted string
console.log(contact.getFormattedString());

Embedding Images

You can embed images in the photo or logo field instead of linking to them from a URL using base64 encoding.

//can be Windows or Linux/Unix path structures, and JPEG, PNG, GIF formats
contact.photo.embedFromFile("/path/to/file.png");
contact.logo.embedFromFile("/path/to/file.png");

Complete Example

The following shows a vCard with everything filled out.

import vCard from "react-native-vcards";

//create a new vCard
contact = vCard();

//set basic properties shown before
contact.firstName = "Eric";
contact.middleName = "J";
contact.lastName = "Nesser";
contact.organization = "ACME Corporation";

//link to image
contact.photo.attachFromUrl(
  "https://avatars2.githubusercontent.com/u/5659221?v=3&s=460",
  "JPEG"
);

//or embed image
contact.photo.attachFromUrl("/path/to/file.jpeg");

contact.workPhone = "312-555-1212";
contact.birthday = new Date("01-01-1985");
contact.title = "Software Developer";
contact.url = "https://github.com/enesser";
contact.workUrl = "https://acme-corporation/enesser";
contact.note = "Notes on Eric";

//set other vitals
contact.nickname = "Scarface";
contact.namePrefix = "Mr.";
contact.nameSuffix = "JR";
contact.gender = "M";
contact.anniversary = new Date("01-01-2004");
contact.role = "Software Development";

//set other phone numbers
contact.homePhone = "312-555-1313";
contact.cellPhone = "312-555-1414";
contact.pagerPhone = "312-555-1515";

// set fax/ facsimile numbers
contact.homeFax = "312-555-1616";
contact.workFax = "312-555-1717";

// set email addresses
contact.email = "[email protected]";
contact.workEmail = "[email protected]";

//set logo of organization or personal logo (also supports embedding, see above)
contact.logo.attachFromUrl(
  "https://avatars2.githubusercontent.com/u/5659221?v=3&s=460",
  "JPEG"
);

//set URL where the vCard can be found
contact.source = "http://mywebpage/myvcard.vcf";

//set address information
contact.homeAddress.label = "Home Address";
contact.homeAddress.street = "123 Main Street";
contact.homeAddress.city = "Chicago";
contact.homeAddress.stateProvince = "IL";
contact.homeAddress.postalCode = "12345";
contact.homeAddress.countryRegion = "United States of America";

contact.workAddress.label = "Work Address";
contact.workAddress.street = "123 Corporate Loop\nSuite 500";
contact.workAddress.city = "Los Angeles";
contact.workAddress.stateProvince = "CA";
contact.workAddress.postalCode = "54321";
contact.workAddress.countryRegion = "United States of America";

//set social media URLs
contact.socialUrls["facebook"] = "https://...";
contact.socialUrls["linkedIn"] = "https://...";
contact.socialUrls["twitter"] = "https://...";
contact.socialUrls["flickr"] = "https://...";
contact.socialUrls["custom"] = "https://...";

//you can also embed photos from files instead of attaching via URL
contact.photo.embedFromFile("photo.jpg");
contact.logo.embedFromFile("logo.jpg");

contact.version = "3.0"; //can also support 2.1 and 4.0, certain versions only support certain fields

//save to file
const documentPath = rnfs.DocumentDirectoryPath;
contact.saveToFile(`${documentPath}/eric-nesser.vcf`);

//get as formatted string
console.log(contact.getFormattedString());

Contributions

Contributions are always welcome!

Thanks to mplno, lop-cz, jkrenge.

License

Copyright (c) 2014-2015 Eric J Nesser MIT