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.
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.
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.
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.
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!
