reactproject (FYP)

Install react native project:

• react-native init < project_name >

Start emulator by using command prompt:

1. emulator -list-avds
2. emulator -avd < emulator_name >

Please do not run any "react native link" command or do any configuration in this project because everything had been done configured already
Just make sure all the components had been installed

Install navigation:

1. npm install --save react-navigation
2. npm install --save react-native-gesture-handler
3. react-native link react-native-gesture-handler

Prerequisite setup firebase (for new project only)

• create an android project in https://console.firebase.google.com
• copy the project name from android/app/src/main/AndroidManifest.xml in second line: package={project-name} and create the project
• download google-services.json and put the file inside android/app
• wait at step 4 to validation connection to firebase

Install Firebase

1. npm install --save react-native-firebase
2. react-native link react-native-firebase
3. android/build.gradle, add one line inside independence and modified gradle class path (no need to put comma):
   
     dependencies {
      classpath 'com.android.tools.build:gradle:3.1.4'
      classpath 'com.google.gms:google-services:4.2.0'
    }
   
   
4. android/app/build.gradle, inside defaultConfig add one line:
   
     defaultConfig {
      ...
      multiDexEnabled true
    }
   
   inside independencies add these few line (modified 'compile' to 'implementation'):
   
     dependencies {
      implementation project(':react-native-firebase')
      implementation "com.google.android.gms:play-services-base:16.1.0"
      implementation "com.google.firebase:firebase-core:16.0.6"
      implementation "com.google.firebase:firebase-database:16.0.6"
      implementation "com.google.firebase:firebase-firestore:18.0.0"
    }
   
   add this last line in the file:
   
     apply plugin: 'com.google.gms.google-services'
   
   
5. android/gradle/wrapper/gradle-wrapper.properties, modified distributionUrl:
   
     distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
   
   
6. android/build.gradle, add one line inside repositories and above jcenter (both sides):
   
     repositories {
      google()
      jcenter()
     }
   

Install Facebook login

1. npm install react-native-fbsdk
2. react-native link react-native-fbsdk


3. MainApplication.java, add these few line:
    import com.facebook.CallbackManager;
    import com.facebook.FacebookSdk;
    import com.facebook.reactnative.androidsdk.FBSDKPackage;
    import com.facebook.appevents.AppEventsLogger;
    ...
    public class MainApplication extends Application implements ReactApplication {
     private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
     protected static CallbackManager getCallbackManager() {
      return mCallbackManager;
    }
    ...
    @Override
    protected List getPackages() {
     return Arrays.asList(
      new MainReactPackage(),
      new FBSDKPackage(mCallbackManager)
     );
    }
   


4. In MainActivity.java, add these few lines:
    import android.content.Intent;
    public class MainActivity extends ReactActivity {
   
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);
     MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
    //...


5. modified AndroidManifest.xml and strings.xml (generate App ID)

other installation:

• npm install --save firebase
• npm install --save react-native-google-signin
• react-native link react-native-google-signin
• npm install --save babel-polyfill

References:

1. React native gesture handler
2. Download Firebase for React Project
3. Setup Firebase in React Rroject
4. Guidelines to configure Firebase