Agregando botón de login con Facebook para Android

Intentamos correr la aplicación en Android y falló ya que no incluimos el SDK de Facebook para Android todavía. En este video vamos a hacer esta integración para Android.

En la misma documentación del SDK de Facebook para React Native existe una guía paso a paso para seguir pero no está actualiado, por lo que usaremos una guía propia ubicada en el repositorio del proyecto.

Si quieres aprender a fondo sobreaplicaciones hechas en Android Studio con Java puedes tomar el Curso Definitivo de Android.

Con Android Studio veremos más fácilmente cuándo ocurren errores de compilación. Pero si prefieres puedes usar el editor de texto que vienes usando para editar estos archivos y a la hora de correr react-native run-android las dependencias de Gravel serán instaladas automáticamente gracias a React Native.

Lo primero que vamos a hacer es agregar la siguiente línea a nuestro archivo de manifiesto de Android ubicado en android/app/src/main/AndroidManifest.xml, dentro del nodo de application:

A continuación debemos copiar esto a nuestro archivo de strings
android/app/src/main/res/values/strings.xml dentro del tag resouces, y dentro de ese tag creado debemos colocar el App ID de nuestra aplicación de Facebook:

<string name="facebook_app_id">string>

Dentro del archivo android/app/src/main/java/com/platzimusic/MainActivity.java debemos copiar el import del Intent:

import android.content.Intent;

Y en ese mismo archivo hacer un override del método onActivityResult

@Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
}    

Podemos ver que nos marca que getCallbackManager() es un método que no existe si estamos usando Android Studio. Así que vamos a crearlo a continuación. Para eso abrimos el archivo android/app/src/main/java/com/platzimusic/MainApplication.java e incluimos los siguientes imports:

import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;

Definimos una variable de tipo CallbackManager y su respectivo getter dentro de la clase:

private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

protected static CallbackManager getCallbackManager() {
  return mCallbackManager;
}

En el método getPackages() de esta clase MainApplication, dentro del array que retorna debemos fijarnos que esté incluido el siguiente elemento:

new FBSDKPackage(mCallbackManager)

Y por úlitmo debemos sobreescribir el método onCreate() para incluir la inicialización del SDK de Facebook:

@Override
public void onCreate() {
  super.onCreate();
  FacebookSdk.sdkInitialize(getApplicationContext());
  AppEventsLogger.activateApp(this);
}

Ahora sólo resta correr el comando para ver nuestra aplicación en el simulador de Genymotion:

react-native run-android

Y nuestro botón de login con Facebook para Android se debería ver correctamente.

En los archivos de este video podrás encontrar los archivos que modificamos ante cualquier duda, para ver el resultado final.