Android with React Native v0.30+ Project Configuration

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

Configure Native Android Project Activity

  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 /[YourApp]/android/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 com.facebook.FacebookSdk;
    import com.facebook.CallbackManager;
    import com.facebook.appevents.AppEventsLogger;
    

    When you use the Facebook SDK, 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. Inside the MainApplication class, add an instance variable of type CallbackManager, and also add its getter.

  6. public class MainApplication extends Application implements ReactApplication {
    
      private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
    
      protected static CallbackManager getCallbackManager() {
        return mCallbackManager;
      }
      //...
    
  7. Register the SDK package in the method getPackages(). Only add the indicated line.

  8. 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(),
            //**  ADD THE FOLLOWING LINE **//
            new FBSDKPackage(mCallbackManager)
        );
      }
    };
  9. In MainActivity.java, add the following import statement.
  10. import android.content.Intent;
  11. Provide the ability to receive application events by overriding the onActivityResult() method.

  12. @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
  13. 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 the 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 will 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.