TeleScan

Introduction

Demo

TeleScan is a quick prototype contact manager experience built using react-native, typescript, react-native-contacts, react-native-gesture-handler, react-native-image-picker, react-native-permissions, prettier, jest and react-navigation, which has maximum support for Android for now. It leverages react-native-contacts to sync and modify in-device contacts. Currently it supports the following, Sync in-device contacts View all contacts View a single contact Edit a contact Swipe to Delete a contact Add a new a contact, add multiple email addresses and phone numbers

Setup

Pre-requisites

• Android Studio ( with an AVD available preferably greater than Android 10 )
• VScode or any IDE/text editor to view/edit source code
• NodeJS >16.0.0
• Git version control

Steps

To run the application, please follow the below steps using a powershell or bash,

• Clone the application, git clone https://github.com/shujathkhan/TeleScan.git
• Move into its directory, cd telescan
• Intall node_modules, npm install
• Run the application for android, npm run android

Architecture

This app consists of the following folders in src ,

layouts (Feature screens)

Following are the created screens in the application,

• ContactList (aka All Contacts screen, displays all synced contacts using a FlatList)
• ContactView (aka View/Edit Contact screen, uses contactId fetched from route param from All contacts screen and using Contacts API to update details for a contact, by leveraging MultiForm component)
• NewContact (aka Add New Contact screen, creates a new contact by leveraging MultiForm and Contacts API)

components (Re-usable components)

Following are the created re-usable components used in the screens of the application,

• ContactCard (List Item used in the All contacts screen)
• FabButton (Icon fab button used in all contacts, view/edit and add new contact screen)
• MultiForm (Switchable form components for phoneNumbers, emailAddresses and displayName comprises of Text, TextInput and Picker)

helpers

Following are the created helpers used in the application,

• getInitials (Function to get initals from a name)
• wait (Function to wait for X milliseconds)
• requestPermissions (Function to request permission using react-native-permissions API)
• sortByGivenName (Sort an array of contacts by given name)
• contactPermissions (Read/Write Contacts)

Challenges

• One of the major challenges was the permission requests, for both ios and android react native provides different syntax and levels of permissions, react-native-permissions played a key role, in quick prototyping it.
• Another challenge, would be the react-native-contacts API functions, are not properly strongly typed in terms of their Promise response, workarounds are available, but I prefer it to be strongly typed in a correct manner. eg: addContact promise should resolve with a Contact object instead of void.
• Currently, I am facing amajor road block with the react-native-contacts package in terms of updating the photo of a contact. For some reason while consuming, the writePhotoToPath command keeps throwing a File Not Found Exception. I am currently digging into this issue.

Developed with 💖 using react-native.