React Native’de Local Notification Nasıl Gönderilir?
Uygulama açık iken, verilerde değişiklik olduğunda kullanıcının durumdan haberdar olmasını sağlamak için local notification’lar (yerel bildirimler) gönderilir. Bugün de local notification’ların nasıl kullanıldığına değineceğim.
Öncelikle projemizi aşağıdaki gibi oluşturalım:
npx react-native init SampleRNLocalNotifications --template react-native-template-typescript
cd SampleRNLocalNotifications
npx react-native run-iosIOS’te local notification gönderimi
IOS’te local notification gönderimi için push-notification-ios kütüphanesini yükleyebiliriz:
yarn add @react-native-community/push-notification-ios
cd ios && pod install && cd ..Eklediğimiz kütüphanenin native taraf ile haberleşebilmesi için Objective-C ile bazı değişiklikler yapmamız gerekiyor. Bu nedenle projeyi XCode ile açalım:
open ios/SampleRNLocalNotifications.xcworkspaceAppDelegate.m dosyasının en üstüne RNCPushNotificationIOS ve UserNotifications kütüphanelerini ekleyelim:
#import <RNCPushNotificationIOS.h>
#import <UserNotifications/UserNotifications.h>Devamında kodun native tarafla haberleşmesi için aşağıdaki fonksiyonları ekleyelim:
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
[RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
}- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
[RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
[RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
[RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
[RNCPushNotificationIOS didReceiveLocalNotification:notification];
}
Kodu açıklayacak olursak:
- didRegisterUserNotificationSettings: Kullanıcının ilgilini çekmek için local ve remote notification’ların kullanılabilmesine olanak tanır.
- didRegisterForRemoteNotificationsWithDeviceToken: Uygulamanın, Apple Push Notification (APN)Servisine register edilmesini sağlar.
- didReceiveRemoteNotification: Remote notification geldiğini ve gelen verilerin alınmak üzere hazır olduğunu belirtir.
- didFailToRegisterForRemoteNotificationsWithError: Uygulama, Apple Push Notification Servisine register olamadığında hata bilgisinin alınmasını sağlar.
- didReceiveLocalNotification: Local notification alındığında, delegate’e bu bilgiyi iletir.
Not: Tabii ki bu fonksiyonların her birine ihtiyacımız yok. Fakat sonraki aşamalarda, uygulamayı push notification yapısına geçirmek istersek, delegate dosyası içerisinde hazır halde durmaları bizim için yararlı olacaktır.
Daha sonra bildirim ile ilişkili API’nin (UNUserNotificationCenter’ın) kullanılabilmesi için AppDelegate.m dosyasında didFinishLaunchingWithOptions fonksiyonunun içerisine return ifadesinin hemen üstüne aşağıdaki satırları ekleyelim:
UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
center.delegate = self;Ayrıca bildirim geldiğinde ne işlem yapılacağı ile ilgili olarak willPresentNotification fonksiyonunu da eklememiz gerekiyor:
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);
}Not: XCode sarı renkte uyarı verebilir. Göz ardı edebilirsiniz.
Daha sonra projeyi VSCode ile açalım:
code .App.tsx dosyasını aşağıdaki gibi değiştirelim.
import React from 'react';
import PushNotificationIOS from '@react-native-community/push-notification-ios';const App = () => {
PushNotificationIOS.requestPermissions().then(() => {
PushNotificationIOS.presentLocalNotification({
alertBody: 'test',
});
});
return <></>;
};export default App;
Kodu açıklayacak olursak:
- requestPermissions(): Bildirim görüntüleme izni almak için kullanılır.
- presentLocalNotification(): Local notification atılmasını sağlar.
- alertbody: Bildirim metni ayarlanır.
Aşağıdaki gibi uygulamayı çalıştırabilirsiniz:
npx react-native run-iosUygulamayı çalıştırdığınızda öncelikle bildirim izni istenecektir:
Allow (izin ver) işareti seçildiğinde bildirim aşağıdaki gibi görüntülenir:
Oluşturduğunuz bildirimi, Apple dokümanında belirlenen özelliklere göre daha da detaylandırabilirsiniz:
PushNotificationIOS.presentLocalNotification({
alertAction: 'view', // IOS10'dan sonra artık görüntülenmiyor
alertTitle: '🌹Sevgililer Günü İndirimi',
alertBody: '💎Sevdikleriniz için en anlamlı hediyeler artık %30 indirimli',
applicationIconBadgeNumber: 1,
category: 'SALE_NOTIFICATION',
isSilent: false,
soundName: 'customSound',
userInfo: {username: 'zafer', phoneNumber: '531xxxxxxx'},
});
Android için bildirimler
Android ve IOS’in bir arada çalışabilmesi için react-native-push-notification kütüphanesini yükleyebiliriz:
yarn add react-native-push-notification
yarn add -D @types/react-native-push-notificationReact Native tarafında değişiklik yapmak için App.tsx’i aşağıdaki gibi değiştirelim. showNotification adında gelen bir fonksiyon oluşturalım ve OS durumuna göre bildirim iznini kontrol edelim:
import React from 'react';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {Platform} from 'react-native';
import PushNotification from 'react-native-push-notification';const App = () => {
const showNotification = () => {
PushNotification.localNotification({
title: '🌹Sevgililer Günü İndirimi',
message: '💎Sevdikleriniz için en anlamlı hediyeler artık %30 indirimli',
});
}; if (Platform.OS === 'ios') {
PushNotificationIOS.requestPermissions().then(showNotification);
} else {
showNotification();
}
return <></>;
};
export default App;
Bu kodda eğer telefon iOS işletim sistemine sahip ise öncelikle bildirim gönderme iznini alıyoruz. İşletim sistemi Android ise oluşturduğumuz showNotification metodu ile direkt olarak bildirimin görüntülenmesi sağlıyoruz.
Sonuç olarak:
Bildirim gönderimi, uygulamaların olmazsa olmazını oluşturuyor. Siz de bu yazıdan edindiğiniz bilgilerle local notification gönderimini sağlayabilirsiniz. Sonraki yazımda remote notification (push notification) gönderimi üzerine değineceğim.
Projenin bitmiş halini react-native-local-notification reposunda bulabilirsiniz. Bu yazı hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…
