Instalar y configurar react-native-firebase para Android

Published in

AlturaSoluciones

7 min readMay 15, 2019

React Native Firebase (que a lo largo de esta guía lo abreviaremos como RNF) es una herramienta que actúa como capa de integración entre los SDK nativos (Android e iOS) y el API Web de Firebase.

La principal ventaja de RNF sobre el SDK Web de Firebase es que al hacer uso de SDK nativos permite a las aplicaciones React Native acceder a la gran mayoría de servicios de Firebase, al contrario del SDK web que tiene un conjunto de características limitadas. Aquí encontrarás una tabla en la que se detallan las características de Firebase disponibles utilizando RNF en comparación con el SDK web oficial.

A continuación el paso a paso de cómo instalar y configurar RNF en un proyecto React Native para Android.

Entorno de Desarrollo

Para desarrollar esta guía utilizamos las siguientes herramientas:

Android Studio 3.4
MacOS Mojave 10.14.4
Node v10.15.3
Npm 6.4.1
Watchman 4.9.0

Creando la aplicación base

Para crear la aplicación React Native base utilizaremos react-native-cli. En un terminal ejecutaremos lo siguiente:

react-native init RNFirebaseApp

Con este comando se creará la aplicación base y automáticamente se instalarán las dependencias necesarias para construir y ejecutar la aplicación.

Ejecutando la aplicación base

Para ejecutar la aplicación para Android, es necesario tener un emulador o un dispositivo configurado y corriendo; la documentación oficial indica cómo crear un dispositivo virtual para pruebas. Una vez configurado el emulador ejecutamos la aplicación:

$ cd RNFirebaseApp
$ react-native run-android

Nota: Para que la ejecución en Android funcione correctamente, asegúrate de que ANDROID_HOME esté apuntado a la ruta del SDK (en MacOS generalmente esta ruta es /Users/[usuario]/Library/Android/sdk). Será suficiente si lo agregas la siguiente linea en tu archivo ~/.bash_profile:

export ANDROID_HOME=/Users/[usuario]/Library/Android/sdk

Y la aplicación se verá de la siguiente manera en el emulador Android:

Integrando Firebase a nuestra app

Para integrar Firebase a nuestra aplicación es necesario crear un proyecto Firebase. Esto se lo hace desde la página inicial de la consola de Firebase:

A continuación aparecerá un formulario para configurar temas relacionados al proyecto como nombre, localización de Cloud Firestore y aceptación de términos y condiciones.

En el formulario debemos ingresar un nombre para el nuevo proyecto y, de ser necesario, modificar el ID y la región.

Cuando hayamos finalizado el paso anterior hacemos click en Create Project y dentro de unos segundos nuestro proyecto estará creado. Cuando hagamos click en Continue nos re-dirigirá al panel de control:

RNF ofrece dos opciones de integración sobre aplicaciones React Native:

Integración manual: Para integrar manualmente React Native Firebase en un proyecto existente mediante guías de configuración.
Integración mediante el Starter Kit: Hace uso de una aplicación React Native de plantilla que se puede clonar desde GitHub y configurar acorde a las necesidades.

Para nuestro ejemplo utilizaremos la integración manual, recomendada para desarrolladores React Native con experiencia y proyectos existentes.

La versión de RNF que utilizaremos es la versión estable más reciente al momento de escribir esta guía es 5.3.1

Dentro del directorio de nuestro proyecto React Native agregamos RNF como dependencia npm:

npm install --save react-native-firebase

Posteriormente debemos enlazar la librería de RNF (ya que contiene código nativo) a nuestro proyecto:

react-native link react-native-firebase

El siguiente paso es agregar el archivo google-services.json en el proyecto Android. Este archivo contiene toda la información necesaria por el SDK de Android para conectarse al proyecto Firebase.

Para generar y descargar el archivo google-services.json necesitaremos registrar la app en Firebase, para esto vamos al panel de control del proyecto que habíamos creado anteriormente; en la parte superior izquierda encontraremos la sección Project Overview.

Dentro de esa sección seleccionaremos el ícono de Android para iniciar la configuración.

Aparecerá un formulario en el cual debemos colocar el ID de la aplicación en el campo Android package name. Para un proyecto React Native el ID de la aplicación Android es el campo applicationId del archivo android/app/build.gradle.

Adicionalmente podemos agregar un nick para identificar la aplicación dentro del proyecto y la información de SHA-1, necesaria cuando la aplicación utiliza Firebase Authentication (mediante Acceso con Google o con número de teléfono) o Firebase Dynamic Links; no cubriremos estos módulos dentro de esta guía.

Al dar clic sobre Next se generará el archivo google-services.json y estará disponible para la descarga. Descargaremos y colocaremos este archivo en la raiz del módulo app del proyecto Android (android/app/google-services.json):

Como siguiente paso debemos agregar el plugin Gradle de google-services como dependencia a en el archivo build.gradle que se encuentra a nivel del proyecto (android/build.gradle).

buildscript {
  // ...
  dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.2.0'
  }
}

Para aplicar el plugin al proyecto colocaremos al final del archivo build.gradle que se encuentra a nivel de módulo (android/app/build.gradle) la siguiente linea:

apply plugin: 'com.google.gms.google-services'

Como siguiente paso instalaremos los módulos de Firebase como dependencias del proyecto Android; esto lo haremos en el build.gradle del módulo app (android/app/build.gradle) agregando las siguientes lineas en la sección dependencies.

implementation "com.google.android.gms:play-services-base:16.1.0"
implementation "com.google.firebase:firebase-core:16.0.8"

La sección quedará similar a lo siguiente:

dependencies {
 implementation project(':react-native-firebase')//Added when linked // Firebase dependencies
 implementation "com.google.android.gms:play-services-base:16.1.0"
 implementation "com.google.firebase:firebase-core:16.0.8"
 
 ...
}

Adicional a esto necesitaremos verificar que en el archivo de propiedades del wrapper de Gradle (android/gradle/wrapper/gradle-wrapper.properties) se requiera la versión 4.4 o posterior en el valor para distributionUrl:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip // v4.4 or newer

También debemos verificar que el repositorio google() esté presente y se encuentre sobre el repositorio jcenter() en la sección buildScript repositories del archivo build.gradle que está a nivel de proyecto (android/build.gradle):

buildscript {
  repositories {
    google()  // <-- Check this line exists and is above jcenter
    jcenter()
    // ...
  }
  // ...
}

En este mismo archivo, actualizamos la dependencia Android build tools a la versión 3.3.2

classpath 'com.android.tools.build:gradle:3.3.2'

En el archivo build.gradle del módulo app, verificamos que todas las dependencias que se encuentran como compile (que se encuentra actualmente obsoleta) estén ahora como implementation; por ejemplo:

implementation "com.google.firebase:firebase-core:16.0.8"

Google Play Services a partir de su versión 11.2.0 requieren que sus dependencias se descarguen del repositorio Maven de Google, así que (si no se encuentra ya agregada) debemos agregar la referencia en la sección repositories del build.gradle que se encuentra a nivel de proyecto (android/build.gradle):

allprojects {
    repositories {
        mavenLocal()
        google() // <-- Check this line exists and is above jcenter
        jcenter()
        ...
    }
}

Volviendo al asistente de configuración para Android en la consola, si presionamos Next pasaremos a comprobar si nuestra aplicación se conecta satisfactoriamente a Firebase:

Para esto ejecutaremos la aplicación (mediante react-native run-android) y comprobamos en el asistente si el mensaje de verificación cambia a lo siguiente:

Con esto ya hemos finalizado de configurar Firebase en nuestra aplicación React Native para Android.

Si necesitas una referencia el código fuente del proyecto desarrollado se encuentra aquí:

AlturaSoluciones/rnfirebase-demo-android

Contribute to AlturaSoluciones/rnfirebase-demo-android development by creating an account on GitHub.

github.com

Este artículo forma parte de una serie en la que cubrimos los siguientes temas:

Instalar y configurar react-native-firebase para Android (este artículo)
Instalar y configurar react-native-firebase para iOS
Configurar Cloud Firestore con react-native-firebase
Almacenar datos de geolocalización en Firestore con react-native-firebase

Si el artículo te gustó, por favor aplaude tantas veces como desees. Para ver historias similares acerca de tecnología, mira nuestras publicaciones. No dudes en dejarnos en la caja de comentarios cualquier inquietud o sugerencia que tengas.

Si necesitas un gran equipo que te asesore en plasmar tus ideas en React JS o React Native, no dudes en contactarnos. Puedes ir a nuestro sitio web y llenar el formulario y nos contactaremos contigo a la brevedad posible.

¡Que tengas un excelente día!

Miguel Torres Vivanco
Mail: miguel@alturasoluciones.com
Twitter: @perrotedonperro
LinkedIn: www.linkedin.com/in/miguetv17