Android with React Native <=v2.9 Project Configuration

This topic assumes that you have already created a React Native project. If you haven't, please visit Getting Started with the Facebook SDK for React Native.

Configure the Native Android Project

  1. Open your Android project in Android Studio. The Android project folder is located at [YourApp]/android, where [YourApp] is the name of your application.

  2. Open the MainApplication.java file. This file is located in the app/src/main/java/com/[YourApp] subfolder of your project.

  3. Add the following import statements to the list of imports near the top of the file.
  4. import android.os.Bundle;
    import com.facebook.FacebookSdk;
    import com.facebook.CallbackManager;
    import com.facebook.appevents.AppEventsLogger;
    

    When you use the Facebook SDK, some events in your app are automatically logged and collected for Facebook Analytics unless you disable automatic event logging. For details about what information is collected and how to disable automatic event logging, see Automatic App Event Logging.

  5. Add a CallbackManager instance variable, and its getter, to your MainActivity class.

  6. public class MainApplication extends Application implements ReactApplication {
    
      private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
    
      protected static CallbackManager getCallbackManager() {
        return mCallbackManager;
      }
      //...
    }
  7. Override the onCreate() method.
  8. @Override
    public void onCreate() {
      super.onCreate();
      FacebookSdk.sdkInitialize(getApplicationContext());
      // If you want to use AppEventsLogger to log events.
      AppEventsLogger.activateApp(this);
    }
  9. Register the SDK package in the method getPackages().

  10. private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
      @Override
      public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
      }
    
      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new FBSDKPackage(mCallbackManager)
        );
      }
    };
  11. In MainActivity.java, add the following import statement.
  12. import android.content.Intent;
  13. Provide the ability to receive application events by overriding the onActivityResult() method.

  14. @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
  15. Save your changes before continuing.

Configure the Native Facebook SDK for Android

You've installed the Facebook SDK for React Native using react-native, but you still need to perform some additional steps to install and configure the native Facebook SDK for Android. Complete all of the steps in the Quickstart for the Facebook SDK for Android to complete the process.

Important: In the Android Studio Setup section of the Quickstart Guide, skip the steps that instruct you to modify the build.gradle file, but complete all of the other steps. The necessary modifications were made for you already by the react-native tool.

Test Your Application

At this point, your application should be fully configured and ready to run. To test it, you can run it in Android Studio, or you can run it from a Command prompt. To run it from a Command prompt, navigate to your application folder and type:

react-native run-android

If everything is working correctly, you will see a terminal window appear. This window hosts the NPM server process that delivers your React code to the emulator. After that, you'll also see your application start inside the emulator.

Troubleshooting

If you get an application error on your emulator that says "Could not connect to the development server," then your local NPM server isn't running. In that case, open a Command prompt and type:

npm start

Leave this window open, and leave the server running while you test and debug your application.


If you cannot run the Android project, then make sure that you have completed the instructions in the Configure the Native Facebook SDK for Android section above. This helps you set up your Facebook app and update the AndroidManifest.xml and res/values/strings.xml files with your Facebook app settings.