- 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
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
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)
- 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, thewritePhotoToPath
command keeps throwing a File Not Found Exception. I am currently digging into this issue.
Developed with 💖 using react-native.