DEV Community

Cover image for Explorando Notificações Push no React Native com Expo e OneSignal!
Rafael Avelar Campos
Rafael Avelar Campos

Posted on

1

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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay