Implementar notificaciones de presión en una aplicación React Native puede mejorar significativamente el compromiso de los usuarios proporcionando actualizaciones y alertas oportunas. Firebase Cloud Messaging (FCM) ofrece una solución confiable y fácil de integrar para gestionar notificaciones de empuje a través de plataformas. Esta guía le lleva a través de los pasos para implementar notificaciones de empuje en React Native usando Firebase.

Prerrequisitos

  • Un proyecto de retrotracción Nativo creado con Expo o Reacto CLI nativo
  • Un proyecto de bomberos creado en la consola Firebase
  • Conocimiento básico de JavaScript y React Native
  • Firebase SDK instalado en su proyecto

Configuración de la base de fuego

Primero, crea un proyecto Firebase y agrega tu app a ella. Descargar los archivos de configuración:

Para Android

Descargue el archivo google-services.json y colóquelo en el directorio android/app de su proyecto. Asegúrese de añadir el SDK Firebase a sus dependencias de proyecto.

Para iOS

Descargue el archivo GoogleService-Info.plist y añádalo a su proyecto Xcode. Instale el SDK Firebase a través de CocoaPods.

Instalación de dependencias

Instalar los paquetes necesarios de Firebase:

  • Para Reactar CLI nativo:

Corre:

  • Para Expo se ha gestionado el flujo de trabajo:

Utilice el SDK Expo Firebase o eject para el flujo de trabajo desnudo para los módulos nativos.

Solicitando permisos y token

En su código de reacción nativo, solicite permiso para notificaciones y recupere el token del dispositivo:

Ejemplo:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

Manejo de las notificaciones entrantes

Establecer oyentes para manejar notificaciones y respuestas de primer plano:

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

Enviar notificaciones push

Utilice Firebase Cloud Messaging API o Firebase Console para enviar notificaciones.

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Envíe el mensaje a través de Firebase Cloud Messaging REST API o Firebase Console.

Conclusión

Integrar notificaciones de presión con Firebase en React Native implica configurar Firebase, solicitar permisos, recuperar fichas de dispositivo y manejar mensajes. La implementación adecuada puede mejorar el compromiso de los usuarios y mantener la aplicación dinámica e interactiva.