Skip to content

A cross-platform contact selection library for react-native

License

Notifications You must be signed in to change notification settings

keepworks/react-native-select-contact

 
 

Repository files navigation

react-native-select-contact

Originally branched from react-native-contacts-wrapper

This is a simple wrapper for the native iOS and Android Contact Picker UIs, with some optional help for selecting specific fields from the contact.

Installation

yarn add react-native-select-contact

For React Native => 0.59 only:

react-native link react-native-select-contact

Make sure your manifest files includes permission to read contacts

<uses-permission android:name="android.permission.READ_CONTACTS" />

API

Methods

selectContact(): Promise<Contact | null>;
selectContactPhone(): Promise<ContactPhoneSelection | null>;
selectContactEmail(): Promise<ContactEmailSelection | null>;
selectContactPostalAddress(): Promise<ContactPostalAddressSelection | null>;

These methods all open up a separate ViewController (on IOS) or Activity (on Android) to select a contact. See Types below.

For selectContactPhone, selectContactEmail, or selectContactPostalAddress, if there are more than one phone or email, an ActionSheetIOS is shown for IOS, and the first entry is returned for Android.

A return value null may be because the user cancelled the contact selection. You shouldn't need to worry about doing anything if the promise resolves to null.

Optional Android ActionSheet

You can enable ActionSheet functionality for Android by installing an optional dependency:

yarn add @yfuks/react-native-action-sheet
./node_modules/.bin/react-native link @yfuks/react-native-action-sheet 

This will provide an ActionSheetAndroid native module that this library will pick up on and use when there are more than one phone number or email on a selected contact.

Types

interface PhoneEntry {
    number: string,
    type: string
}

interface EmailEntry {
    address: string,
    type: string
}

interface AddressEntry {
    formattedAddress: string, // android only
    type: string, // android only
    street: string,
    city: string,
    state: string,
    postalCode: string,
    isoCountryCode: string
}

interface Contact {
    name: string,
    phones: PhoneEntry[],
    emails: EmailEntry[],
    postalAddresses: AddressEntry[]
}

interface ContactPhoneSelection {
    contact: Contact,
    selectedPhone: PhoneEntry
}

interface ContactEmailSelection {
    contact: Contact,
    selectedEmail: EmailEntry
}

interface ContactPostalAddressSelection {
    contact: Contact,
    selectedAddress: AddressEntry
}

Example

import { selectContactPhone } from 'react-native-select-contact';

function getPhoneNumber() {
    return selectContactPhone()
        .then(selection => {
            if (!selection) {
                return null;
            }
            
            let { contact, selectedPhone } = selection;
            console.log(`Selected ${selectedPhone.type} phone number ${selectedPhone.number} from ${contact.name}`);
            return selectedPhone.number;
        });  
}

About

A cross-platform contact selection library for react-native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 50.1%
  • JavaScript 21.1%
  • Objective-C 19.4%
  • Python 6.4%
  • Ruby 3.0%