TheLazy.Dev
Portfolio GitHub

Blog

reactnative |onesignal |expo

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

rafael_avelarcampos_e71c

Rafael Avelar Campos

Posted on November 7, 2024

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
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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) => {});
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Image description

Image description

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!

💖 💪 🙅 🚩
rafael_avelarcampos_e71c
Rafael Avelar Campos

Posted on November 7, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

November 7, 2024