React Native vCards - vCards JS for use with React Native

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

Install

Note that this package requires react-native-fs for saving files. If you have installed rnpm, the easy way to install react-native-fs is the following:

npm install react-native-fs && rnpm link react-native-fs

Then to install this package, run the following:

npm 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