Working with Contacts in React Native (react-native-contacts)

react native
Monday, June 7, 2021

Working with Contacts in React Native (react-native-contacts)

In many software but especially in Fintech applications, access to the contact book is a fairly common feature, as usual we must first understand how native implementations work and then use them in react native.

In many software but especially in Fintech applications, contact book access is a fairly common feature.

As usual, we must first understand how native implementations work to later use them in react native.

In iOS it is called Contacts Framework and in Android Contacts Provider , let's see them.

Contacts Framework ~ iOS

Contacts Frameworks is for swift and Objective-C, optimized for thread-safe and use of read-only. Previously there was the Address Book Framework which was replaced by this.

CNContact is an immutable object that has stored the information of a single contact, such as the name, phone numbers and emails.

Very important, in the case of iOS there is a concept of contacts called Unified Contacts which basically unifies the contacts that identify a single person in a single CNContact, for example, If we had a contact called jamesjara, the framework can unify the entity the jamesjara's facebook email with jamesjara's contact, making it so that when the contacts are consulted, it returns all the unified information of both the facebook and the contact in a single group.

Unified Contacts model

Privacy and Permissions

  • The applications linked before iOS 10.0 must include in the Info.plist the description of the reason for the use of this permission, otherwise there would be a fatal crash, the key for this message would be NSContactsUsageDescription.
  • Regarding the Com.apple.developer.contacts.notes requires an additional configuration, to access the note property of contacts an additional permission must be requested. See more here .
  • In the case of iOS watchOS, the CNSaveRequest method is not available.
  • Notifications: making an update on a contact would trigger a notification from the CNContactStoreDidChange .

Contacts Provider ~ Android

Contacts provider is a component that basically manages the central repository of data about contacts. Under the same concept of iOS Unified Contacts, Android has an internal methodology to obtain as much information as possible from different sources.

Organization of the data flow and processes of Android Contacts Provider.

Privacy and Permissions

  • To read the contacts on Android, we add READ_CONTACTS , in the AndroidManifest.xml document.
  • To write to contacts on Android, we add WRITE_CONTACTS , in the AndroidManifest.xml document.

Libraries available in space

Okay, we already saw a bit of material regarding the native part of Android and iOS, now we are going to proceed with 🚀 React Native Nation !. 🚀 We are going to review the top related applications on the market to complete this task.

React Native Unified Contacts VS React Native Contacts (May 11 2020)

For our service we are going to use react-native-contacts due to the fact that it is more popular, and its updates are the most recent.

Note: we will tell you again, our service uses react-native-contacts below, so the api used would be the same one of them.

Implementing @ React-Native-Nation / contacts-service 🚀

Install application dependencies

Validating and requesting access permission to contacts

Accessing the contacts properly

Handling internalization (only for Android)

In the case of iOS, internalization is handled properly in the info.plist.

Final code

We attach a snippet code, but if you want to run the code in the service repository there is a folder called example which can serve as an example.

What do you think?

Share your opinion with us and your experiences, what do you think!

james jara
June 7, 2021