Explorando Notificações Push no React Native com Expo e OneSignal!

Ótimo! Aqui está a estrutura do artigo, incluindo os trechos de código que você compartilhou. Isso deve facilitar para os leitores a configuração e integração do OneSignal em um aplicativo Expo.

---

Configurando Notificações Push no Expo com OneSignal

Neste guia, vamos configurar o OneSignal para enviar notificações push no seu aplicativo Expo. Com as notificações push, você pode melhorar a interação com seus usuários, mantendo-os informados com atualizações em tempo real.

Pré-requisitos

• Conta no OneSignal.
• SDK do Expo CLI configurado.
• Projeto criado no Expo.

Instalar as dependencias:

npx expo install react-native-onesignal

npx expo install onesignal-expo-plugin

Passo 1: Configurando o app.json com o OneSignal

Primeiro, vamos configurar o app.json do projeto Expo para incluir o plugin do OneSignal. Aqui está a estrutura do arquivo app.json:

{
  "expo": {
    "name": "notification-app",
    "slug": "notification-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./src/assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.notification-app"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./src/assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "onesignal-expo-plugin",
        {
          "mode": "development"
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

Observação: Altere "YOUR_ONESIGNAL_APP_ID" para o ID do seu app no OneSignal.

Passo 2: Inicializando o OneSignal no Projeto

Vamos criar um arquivo OneSignalEntry.ts para organizar a inicialização do OneSignal.

import OneSignal from 'react-native-onesignal';

export function OneSignalEntry(): void {
  // Inicializando o OneSignal
  OneSignal.setLogLevel(6, 0);
  OneSignal.setAppId('XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX');

  // Solicita permissão para notificações no iOS
  OneSignal.promptForPushNotificationsWithUserResponse(() => {});

  // Gerencia notificações recebidas com o app em primeiro plano
  OneSignal.setNotificationWillShowInForegroundHandler((notificationReceivedEvent) => {
    const notification = notificationReceivedEvent.getNotification();
    const data = notification.additionalData;

    notificationReceivedEvent.complete(notification);
  });

  // Gerencia notificações abertas
  OneSignal.setNotificationOpenedHandler((notification) => {});
}

Esse código define como o OneSignal deve se comportar quando uma notificação é recebida ou aberta, além de solicitar a permissão para notificações push no iOS.

Passo 3: Integração no Componente Principal

Agora, vamos integrar o OneSignalEntry() no nosso layout principal. No exemplo abaixo, estamos usando o expo-router para a navegação e o ThemeProvider para alternar entre temas claro e escuro.

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';
import { OneSignalEntry } from '../Utils/OneSignal';

export const unstable_settings = {
  initialRouteName: '(tabs)',
};

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  // Inicializando o OneSignal
  OneSignalEntry();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
      </Stack>
    </ThemeProvider>
  );
}

Testando a Notificação

1. No dashboard do OneSignal, crie uma nova notificação e selecione o seu dispositivo para envio.
2. Verifique se o seu aplicativo está recebendo as notificações conforme configurado.

---

Este artigo abrange os passos essenciais para integrar o OneSignal com um projeto Expo. Com essa configuração, você já consegue enviar e gerenciar notificações push para os usuários do seu app!