A implementação de notificações de push em um aplicativo React Native pode melhorar significativamente o engajamento do usuário, fornecendo atualizações e alertas oportunos. Firebase Cloud Messaging (FCM) oferece uma solução confiável e fácil de integrar para gerenciar notificações de push em plataformas. Este guia guia orienta você através dos passos para implementar notificações de push no React Native usando Firebase.

Pré-requisitos

  • Um projeto nativo de reação configurado com Expo ou Reagir CLI nativo
  • Um projeto Firebase criado no Console Firebase
  • Conhecimento básico da língua de JavaScript e Reagir nativo
  • Firebase SDK instalado no seu projeto

Configurar a base de fogo

Primeiro, crie um projeto Firebase e adicione seu aplicativo a ele. Baixe os arquivos de configuração:

Para Android

Baixe o arquivo google-services.json e coloque-o no diretório android/app do seu projeto. Certifique-se de adicionar o Firebase SDK às dependências do seu projeto.

Para iOS

Baixe o arquivo GoogleService-Info.plist e adicione-o ao seu projeto Xcode. Instale o Firebase SDK via CocoaPods.

Instalando dependências

Instale os pacotes Firebase necessários:

  • Para Reagir CLI Nativo:]

Executar:

  • Para o fluxo de trabalho gerenciado pela Expo:

Use o Expo Firebase SDK ou ejete para desencanar o fluxo de trabalho para módulos nativos.

Solicitando Permissões e Obtendo Token

No seu código Nativo React, solicite permissão para notificações e recupere o token do dispositivo:

Exemplo:

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();

Manuseando notificações recebidas

Configurar ouvintes para lidar com notificações e respostas de primeiro 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
});

Enviando notificações de envio

Use a API de Mensagens da Firebase Cloud ou o Console Firebase para enviar notificações.

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

Envie a mensagem através da Firebase Cloud Messaging REST API ou Firebase Console.

Conclusão

Integrar notificações de push com Firebase em React Native envolve configurar Firebase, solicitar permissões, recuperar tokens de dispositivo e manipular mensagens. A implementação adequada pode melhorar o engajamento do usuário e manter seu aplicativo dinâmico e interativo.