react-native-android-facebook-login

    0.1.1 • Public • Published

    react-native-android-facebook-login react-native-android-facebook-login

    A react-native wrapper around facebook-android-sdk for authentication purposes. This library isn't a complete wrapper around facebook-android-sdk, it will only handle authentication-related process such as retrieving the access token and basic profile information.

    Key features

    • Entirely based on promises instead of callbacks;
    • Handles both logInWithPublishPermissions and logInWithReadPermissions;
    • Simple JS API. You don't need to consume NativeModules directly.

    Usage

    This library doesn't provide any custom or native component(s), so the integration will be done entirely using JS API. For example:

    import React, { Component } from 'react-native'
    import { View, Text, TouchableHighlight } from 'react-native'
    import FacebookLogin from 'react-native-android-facebook-login'
     
    class LoginWithFacebook extends Component {
      constructor(nativeProps) {
        super(nativeProps)
     
        this.state = {
          profile: null,
          didCancelled: false
        }
      }
     
      async getUserProfileAndSetState() {
        const profile = await FacebookLogin.getLoggedInUserProfile()
     
        if (profile) {
          this.setState({
            profile
          })
        }
      }
     
      async logIn() {
        const loggedIn = FacebookLogin.isLoggedIn()
     
        if (loggedIn) {
          this.getUserProfileAndSetState()
          return
        }
     
        const loginResult = await FacebookLogin.logInWithReadPermissions(['public_profile'])
     
        if (loginResult.isCancelled) {
          this.setState({
            didCancelled: true
          })
     
          return
        }
     
        this.getUserProfileAndSetState()
      }
     
      render() {
        if (this.state.profile) {
          return (
            <View>
              <Text>I'm logged in as {this.state.profile.name}</Text>
            </View>
          )
        }
     
        return (
          <View>
            {this.state.didCancelled && (
              <Text>Why?</Text>
            )}
            <TouchableHighlight onPress={this.logIn.bind(this)}>
              <Text>Log in with Facebook</Text>
            </TouchableHighlight>
          </View>
        )
      }
    }

    Installation

    Firstly, you need to download the library from npm:

    $ npm install --save react-native-android-facebook-login
    

    Then you should go to developers.facebook.com and choose your app, then under Settings (+Add Platform if you don't have Android configured yet) you'll notice that Key Hashes will be empty:

    Key Hashes (developers.facebook.com)

    To get your application key hash to fill in, in your JS code you can call: __logCurrentApplicationSignature to log it. For example:

    componentDidMount() {
      if (__DEV__) {
        FacebookLogin.__logCurrentApplicationSignature()
      }
    }

    So, $ adb logcat -s 'React' and grab the logged key hash.

    Then, in your android/settings.gradle:

    include ':ReactNativeAndroidFacebookLogin'
    project(':ReactNativeAndroidFacebookLogin').projectDir = new File(
      rootProject.projectDir,
      '../node_modules/react-native-android-facebook-login/android'
    )
    

    android/app/build.gradle

    compile project(':ReactNativeAndroidFacebookLogin')
    

    android/app/src/main/AndroidManifest.xml

    <activity
      android:name="com.facebook.FacebookActivity"
      android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
      android:label="@string/app_name"
      android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
     
    <meta-data
      android:name="com.facebook.sdk.ApplicationId"
      android:value="@string/facebook_app_id" />

    android/app/src/main/res/values/strings.xml

    <string name="facebook_app_id">(...)</string>

    ...and then finally MainActivity.java

    import com.centaurwarchief.facebooklogin.FacebookLoginPackage;
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new FacebookLoginPackage(),
        // (....)
      );
    }

    Install

    npm i react-native-android-facebook-login

    DownloadsWeekly Downloads

    0

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • centaurwarchief