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