Cómo configurar notificaciones push en react native con rnfirebase (android)


Hola, les cuento que llevo algunas semanas trabajando con rnfirebase para enviar notificaciones push a los usuarios de una aplicación en react native y hasta el momento es exitoso, en este tutorial vamos a enforcarnos a configurar las notificaciones push en android, en otro tutorial hablaremos de como configurar en IOS.

Antes de empezar usaremos el mismo repositorio https://github.com/herel/react-native-redux-registro-de-usuarios donde ya tenemos una app para registrar e iniciar sesion a travez de un api basada en JsonWeBTokens 

1.- Instalación

Para hacer la instalacion del modulo ejecutamos el siguiente comando:

yarn add react-native-firebase

1.1 Link

Ya tenemos el modulo instalado ahora debemos hacer link del modulo que acabamos de instalar, ejecutamos el siguiente comando

react-native link react-native-firebase

2.- Crear cuenta en FIREBASE

Debemos ingresar a la consola de firebase y crear una nueva aplicación o abrir un proyecto existente, ya tengo un proyecto empezado donde configuramos notificaciones push en el navegador

Agregar un proyecto o seleciona uno previamente configurado

2.1.- Configurar firebase para android

Ya tenemos el proyecto creado e ingresamos al dashboard del mismo y nos encontramos con la siguiente pantalla:

Seleccionamos el icono de android y llenamos el siguiente formulario
Hacemos clic en registrar aplicación

Una vez que registramos nuestra aplicacion en android descargamos el archivo google-service.json y lo guardamos en la ruta /android/app/ como se muestra en la siguiente captura:

3.- Configurar Android

Ya tenemos el modulo de rnfirebase y la cuenta de firebase configurada ahora es tiempo de hacer las configuraciones de  gradle, AndroidManifest y MainApplication para que podamos recibir las notificaciones push.

3.1.- Configurar gradle-wrapper.properties

Para poder usar las notificaciones debemos modificar varios archivos de gradle primero vamos al archivo gradle-wrapper.properties que se encuentra en la carpeta android/gradle/wrapper

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
-- distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
++ distributionUrl=https://services.gradle.org/distributions/gradle-4.4-all.zip

Donde remplazamos la distribution por la versión gradle-4.4-all

3.2 Configurar android/build.gradle

Ahora vamo actualizar los links de los repositorios vamos al archivo android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
        ++ maven {
        ++    url 'https://maven.google.com/'
        ++    name 'Google'
        ++ }
        ++ google()
    }
    dependencies {
        ++classpath 'com.android.tools.build:gradle:3.1.2'
        ++classpath 'com.google.gms:google-services:4.0.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        ++ jcenter()
        ++ google()
        ++ maven { url "https://jitpack.io" }
        ++ maven {
        ++     // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
        ++    url "$rootDir/../node_modules/react-native/android"
        ++ }
    }
}

3.3 Configurar android/app/build.gradle

Ahora vamos a configurar el archivo android/app/build.gradle vamos añadir al inicio del archivo el plugin google-services

apply plugin: "com.android.application"
++ apply plugin: 'com.google.gms.google-services'
import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *

Despues en el mismo archivo pero en la seccion de dependencias agregamos  las siguientes dependencias

dependencies {
    compile project(':react-native-firebase')
    compile project(':react-native-fbsdk')
    compile project(':react-native-linear-gradient')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules

    ++ implementation(project(':react-native-firebase')) {
    ++    transitive = false
    ++ }
    // Firebase dependencies
    ++ implementation('com.google.android.gms:play-services-base:15.0.1') {
    ++    force = true;
    ++ }
    ++ implementation('com.google.firebase:firebase-core:16.0.1') {
    ++     force = true;
    ++ }
    ++ implementation('com.google.firebase:firebase-messaging:17.3.0') {
    ++   force = true;
    ++ }

    ++ implementation 'me.leolin:ShortcutBadger:1.1.21@aar'
}

la siguiente liena implementation ‘me.leolin:ShortcutBadger:1.1.21@aar’ la utlizamos para poder configurar firebase cloud message y funcionen correctamente las notificaciones push

3.4.- Configurar AndroidManifest.xml

Ya tenemos la configuración de build.gradle ahora debemos agregar los permisos  

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.herelodin">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    ++++ <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
    ++++ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    ++++ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    ++++ <uses-permission android:name="android.permission.CAMERA"/>
    ++++ <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    ++++ <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    ++++ <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    ++++ <uses-permission android:name="android.permission.VIBRATE" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

      ++++ <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

      ++++ <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
      ++++   <intent-filter>
      ++++     <action android:name="com.google.firebase.MESSAGING_EVENT" />
      ++++   </intent-filter>
      ++++ </service>
      ++++ <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
      ++++   <intent-filter>
      ++++     <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
      ++++   </intent-filter>
      ++++ </service>

      ++++ <receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/>
      ++++ <receiver android:enabled="true" android:exported="true"  android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver">
      ++++     <intent-filter>
      ++++       <action android:name="android.intent.action.BOOT_COMPLETED"/>
      ++++       <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
      ++++       <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
      ++++       <category android:name="android.intent.category.DEFAULT" />
      ++++     </intent-filter>
      ++++ </receiver>

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

3.5.-Configurar MainApplication.java

Ahora debemos inicizliar los servicios de firebase cloud message y push notificacion para que pudan leer el archivo google-services.json para esto editamos el archivo MainApplication.java

++ import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
++ import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
++ import com.google.firebase.messaging.FirebaseMessaging;

En la función getPackages agregamos los siguiente Packages:

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RNFirebasePackage(),
            new FBSDKPackage(),
            new LinearGradientPackage(),
            +++ new RNFirebasePackage(),
            +++ new RNFirebaseMessagingPackage(),
            +++ new RNFirebaseNotificationsPackage() //
      );
    }

En la función onCreate inicializamos firebase message que se encargar de leer la configuracion de google-service.json

@Override
  public void onCreate() {
    super.onCreate();
    ++ FirebaseMessaging.getInstance().setAutoInitEnabled(true);
    FacebookSdk.sdkInitialize(this);
    SoLoader.init(this, /* native exopackage */ false);
  }

¡Vamos a probar la primer notificación push con rnfirebase!

Si todo salio bien ejecutamos el comando react-native run-android para probar en nuestro dispotivio o emulador.

Vamos a la consola de firebase -> Cloud Message

Hacemos click en enviar tu primer mensaje, agregamos el mensaje ¡Hola Mundo! seleccionamos la plataforma android y el resultado debe ser el siguiente:

Gracias por leer y compartir  este post, cuentame como te fue enviando tu primer notificación push, nos leemos pronto.