Skip to content

Latest commit

 

History

History
84 lines (72 loc) · 4 KB

README.md

File metadata and controls

84 lines (72 loc) · 4 KB
Raw

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.