Android Project Configuration

This topic assumes that you have already created a React Native project using React Native version 0.60 or greater. 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 statement to the list of imports near the top of the file.
  4. import com.facebook.reactnative.androidsdk.FBSDKPackage;
  5. Register the SDK package in the `getPackages()` method:
  6. private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }
    
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.</ReactPackage>ReactPackage>asList(
              new MainReactPackage(),
              new FBSDKPackage()
          );
        }
    };

    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.

  7. Add the following to your settings.gradle file:

  8. include ':react-native-fbsdk'
    project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')
          
  9. Save your changes before continuing.

Configure the Facebook SDK for Android

You have installed the React Native Facebook SDK, but you still need to perform some additional steps to install and configure the Facebook SDK for Android. Follow 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 link command.

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

Cannot run the Android project:

  • Make sure you added the code snippet from the Configure Native Android Project Activity section.

  • Make sure you followed the steps from the Configure the Facebook SDK for Android section.

  • Make sure you set up a Facebook app and updated the AndroidManifest.xml and res/values/strings.xml with Facebook app settings.

You may also want to take a look at the React Native Facebook SDK instructions on GitHub for additional troubleshooting help and examples.

Could not connect to the development server:

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

yarn start

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