Trabajando con Contacts en React Native (react-native-contacts)

react native
Friday, August 6, 2021

Trabajando con Contacts en React Native (react-native-contacts)

En mucho software pero especialmente en las aplicaciones de Fintech, el acceso a la libreta de contactos es un feature bastante común.Como de costumbre primero debemos entender como funcionan las implementaciones nativas para posteriormente utilizarlas en react native.
Nearshoring and Agile Software Development Company

En mucho software pero especialmente en las aplicaciones de Fintech, el acceso a la libreta de contactos es un feature bastante común.

Como de costumbre primero debemos entender como funcionan las implementaciones nativas para posteriormente utilizarlas en react native.

En iOS se llama Contacts Framework y en Android Contacts Provider, vamos a verlos.

Contacts Framework ~ iOS

Contacts Frameworks esta para swift y Objective-C, esta optimizado para thread-safe y uso de read-only. Anteriormente estaba el Address Book Framework el cual fue remplazado por este.

Nearshoring and Agile Software Development Company
CNContact es un objeto inmutable que tiene guardado la información de un único contacto, como el nombre, teléfonos y correos.

Muy importante, en el caso de iOS existe un concepto de contactos llamado Unified Contacts el cual básicamente unifica los contactos que identifican a una sola persona en un solo CNContact, por ejemplo, Si tuviésemos un contacto llamado jamesjara,  el framework puede unificar la entidad el correo de facebook de jamesjara con el contacto de jamesjara, haciendo que cuando se consulte los contactos, retorne toda la información unificada tanto del facebook como del contacto en un solo grupo.

Nearshoring and Agile Software Development Company
Modelo de Unified Contacts

Privacidad y Permisos

  • Las aplicaciones linked antes de iOS 10.0 deben incluir en el Info.plist la descripción del motivo del uso de este permiso de lo contrario habría fatal crash, la llave para este mensaje seria NSContactsUsageDescription.
  • Respecto al Com.apple.developer.contacts.notes  requiere una configuración adicional, para acceder al note property de contacts se debe pedir un permiso adicional. Ver más aquí.
  • En el caso de iOS watchOS, el método CNSaveRequest no está disponible.
  • Notificaciones: al hacer una actualización sobre un contacto se dispararía una notificación hace el CNContactStoreDidChange.

Contacts Provider ~ Android

Contacts provider es un componente que básicamente manejan el repositorio central de los datos acerca de los contactos. Bajo el mismo concepto de Unified Contacts de iOS, Android tiene una metodología interna para obtener toda la información posible de diferentes fuentes.

Nearshoring and Agile Software Development Company
Organización del flujo de datos y procesos de Contacts Provider de Android.

Privacidad y Permisos

  • Para leer los contactos en Android, agregamos READ_CONTACTS, en el documento AndroidManifest.xml.
  • Para escribir en los contactos en Android, agregamos WRITE_CONTACTS, en el documento AndroidManifest.xml.

Librerias disponibles en el espacio

Okay, ya vimos un poco de materia respecto a la parte nativa de Android y iOS, ahora vamos a proceder con 🚀 React Native Nation!. 🚀 Vamos a revisar cual es el top de aplicaciones relacionadas en el mercado para completar esta tarea.

Nearshoring and Agile Software Development Company
React Native Unified Contacts VS React Native Contacts (Mayo 11 2020)

Para nuestro servicio vamos a utilizar react-native-contacts por el hecho de que es más popular, y sus actualizaciones son las más recientes.

Nota: te volvemos a contar,  nuestro servicio utiliza por debajo react-native-contacts, por lo que el api utilizada seria la misma de ellos.

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

Instalación de dependencias de la aplicación

Validando y Solicitando el permiso de acceso a los contactos

Accesando a los contactos propiamente

Manejando internalizacion (solo para Android)

En el caso de iOS la internalizacion se maneja propiamente en el info.plist.

Codigo final

Adjuntamos un snippet code, pero si deseas correr el codigo en el repositorio del servicio esta una carpeta llamada example el cual te puede servir de ejemplo.

¿Qué opinas?

¡Comparte tu opinión con nosotros y tus experiencias, que opinas del este Servicio!

james jara
james jara