Expo Notifications

Expo notification

A integração do expo notification é relativamente simples, uma vez que a Expo fornece uma API intuitiva e fácil de usar para enviar e gerenciar notificações. Além disso, a Expo lida com os aspectos técnicos mais complexos relacionados aos diferentes sistemas operacionais (iOS e Android), tornando a implementação das notificações muito mais direta e eficiente.

Instalando o Expo Notifications

Em seu projeto instale a biblioteca

npx expo install expo-notifications

Na main do projeto ou em um arquivo especifico adicione esse código para podermos testar se tudo esta funcionando corretamente.

useEffect(() => {
    registerForPushNotificationsAsync().then(token => console.log(token));

  }, []);

async function registerForPushNotificationsAsync() {
  let token;

  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }

  if (Device.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

  return token;
}

Em resumo, esse código verifica e solicita permissões de notificação ao usuário e, se as permissões forem concedidas, obtém o token de notificação push do dispositivo, pronto para ser usado para enviar notificações push personalizadas.

Agora que temos o token da push notifications do dispositivo, podemos configurar o envio de push notifications para dispositivos Android usando o Firebase Cloud Messaging (FCM). O FCM é uma plataforma do Google que permite enviar notificações push para dispositivos Android e iOS.

1. Criar um projeto no Firebase: Acesse o Console do Firebase em https://console.firebase.google.com/ e crie um novo projeto clicando no botão "Adicionar projeto".
2. Adicionar o aplicativo Android ao projeto: Após criar o projeto, clique em "Adicionar app" e selecione a opção "Android". Siga as instruções para registrar o aplicativo Android no projeto, fornecendo o nome do pacote (package name) do aplicativo, que pode ser encontrado no arquivo AndroidManifest.xml.

1. Fazer o download do arquivo de configuração do Firebase: O Firebase fornecerá um arquivo de configuração google-services.json, que contém informações de configuração específicas para o aplicativo Android. Baixe esse arquivo e adicione-o ao diretório android/app do seu projeto React Native.

1. Certifique-se de ativar o API Firebase Cloud Messaging V1 e o API Cloud Messaging (Legada)

Instalar react native firebase via yarn ou npm

yarn add @react-native-firebase/app

Ou se prefetir

npm install @react-native-firebase/app

Configure o Firebase no projeto

Para permitir o Firebase no Android, o plug-in google-services deve estar no projeto. Isso requer modificação em dois arquivos no diretório Android.

Primeiro, adicione o plug-in google-services como uma dependência dentro do arquivo /android/build.gradle

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

Por fim, adicione o plug-in google-service ao arquivo /android/app/build.gradle :

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- 

Para realizar o teste do expo - o link é esse mesmo https://exp.host/--/api/v2/push/send vamos mudar apenas o Push Token xxxxxxxxxxxxxxxxxxxxxx

curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
  "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "title":"hello",
  "body": "world"
}'

https://docs.expo.dev/versions/latest/sdk/notifications/ https://rnfirebase.io/ https://console.firebase.google.com/

curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{ "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]", "title":"hello", "body": "world" }'