masoooud / MyContacts

MyContacts

This is a simple Contact List Application. This application developed and implemented by React Native.

Dependencies

MyContacts is published with source code only. You will still need to compile the test apps yourself.

• Android:
  • Android Studio 3.6 or later
    • Android SDK Platform 29
    • Android SDK Build-Tools 29.0.3
    • To install the required SDKs, go into Preferences ❭ Appearance & Behavior ❭ System Settings ❭ Android SDK.
• iOS/macOS:
  • Xcode 11.3 or later
  • CocoaPods

Quick Start

• Open Terminal and download the app.

git clone https://github.com/Masoooud/MyContacts.git
cd MyContacts

• Install dependencies.

npm install

iOS

1. Go to ios folder ind install Pods.

cd ios
pod install

2. open MyContacts.xcworkspace file in Xcode.

open ios/Sample.xcworkspace

3. Run application in simulator or your device.

Android

1. Open android folder in Androiod Studio.

open -a "Android Studio" android

2. Build and run application in simulator or your device.

Deployment

• iOS

  • Add Launcher App Icons: Go to Xcode >> Project Folder >> Images.xcassets >> AppIcon and add all necessary Launcher App Icons you generated. I can recommend "Icon Slate" App to generate all sizes of Launcher App Icons.

  • Add Splash Screens:

    • Check out https://github.com/crazycodeboy/react-native-splash-screen OR
    • Go to Xcode >> Project Folder >> LaunchScreen.xib and manually create your own Splash Screen

  • Now create an App in the App Store Connect, in order to upload the IPA into it. Make sure to use the same bundle ID as in your Xcode project.

    Of course you initially built your App (and Xcode Project) first by running:

    react-native run-ios

  • Then check out instructions here: https://facebook.github.io/react-native/docs/running-on-device.html#building-your-app-for-production

  • Once all is configured, you can deploy your App from Xcode (from your machine):

    • First create an Archive by running "Product" => "Archive" in Xcode.
    • From the popped up Archive Explorer you can then upload the App to App Store Connect (former iTunes Connect).
    • Read more under https://help.apple.com/xcode/mac/current/#/dev442d7f2ca

• Android

  • Add Launcher App Icons: Go to Android Studio >> android >> app >> src >> main >> res Folder and add all necessary Launcher App Icons you generated. I can recommend "Icon Slate" App to generate all sizes of Launcher App Icons.

  • Add Splash Screens:

    • Check out https://github.com/crazycodeboy/react-native-splash-screen OR
    • Go to Android Studio >> android >> app >> src >> main >> java >> com >> Project Folder >> MainActivity.java and insert Splash Screen sections there

  • Now create an App in the Google Play Console, in order to upload the APK into it.

  • Then build and sign the App.

    Of course you initially built your App first by running:

     react-native run-android

    Signing is done to ensure your uploaded APK is clearly indentified:

    See instructions:

    • https://facebook.github.io/react-native/docs/signed-apk-android

    • https://facebook.github.io/react-native/docs/running-on-device.html#building-your-app-for-production-1

    Your APK will be placed here: android/app/build/outputs/apk/app-release.apk

  • Manually upload the APK into the created App in Google Play Console

Approach

Before I start to develop the app, I've done some research to find the best user interface and user experience. After I got the design idea, it was time to decide how I should develop the app. So, I make the design into small parts to know the components I should create. After all these things, I started to implement the application.

1. Initialized the app by using react-native-cli.
2. Done folder structuring.
3. Added packages which needed through development. Such as:
   • @react-navigation/native
   • babel-plugin-module-resolver
   • @react-native-community/netinfo
4. Started to develop components and scenes of the app.

Features

• Showing contact's photo

• User can make call from app

• User can send sms from app

• User can send email from app

• Clean design and good user Experience.

What if I had had more time I would have

• added search to list.

• added dark theme to app.

• added setting to app to change type of showing and changing theme.

• added offline mode.

Links

Apple App Store:

• Developer Account: https://developer.apple.com/

• App Store Connect: https://appstoreconnect.apple.com/

• Upload an App: https://help.apple.com/xcode/mac/current/#/dev442d7f2ca

Google Play Store:

• Developer Account/Play Console: https://play.google.com/apps/publish

• Upload an App: https://support.google.com/googleplay/android-developer/answer/113469?hl=en

Deployment:

• React Native: https://facebook.github.io/react-native/docs/running-on-device.html

Debugging:

• How To: https://facebook.github.io/react-native/docs/debugging.html

• How To: https://facebook.github.io/react-native/docs/running-on-device.html