Notificações Push Locais e Agendadas em React Native com a Biblioteca ZoOr

Introdução às Notificações Push em React Native

No dinâmico universo do desenvolvimento mobile, as notificações push desempenham um papel crucial no engajamento e retenção de usuários. Para desenvolvedores React Native, implementar essa funcionalidade de forma eficaz, tanto para Android quanto para iOS, pode ser um desafio. Felizmente, bibliotecas como a react-native-push-notification, desenvolvida pela comunidade e destacada por contribuidores como ZoOr, simplificam esse processo, permitindo a criação de notificações locais e agendadas sem a necessidade de serviços de backend complexos para todas as interações.

O Que São Notificações Push em React Native?

Notificações push são mensagens enviadas por um aplicativo que aparecem no dispositivo do usuário, mesmo quando o aplicativo não está em uso ativo. Elas podem ser locais (disparadas pelo próprio app no dispositivo), remotas (enviadas de um servidor) ou agendadas (programadas para aparecer em um momento específico). Seu principal benefício reside na capacidade de manter os usuários informados sobre atualizações importantes, promoções, ou lembretes, aumentando o engajamento e a comunicação direta.

Apresentando a Biblioteca react-native-push-notification

A react-native-push-notification é uma biblioteca popular que oferece uma solução robusta para a implementação de notificações locais e remotas em aplicativos React Native. Ela se destaca pela sua compatibilidade multiplataforma e pela flexibilidade que oferece aos desenvolvedores, permitindo notificações customizadas e agendadas diretamente do código da aplicação.

Instalação e Configuração Inicial da Biblioteca react-native-push-notification

Para começar a usar a react-native-push-notification, o primeiro passo é adicioná-la ao seu projeto. Isso pode ser feito através do NPM ou Yarn:

npm install --save react-native-push-notification

Ou, se preferir o Yarn:

yarn add react-native-push-notification

Após a instalação, é necessário linkar a biblioteca ao seu projeto. Em versões mais recentes do React Native (0.60 e superior), o auto-linking geralmente cuida disso. Para versões anteriores ou para garantir, você pode rodar:

npx react-native link react-native-push-notification

Configuração Específica para Android com react-native-push-notification

Para o Android, algumas configurações manuais são necessárias para garantir o funcionamento correto das notificações, especialmente as agendadas.

Alterações no android/build.gradle

No arquivo android/build.gradle (nível do projeto), adicione ou atualize as versões do Google Play Services e Firebase, caso a biblioteca exija versões específicas. A documentação da biblioteca geralmente especifica estas versões, mas é comum usar as mais recentes compatíveis:

ext {
    googlePlayServicesVersion = "+" // ou uma versão específica como "17.0.0"
    firebaseVersion = "+" // ou uma versão específica como "20.0.0"
    // Outras configurações...
}

Configurações no AndroidManifest.xml

No arquivo android/app/src/main/AndroidManifest.xml, você precisará adicionar permissões e registrar componentes para as notificações:

• Permissões como android.permission.WAKE_LOCK, android.permission.VIBRATE, e para receber mensagens (com.google.android.c2dm.permission.SEND, SEU_PACKAGE_NAME.permission.C2D_MESSAGE) e iniciar após o boot (android.permission.RECEIVE_BOOT_COMPLETED).
• Metadados para o canal de notificação padrão (nome, descrição, cor).
• Receivers e services conforme especificado na documentação da biblioteca para lidar com o recebimento e agendamento de notificações.

Arquivo colors.xml

Pode ser necessário criar um arquivo colors.xml em android/app/src/main/res/values/ para definir cores padrão para as notificações, como por exemplo, a cor do ícone.

<resources>
    <color name="white">#FFF</color>
</resources>

Arquivo settings.gradle

Verifique se o projeto da biblioteca está incluído no arquivo android/settings.gradle:

include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')

Configuração Específica para iOS com react-native-push-notification

Para o iOS, a configuração envolve a instalação de dependências via CocoaPods e ajustes no AppDelegate.

Instalação do Módulo @react-native-community/push-notification-ios

A react-native-push-notification pode depender do @react-native-community/push-notification-ios para funcionalidades no iOS. Se não for instalado automaticamente, adicione-o:

yarn add @react-native-community/push-notification-ios

Instalação de Pods

Navegue até a pasta ios do seu projeto e execute:

pod install

Atualização do AppDelegate.m (ou AppDelegate.swift)

Você precisará importar os cabeçalhos necessários e adicionar código para registrar e manipular notificações no seu arquivo AppDelegate.m. Isso inclui importar RNCMPushNotificationIOS.h (ou o equivalente em Swift) e UserNotifications.h, além de adicionar métodos delegados para o ciclo de vida das notificações.

Utilizando a react-native-push-notification no Seu Aplicativo

Com a biblioteca instalada e configurada, você pode começar a usá-la em seu código JavaScript/TypeScript.

Importe a biblioteca:

import PushNotification from "react-native-push-notification";

Configurando o PushNotification.configure()

No ponto de entrada do seu aplicativo, configure a biblioteca. Este é o local para definir como o app reage a diferentes eventos de notificação.

PushNotification.configure({
  onRegister: function (token) {
    console.log("TOKEN:", token);
  },
  onNotification: function (notification) {
    console.log("NOTIFICATION:", notification);
    // Processar a notificação
    // notification.finish(PushNotificationIOS.FetchResult.NoData); // para iOS
  },
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },
  popInitialNotification: true,
  requestPermissions: Platform.OS === 'ios',
});

Como Criar Notificações Locais Imediatas com react-native-push-notification

Para disparar uma notificação imediatamente:

PushNotification.localNotification({
  channelId: "your-channel-id", // obrigatório para Android 8.0+
  title: "Minha Notificação Local",
  message: "Esta é uma mensagem de notificação local!",
  playSound: true,
  soundName: 'default',
  // Outros parâmetros como id, largeIcon, smallIcon, bigText, subText, color, vibrate, etc.
});

Como Criar Notificações Locais Agendadas com react-native-push-notification

Para agendar uma notificação para o futuro:

PushNotification.localNotificationSchedule({
  channelId: "your-channel-id",
  message: "Minha Notificação Agendada",
  date: new Date(Date.now() + 15 * 1000), // Agendada para 15 segundos no futuro
  allowWhileIdle: true, // (opcional) Permite que a notificação seja exibida mesmo em modo Doze
  // Outros parâmetros...
});

Como Cancelar Notificações com react-native-push-notification

Você pode cancelar uma notificação específica pelo ID ou todas as notificações locais agendadas.

// Cancelar uma notificação específica
// PushNotification.cancelLocalNotification({id: 'SEU_ID_AQUI'}); // React Native 0.63+ (anteriormente cancelLocalNotifications com S)

// Cancelar todas as notificações locais
PushNotification.cancelAllLocalNotifications();

É importante notar que, para cancelar notificações específicas, você precisa ter atribuído um `id` (string) ao criá-las.

Benefícios e Casos de Uso Avançados com react-native-push-notification

A principal vantagem desta biblioteca é a capacidade de gerenciar notificações locais e agendadas sem depender exclusivamente de serviços como Firebase Cloud Messaging (FCM) para cada interação. Isso é ideal para funcionalidades como lembretes, alarmes internos do app, ou notificações baseadas em eventos que ocorrem no dispositivo do usuário. A customização de ícones, sons e o comportamento de vibração também são recursos valiosos para alinhar as notificações com a identidade visual e a experiência do usuário do seu aplicativo.

Conclusão

A biblioteca react-native-push-notification oferece uma maneira poderosa e flexível de integrar notificações push locais e agendadas em seus aplicativos React Native. Seguindo os passos de instalação e configuração detalhados, e explorando as diversas opções de personalização, os desenvolvedores podem enriquecer significativamente a experiência do usuário. Recomendamos consultar a documentação oficial no GitHub para obter informações mais aprofundadas e exemplos de uso avançado.