iOS 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 the Native iOS Project

At this point, you have installed the Facebook SDK for React Native, but you still must perform additional steps to install and configure the native Facebook SDK for iOS. To do so, you'll run a JavaScript script that performs much of this work for you, but the script needs your app's name and Facebook App ID, and you need to configure your xCode project with your app's Bundle Identifier.

  1. Open your app in xCode by executing the following commands at the command prompt in your project's root folder, replacing [Yourapp] with the name of you app.
  2. cd ios
    open [YourApp].xcodeproj
  3. In xCode, copy your app's Bundle Identifier. You can find it in your Xcode project's Application Target, in the Identity section.
  4. Visit Quick Starts - Facebook Developers.
  5. If you've already registered your app with Facebook, then select it from the list. If you haven't registered your app with Facebook, then enter the name of you app in the input field.
  6. The JavaScript script you'll be running automatically performs the steps

    Add the Facebook SDK to your Xcode Project

    and

    Configure your info.plist

    .

  7. Complete the step Supply us with your Bundle Identifier, and click Next.
  8. Complete the step Track App Installs and App Opens.
  9. Install the file ios_setup.js by executing the following command in a command prompt at your project's root folder.
  10. curl -O https://raw.githubusercontent.com/facebook/react-native-fbsdk/master/bin/ios_setup.js
  11. Install the plist package, the xcode package, and the adm-zip package, by executing the following command.
  12. npm install plist xcode adm-zip
  13. Visit All Apps - Facebook Developers.
  14. Locate your app in the list, and note its App ID.
  15. Run the script ios_setup.js by executing the following command, and insert your app's App ID and App Name. If the name of your app is more than one word long, then enclose it between quotation marks.
  16. node ios_setup.js [App ID] [App Name]
    Continue to the next step to verify that your app runs.

Test Your Application

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

react-native run-ios

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 a build error stating that one of the Facebook SDK files was not found, such as "FBSDKLoginKit/FBSDKLoginKit.h file not found," check three things:

  • Verify that the Facebook SDK frameworks are installed in ~/Documents/FacebookSDK.
  • Verify that FBSDK[Core, Login, Share]Kit.framework show up in the Link Binary with Libraries section of your build target's Build Phases.
  • Verify that ~/Documents/FacebookSDK is in the Framework Search Path of your build target's Build Settings.

If you get a build error like "Warning: Native component for 'RCTFBLikeView' does not exist," verify that libRCTFBSDK.a shows up in the Link Binary with Libraries section of your build target's Build Phases.


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. Open up a terminal window and type:

npm start

Leave this window open and the server running while you are testing and debugging your application.