react-native-contacts-wrapper-pro
This is a simple wrapper for the native iOS and Android Contact Picker UIs. When calling the API functions, the appropriate picker is launched. If a contact is picked, the promise is resolved with the requested data about the picked contact.
This uses the ContactsContract API for Android, AddressBook library for iOS8 and below and the new Contacts library for ios9+.
The API is currently very basic. This was started just as a way of selecting a contact's email address. The getContact function was added as a more generic way of returning contact data. Currently this returns Name, Phone and Email for picked contact. In future more fields will be added to this, and possibly more specific methods similar to getEmail.
Feel free to extend the functionality so it's more useful for everyone - all PRs welcome!
Installation
Automatic (works for iOS without condition; for Android with RN 0.28 and before)
If you have rnpm installed, all you need to do is
npm install react-native-contacts-wrapper-pro --save
react-native link react-native-contacts-wrapper-pro
Manual
Android (with RN 0.29 and above)
in settings.gradle
include ':react-native-contacts-wrapper-pro'
project(':react-native-contacts-wrapper-pro').projectDir = new File(settingsDir, '../node_modules/react-native-contacts-wrapper-pro/android/app')
in android/app/build.gradle
dependencies {
compile project(':react-native-contacts-wrapper-pro')
in MainApplication.java
add package to getPacakges()
import com.lynxit.contactswrapper.ContactsWrapperPackage;
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...,
new ContactsWrapperPackage()
);
}
in AndroidManifest.xml
make sure you have the following setting even if you have done react-native upgrade
<application
android:name=".MainApplication"
Also add
<uses-permission android:name="android.permission.READ_CONTACTS" />
iOS
- Open your xCode project
- Click project name in project navigator
- Select the main target in the left hand menu
- Scroll to Linked Frameworks and Libraries
- click + at bottom
- Click ‘Add Other'
- Find and add your new project’s .xcodeproj file from node_modules
- This will now appear in project explorer, drag in under the Libraries group.
- In same screen, click + again, you should now see the .a file for you project, Add this
- Clean and Rebuild your Xcode project
API
getContact
(Promise) - returns basic contact data as a JS object. Currently returns name, first phone number and first email for contact.
getEmail
(Promise) - returns first email address (if found) for contact as string.
Usage
Methods should be called from React Native as any other promise. Prevent methods from being called multiple times (on Android).
Example
An example project can be found in this repo: https://github.com/LynxITDigital/react-native-contacts-wrapper-example/tree/master
import ContactsWrapper from 'react-native-contacts-wrapper-pro';
...
if (!this.importingContactInfo) {
this.importingContactInfo = true;
ContactsWrapper.getEmail()
.then((email) => {
this.importingContactInfo = false;
console.log("email is", email);
})
.catch((error) => {
this.importingContactInfo = false;
console.log("ERROR CODE: ", error.code);
console.log("ERROR MESSAGE: ", error.message);
});