React Native Facebook Login Integration Example Tutorial Explained

Facebook Login is used by thousands of android & iOS application because of its easy Login implementation. Facebook has more than 2.37 billion users around the globe at present time. In react native using the Facebook Login we can give the easy login facility to our application users because there is no need to register the application user and application users can directly login via their Facebook login details. The functionality is purely safe for everyone and there is no need to worry about your username and passwords security. The Facebook has given us our own Facebook Software development kit(SDK) which is kind of cool to use. So in this tutorial we would going to implement Facebook Login Integration Example Tutorial Explained for both Android & iOS react native applications. So let’s get started 🙂 . In this tutorial we would show the logged in user Name and Profile picture.

Contents in this project React Native Facebook Login Integration Example Tutorial Explained for Android iOS:

1. The first step is to create a new react native project. If you don’t know how then read my this Getting started with react native tutorial. If you have already created the project then open your project folder in Command Prompt or Terminal like i did in below screenshot and execute below command to install the react-native-fbsdk NPM library.

Screenshot of CMD:

2. Next step is to execute the link command to index the newly installed react-native-fbsdk library in your project. This command would refresh the complete project and make all the necessary changes in all the files.

3. After linking the library we have to make sure that its make all the necessary changes in all files. So Goto Your_React_Native_Project -> android -> app -> build.gradle file. Open the build.gradle file in notepad or notepad++ editor and put both below dependencies in dependencies block.

Source code of my build.gradle file:

4. Open Your_React_Native_Project -> android -> settings.gradlePut below lines if not present.

5. Open Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> Your_React_Native_Project -> MainApplication.java  .You need to import the both below packages in your file.

6. In your MainApplication class add a instance variable of type CallbackManager.

7. After importing above packages we need to call the FBSDKPackage(mCallbackManager) in getPackages() block after putting a comma.

Complete source code of my MainApplication.java class:

8. Goto Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> Your_React_Native_Project -> MainActivity.java file. Import intent in it.

9. Now we need to override the onActivityResult() inbuilt method to provide our project to receive application events.

Complete Source code of MainActivity.java File:

Now your project is good to go. Next step is to register your project on Facebook Console.

10. Open Facebook Console website in your web browser.

11. Log-in with your own Facebook ID.

12. Click on Add a new App button.

13. We need to put our Application display name and contact email there & hit the Create App ID button.

14. Now on the Facebook Login Menu click on Setup.

15. Select Platform as Android.

16. There is no need to download the Facebook SDK. Now click on Next button.

17. On the Import the Facebook SDK page you don’t have to do anything. Simply click on Next button.

18. On the Tell us about your android project window, We need to put our Package name & default activity class name. You can find your app’s package name in Android Manifest file.

19. Now while pressing the SAVE button it will ask us again to use this package name so HIT the Use this package name button.

20. Next and most important step is to Enter the key hashes code here. You can read my Tutorial about getting key hash code in windows from here. After generating the Key hash code enter your code here and hit the Save button.

21. Next step is Enable Single sign in on your App.

22. Here you go now all of your Facebook console setup is complete. Now we need to Put our Facebook App ID in our react native project. On your Facebook console window you can fine the Facebook App ID so COPY it.

23. GoTo -> Your_React_Native_Project -> android -> app -> src -> main -> res -> values -> strings.xml file. Create a string named as facebook_app_id and put your own copied Facebook App Id here.

Source code of my strings.xml file:

24. Goto Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml file. We need to add a meta data with newly created Facebook app id string. Put below code in application block.

Source code of my AndroidManifest.xml file:

Now all the configuration has completed and your project is ready to start the coding.

25. Open your project’s App.js file and import View, StyleSheet, Text, Alert and Image component.

26. Import LoginButton, AccessToken, GraphRequest and GraphRequestManager component from react-native-fbsdk library in your project.

27. Create constructor() function in your main class. In constructor create 3 States named as user_name, avatar_url and avatar_show.

28. Create a function named as get_Response_Info() with error and result two parameters. In this function we would pop up the values from result object and store in states.

29. Create onLogout() function and set all the states values as null. We would call this function when user clicks on the Facebook Logout button.

30. Create Image, Text and Facebook Login button component in render’s return block.

31. Creating Style.

32. Complete source code for App.js file class.

Screenshots:

React Native Facebook Login Integration Example Tutorial Explained React Native Facebook Login Integration Example Tutorial Explained

3 Comments

  1. Boa noite meu amigo parabéns pelo trabalho, o no meu projeto seu o seguinte erro: invariant violation : requirednativecomponent: RCTFBloginbutton.

  2. Hey thanks for the tutorial, after doing all the configuration steps (after step 24) I can’t run “react-native run-android”, my build fails. (Even when I try to run without writing any code)
    Here’s the message I’m getting:

    > Task :react-native-fbsdk:generateDebugRFile FAILED

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ‘:react-native-fbsdk:generateDebugRFile’.
    > Illegal char at index 7: ..\..\l?brary_man?fest\debug\AndroidManifest.xml

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug
    option to get more log output. Run with –scan to get full insights.

    * Get more help at https://help.gradle.org

    Deprecated Gradle features were used in this build, making it incompatible with
    Gradle 6.0.
    Use ‘–warning-mode all’ to show the individual deprecation warnings.
    See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:comm
    and_line_warnings

    BU?LD FAILED in 3s
    10 actionable tasks: 10 executed
    error Could not install the app on the device, read the error above for details.

    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/getting-started.html
    error Command failed: gradlew.bat app:installDebug. Run CLI with –verbose flag
    for more details.

    I looked pretty much everywhere on internet but couldn’t find a solution. Any help would be appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *