React Native Development
React Native’de Firebase Bulut Mesajlaşma ile Anlık Bildirim
Temmuz 9, 2025
Anlık bildirimler, işletmelerin zamanında güncellemeler, uyarılar ve teklifler göndererek kullanıcılarla etkileşim kurmasını sağlayan modern mobil uygulamaların temel bir özelliğidir. React Native’de, Firebase Cloud Messaging (FCM) anlık bildirimler göndermek için kullanılabilir. React-native-firebase ve Notifee’nin yardımıyla, bu özelliği uygulamak daha basit ve güçlü hale gelir.
Bu yazımızda, React Native projenizde Firebase Cloud Messaging’i kurma sürecini adım adım anlatacağım. Uygulamanızın buluttan gönderilen mesajlara uygun şekilde yanıt verebilmesini sağlayarak gelen anlık bildirimleri nasıl ele alacağınızı öğreneceksiniz. İster uyarılar, ister güncellemeler veya kişiselleştirilmiş içerikler gönderiyor olun, Firebase Cloud Messaging kullanıcılarınızın etkileşimde kalmasını ve bilgilendirilmesini sağlamanıza yardımcı olacak sağlam bir çözüm sunar. React Native’deki anlık bildirimler dünyasına dalalım ve uygulamanızın kullanıcı deneyimini geliştirmek için FCM’nin potansiyelini ortaya çıkaralım.
”Bizi bekleyen hayata sahip olabilmek için planladığımız hayattan vazgeçmeye istekli olmalıyız.”— Joseph Campbell
Firebase Cloud Messaging, geliştiricilerin iOS, Android ve web uygulamaları dahil olmak üzere çeşitli platformlardaki kullanıcılara mesaj ve bildirim göndermelerine olanak tanıyan bulut tabanlı bir hizmettir. FCM’nin yeteneklerinden yararlanarak, kullanıcılarınıza kişiselleştirilmiş ve zamanında içerik sunabilir ve uygulamanızla ilgili genel deneyimlerini geliştirebilirsiniz.
Önkoşullar
Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
•Firebase projesi yapılandırılmış (eğer yapılandırılmamışsa, Firebase Konsolundan bir tane oluşturun).
•React Native ve Firebase hakkında temel bilgi.
•Node.js ve npm yükleyin.
•Bir React Native uygulaması kurun.
İhtiyacımız olanı elde etmek için öncelikle bazı bağımlılıkları yüklememiz gerekiyor. Bunun için 3 farklı kütüphane kullanacağız.
Bildirim izinlerini almak ve yönetmek için kullanılan kütüphane: react-native-permissions
Firebase ve Firebase bulut mesajlaşma entegrasyonu için kullanılan kütüphane: react-native-firebase
Bildirimleri almak ve görüntülemek için kullanılan kütüphane: notifee/react-native
yarn add @react-native-firebase/app
@react-native-firebase/messaging
react-native-permissions
@notifee/react-native
ioscd ios/ && pod install dizininde Firebase’ı yapılandırın
iOS için Firebase’ı yapılandırmak için şunları yapmanız gerekir:
Firebase iOS SDK’sını ekleyin
- Firebase konsolundan GoogleService-Info.plist dosyasını indirin.
- Bu dosyayı Xcode projenize sürükleyip bırakın ve “Gerekirse öğeleri kopyala” seçeneğinin işaretli olduğundan emin olun.
iOS Proje Ayarlarını Değiştirin
- Dağıtım Hedefini Belirleyin
Xcode’da dağıtım hedefini 11.0 veya daha yüksek bir sürüme ayarlayın. Bu, Firebase Mesajlaşma ve Notifee için gereklidir.
- Anlık Bildirimleri Etkinleştirin
- Hedefiniz için Xcode’da İmzalama ve Yetenekler’e gidin.
- “Yetenek” bölümünün altında Push Bildirimleri ekleyin.
- Arka Plan Modları ekleyin ve Uzaktan bildirimleri etkinleştirin.
AppDelegate.m’yi güncelleyin
AppDelegate.m’yi açın ve Firebase ve Notifee bildirimlerini destekleyecek şekilde değiştirin:
- Firebase ve Notifee’yi içe aktarın
AppDelegate.m’nin en üstüne şunu ekleyin, add:#import <Firebase.h>
#import <RNCPushNotificationIOS.h>
- Firebase’ı yapılandırın
didFinishLaunchingWithOptions yönteminde Firebase’ı başlatın: – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[FIRApp configure];
return YES;
}
Android’de Firebase’ı yapılandırın
- google-services.json dosyanızı (Firebase Konsolundan) android/app klasörünüze ekleyin.
android/build.gradle dosyasını şu şekilde değiştirerek değiştirin:
google-services.json dosyanızı (Firebase Konsolundan) android/app klasörünüze ekleyin.
- android/build.gradle dosyasını şu şekilde değiştirerek değiştirin:
classpath ‘com.google.gms:google-services:4.3.10’
- android/app/build.gradle dosyasını google-services eklentisini uygulamak için değiştirin:
apply plugin: ‘com.google.gms.google-services’
Firebase Cloud Messaging’i (FCM) Ayarlama
- Firebase Messaging’i Etkinleştir
- Firebase konsoluna gidin ve oturum açın/kayıt olun.
- “Proje ekle” düğmesine tıklayarak bir proje ekleyin ve projeye bir ad verin.
- Adımları izleyin ve bir proje oluşturun.
- Projeyi başarıyla oluşturdunuz. Şimdi genel bakış sayfasındasınız.
- Hem Android hem de iOS için Firebase’a uygulama eklememiz gerekiyor.
- Kullanıcı İzinlerini İsteme
Şimdi, anlık bildirimler göndermek için kullanıcılardan bildirim izinleri istememiz gerekiyor. Bu, mesajlaşma modülü kullanılarak yapılabilir. ‘@react-native-firebase/messaging’ adresinden iletileri içe aktarın;
async function requestUserPermission() {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log(‘Notification permission enabled.’);
} else {
console.log(‘Notification permission not granted.’);
}
}
Uygulama başlatılırken requestUserPermission()’ı çağırın.
- FCM Token’ını Alın
Cihazın bildirim alabilmesi için benzersiz bir token’a ihtiyacı vardır. Bu token’ı şu kodu kullanarak alabilirsiniz:import messaging from ‘@react-native-firebase/messaging’;
async function getFcmToken() {
const token = await messaging().getToken();
console.log(‘FCM Token:’, token);
}
useEffect(() => {
getFcmToken();
}, []);
Bu token daha sonra Firebase’den belirli cihazlara bildirim göndermek için kullanılacak.
Gelen Bildirimleri İşleme
Firebase, bildirimleri işlemek için üç senaryo sunar: uygulama ön planda, arka planda veya sonlandırılmış durumdayken.
- Ön Plan Bildirimleri
Ön planda bildirimleri yönetmek için, uygulama etkinken özelleştirilmiş bildirimler göstermenizi sağlayan güçlü bir kütüphane olan Notifee’yi kullanacaksınız. Mesajlaşmayı ‘@react-native-firebase/messaging’ adresinden içe aktarın;
import notifee, { AndroidImportance } from ‘@notifee/react-native’;
messaging().onMessage(async (remoteMessage) => {
console.log(‘Message received in foreground:’, remoteMessage);
await notifee.displayNotification({
title: remoteMessage.notification.title,
body: remoteMessage.notification.body,
android: {
channelId: ‘default’,
importance: AndroidImportance.HIGH,
},
});
});
Notifee, resim ekleme, özel sesler ve öncelik ayarları gibi bildirimlerin özelleştirilmesine olanak tanıyarak genel bildirim deneyimini geliştirir.
- Arka Plan ve Sonlandırılmış Durum Bildirimleri
Arka planda veya sonlandırılmış durumda, bildirimler sistem tarafından otomatik olarak işlenir ve bildirim tepsisinde görünür. Bunun için Firebase’in yerleşik FCM mesaj işleme özelliğini kullanabilirsiniz, bu nedenle bu durumlar için ek kod gerekmez.
Bildirim Kanallarını Yapılandırma (Android)
Android’de bildirimler kanallar aracılığıyla iletilir. Kanalları özel sesler, titreşim desenleri ve önem düzeyleriyle yapılandırabilirsiniz.
Notifee’de bir bildirim görüntülemeden önce bir kanal ayarlayın:import notifee from ‘@notifee/react-native’;
async function createNotificationChannel() {
await notifee.createChannel({
id: ‘default’,
name: ‘Default Channel’,
importance: AndroidImportance.HIGH,
});
}
useEffect(() => {
createNotificationChannel();
}, []);
Anlık Bildirimleri Test Etme
- Bir Test Bildirimi Gönderme
Firebase Konsolu’ndan Cloud Messaging bölümüne giderek ve FCM belirtecini kullanarak belirli bir cihaza mesaj göndererek test bildirimleri gönderebilirsiniz.
- Bildirim Tıklamalarının İşlenmesi
Notifee ayrıca bildirim etkileşimini (örneğin, kullanıcı bildirime dokunduğunda) yönetmenize de olanak tanır.
.notifee.onBackgroundEvent(async ({ type, detail }) => {
if (type === notifee.EventType.ACTION_PRESS) {
console.log(‘Notification tapped: ‘, detail.notification);
}
});
Kaynaklar:
• React Native Firebase Documentation
Yazar: Mahir Uslu
