Ó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
- No dashboard do OneSignal, crie uma nova notificação e selecione o seu dispositivo para envio.
- 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!
Top comments (0)