Jak zainstalować expo-notifications?

yarn add react-native-notifications

Co konfiguruje Notifications.setNotificationHandler?

Jak app reaguje na powiadomienia w foreground

Kurs React Native · Moduł 7: Powiadomienia

expo-notifications - Wprowadzenie

2 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji3

Witaj w Wieży Syren! Tutaj nauczysz się wysyłać powiadomienia - jak syreny wzywające mieszkańców Atlantydy.

Instalacja

npx expo install expo-notifications expo-device expo-constants

Konfiguracja (app.json)

{
  "expo": {
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/notification-icon.png",
          "color": "#1a5276",
          "sounds": ["./assets/sounds/notification.wav"]
        }
      ]
    ],
    "android": {
      "useNextNotificationsApi": true
    }
  }
}

Podstawowa konfiguracja

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';
import { Platform } from 'react-native';

// Konfiguracja jak pokazywać powiadomienia gdy app jest aktywna
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowBanner: true,
    shouldShowList: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

// Rejestracja push notifications
async function registerForPushNotificationsAsync() {
  let token;

  // Push notifications działają tylko na prawdziwych urządzeniach
  if (!Device.isDevice) {
    console.log('Push notifications wymagają fizycznego urządzenia');
    return;
  }

  // Sprawdź/poproś o uprawnienia
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;

  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    finalStatus = status;
  }

  if (finalStatus !== 'granted') {
    console.log('Brak uprawnień do powiadomień');
    return;
  }

  // Pobierz Expo Push Token
  token = await Notifications.getExpoPushTokenAsync({
    projectId: 'your-project-id', // z app.json
  });

  // Android: ustaw kanał powiadomień
  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#1a5276',
    });
  }

  return token;
}

expo-notifications to oficjalna biblioteka Expo do obsługi powiadomień!

Kod do tej lekcji: App.tsx

import { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet, Platform } from 'react-native';
import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';

// Konfiguracja jak pokazywać powiadomienia gdy app jest aktywna
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

// Rejestracja po Expo Push Token
async function registerForPushNotificationsAsync(): Promise<string | undefined> {
  // Push notifications działają tylko na fizycznym urządzeniu
  if (!Device.isDevice) {
    console.log('Push wymaga fizycznego urządzenia');
    return;
  }

  // TODO: sprawdź obecne uprawnienia przez Notifications.getPermissionsAsync()
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;

  // TODO: jeśli brak zgody, poproś o uprawnienia przez requestPermissionsAsync()
  if (existingStatus !== 'granted') {
    // const { status } = ...
  }

  if (finalStatus !== 'granted') {
    console.log('Brak uprawnień do powiadomień');
    return;
  }

  // TODO: pobierz token przez Notifications.getExpoPushTokenAsync()
  const token = '';

  // TODO (Android): ustaw kanał 'default' przez setNotificationChannelAsync
  if (Platform.OS === 'android') {
    // await Notifications.setNotificationChannelAsync('default', { ... });
  }

  return token;
}

export default function App() {
  const [pushToken, setPushToken] = useState<string>('');

  useEffect(() => {
    registerForPushNotificationsAsync().then((token) => {
      if (token) setPushToken(token);
    });
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Wieża Syren</Text>
      <Text style={styles.token}>{pushToken || 'Brak tokenu'}</Text>
      <Button title="Zarejestruj powiadomienia" onPress={() => registerForPushNotificationsAsync()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a5276', padding: 20 },
  title: { fontSize: 24, color: '#fff', marginBottom: 16 },
  token: { fontSize: 12, color: '#aed6f1', marginBottom: 16, textAlign: 'center' },
});

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Jak zainstalować expo-notifications?
2. Co konfiguruje Notifications.setNotificationHandler?

To 2 z 4 pytań do tej lekcji. Pozostałe rozwiążesz w grze.

Zadania praktyczne w grze

Układanie w pionie
Uporządkuj konfigurację handlera powiadomień:
Układanie w poziomie
Ułóż pobieranie push token:
Edytor kodu
Uzupełnij kod rejestracji push token.