React Native’de App Icon Badge Yönetimi: Neden react-native-notification-badge-manager’ı Geliştirdim?

React Native uygulamalarında bazen oldukça küçük görünen bir ihtiyaç, native platformlara indiğinizde beklediğinizden daha karmaşık hale gelebiliyor.

Uygulama ikonunun üzerinde gördüğümüz bildirim sayıları bunun güzel örneklerinden biri.

Örneğin:

1, 5, 32

gibi uygulama ikonunun üzerinde gösterilen değerlerden bahsediyorum.

Bir projede ihtiyacım oldukça basitti:

Backend’den aldığım okunmamış bildirim sayısını uygulama ikonunda göstermek istiyorum.

Bunun için kapsamlı bir notification framework’ü kullanmak istemiyordum. Push notification gönderme, notification scheduling, foreground service veya gelişmiş notification UI gibi özelliklere ihtiyacım yoktu.

Sadece badge değerini yönetmek istiyordum.

Bu ihtiyaçtan yola çıkarak react-native-notification-badge-manager paketini geliştirdim.

Problem: Badge Yönetimi Platformlar Arasında Standart Değil

İlk bakışta API’nin şöyle olması gerektiğini düşünebilirsiniz:

setBadgeCount(5);

React Native bunu iOS ve Android’e gönderir ve problem çözülür.

iOS tarafında gerçekten buna yakın bir yapı bulunuyor.

Android tarafında ise durum farklı.

iOS

Modern iOS sürümlerinde badge değeri native olarak:

UNUserNotificationCenter.current().setBadgeCount(5)

ile yönetilebiliyor.

Daha eski iOS sürümlerinde ise:

UIApplication.shared.applicationIconBadgeNumber = 5

kullanılabiliyor.

Dolayısıyla React Native ile Swift arasındaki köprü kurulduktan sonra badge yönetimi oldukça belirgin bir akışa sahip.

Android’de ise aynı şeyi yapabileceğimiz ortak bir:

setApplicationIconBadgeNumber(5)

API’si bulunmuyor.

Ve asıl problem burada başlıyor.

Android’de Badge Neden Daha Karmaşık?

Android’deki uygulama ikonlarını Android işletim sisteminin kendisinden çok launcher yönetiyor.

Pixel Launcher, Samsung One UI, Xiaomi HyperOS, Huawei, OPPO veya vivo aynı davranışı göstermek zorunda değil.

Stock Android tarafında badge çoğunlukla mevcut notification’larla ilişkilidir.

Bu nedenle react-native-notification-badge-manager, stock Android / AOSP tarafında sessiz ve minimum importance seviyesinde bir notification oluşturarak:

.setNumber(count)
.setSilent(true)
.setPriority(NotificationCompat.PRIORITY_MIN)

yaklaşımını kullanıyor.

Ancak üretici launcher’larında farklı mekanizmalar bulunabiliyor.

Bu nedenle paket ayrıca Samsung, Huawei, Honor, Xiaomi, OPPO, vivo, Sony, HTC, Asus, Nova, Apex ve ZTE gibi launcher’lar için ilgili badge API/broadcast yöntemlerini uygulamaya çalışıyor.

Burada önemli bir nokta var:

Android’de badge görünümü hiçbir kütüphane tarafından bütün cihazlarda %100 garanti edilemez.

Kullanıcının launcher ayarları, Android sürümü ve üreticinin yaptığı değişiklikler sonucu etkileyebilir.

Paketin amacı bu farklılıkları mümkün olduğunca React Native geliştiricisinden soyutlamak.

API’yi Bilerek Küçük Tuttum

Paketin notification framework’üne dönüşmesini istemedim.

Temel kullanım şu şekilde:

import NotificationBadgeManager from
  'react-native-notification-badge-manager';

await NotificationBadgeManager.setCount(5);

Mevcut değeri okuyabilirsiniz:

const count = await NotificationBadgeManager.getCount();

Artırabilirsiniz:

await NotificationBadgeManager.increment();

veya birden fazla artırabilirsiniz:

await NotificationBadgeManager.increment(3);

Azaltabilirsiniz:

await NotificationBadgeManager.decrement();

Badge tamamen temizlenebilir:

await NotificationBadgeManager.clear();

decrement() kullanıldığında değer hiçbir zaman sıfırın altına düşmez.

Notification Permission

Badge gösterebilmek için platform permission davranışlarını da dikkate almak gerekiyor.

Bunun için:

const granted =
  await NotificationBadgeManager.requestPermission();

kullanılabilir.

Mevcut durumu kullanıcıya tekrar permission dialog’u göstermeden kontrol etmek için:

const status =
  await NotificationBadgeManager.checkPermission();

kullanılabilir.

Sonuç:

'granted'
'denied'
'undetermined'

şeklinde ele alınabilir.

Android 13 ve üzerindeki POST_NOTIFICATIONS permission süreci de paket tarafından yönetiliyor.

React Hook Kullanımı

Sadece imperative API sunmak yerine React tarafında state ile çalışmayı kolaylaştıracak küçük bir hook da ekledim.

import { useNotificationBadge }
  from 'react-native-notification-badge-manager';

function Inbox() {
  const {
    count,
    increment,
    decrement,
    clear,
  } = useNotificationBadge();
  return (
    <>
      <Text>Unread: {count}</Text>
      <Button
        title="Add"
        onPress={() => increment()}
      />
      <Button
        title="Clear"
        onPress={() => clear()}
      />
    </>
  );
}

Böylece native taraftaki badge değeri ile React component state’ini birlikte yönetmek mümkün oluyor.

FCM ile Birlikte Kullanmak

Bu paket bir push notification servisi değildir.

Get Muhammet Yeşil’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

FCM veya APNs’in yerini almaz.

Aslında ikisi birlikte kullanılabilir.

Örneğin backend push içerisinde kullanıcının toplam okunmamış bildirim sayısını gönderiyor olabilir:

{
  "unreadCount": "7"
}

React Native tarafında:

messaging().onMessage(async message => {
  const unread =
    Number(message.data?.unreadCount ?? 0);

  await NotificationBadgeManager.setCount(unread);
});

şeklinde badge güncellenebilir.

Bu yaklaşımı increment() kullanmaya göre birçok uygulamada daha güvenilir buluyorum.

Çünkü badge sayısının kaynağı cihaz değil backend olur.

Örneğin kullanıcı:

• iPhone
• Android telefon
• tablet

üzerinden aynı hesabı kullanıyorsa her cihaz bağımsız olarak +1 yapmak yerine backend'deki gerçek unread count değerini kullanabilir.

iOS’ta APNs Zaten Badge Gönderebiliyor, O Zaman Bu Pakete Neden İhtiyaç Var?

APNs payload içerisinde:

{
  "aps": {
    "badge": 7
  }
}

göndererek iOS badge değerini değiştirmek zaten mümkün.

Fakat bu sadece push geldiği an için yeterli olmayabilir.

Örneğin kullanıcı uygulamayı açtı ve bütün mesajları okudu.

Artık:

7 → 0

yapmanız gerekiyor.

Veya API’den güncel unread count:

3

geldi.

Uygulama çalışırken badge’i native tarafta güncellemek istediğinizde client-side bir API gerekiyor.

Paket esas olarak bu alanı hedefliyor.

Android Ayarlarını Özelleştirmek

Stock Android tarafında kullanılan notification davranışı isteğe göre özelleştirilebilir:

await NotificationBadgeManager.configure({
  android: {
    useNotification: true,
    channelName: 'App icon badge',
    contentTitle: 'Unread',
    contentText:
      'You have %count% unread items',
  },
});

Eğer yalnızca üretici launcher yöntemlerini kullanmak ve sessiz notification oluşturulmasını istemiyorsanız:

await NotificationBadgeManager.configure({
  android: {
    useNotification: false,
  },
});

kullanabilirsiniz.

Expo Desteği

Paket native kod içerdiği için Expo Go içerisinde çalışmaz.

Expo SDK 50 ve üzerindeki development/production build’lerde config plugin ile kullanılabilir:

{
  "expo": {
    "plugins": [
      "react-native-notification-badge-manager"
    ]
  }
}

Ardından:

npx expo prebuild

ve native build oluşturulabilir.

Kurulum

npm:

npm install react-native-notification-badge-manager

veya Yarn:

yarn add react-native-notification-badge-manager

iOS için:

cd ios
pod install
cd ..

Native dependency eklendiği için uygulamanın yeniden build edilmesi gerekiyor.

Desteklenen Yapı

İlk sürüm itibarıyla hedef:

• React Native 0.73+
• iOS 15.1+
• Android API 24+
• TypeScript
• React Native autolinking
• Legacy Native Module
• New Architecture interop
• Expo SDK 50+ development builds

Paket ayrıca Apple Privacy Manifest içeriyor.

Neden Açık Kaynak?

İlk başta bunu yalnızca kendi React Native projelerimde tekrar kullanmak için küçük bir local package olarak geliştirme fikri vardı.

Fakat badge yönetiminin özellikle Android tarafındaki parçalı yapısının başka geliştiricilerin de karşılaşabileceği bir problem olduğunu düşündüm.

Bu nedenle paketi bağımsız hale getirip npm üzerinden yayınlamaya karar verdim.

Amacım mümkün olduğunca küçük bir API yüzeyi tutmak:

setCount()
getCount()
increment()
decrement()
clear()

ve platforma özel detayları paketin içinde bırakmak.

Sonuç

React Native ekosisteminde çoğu zaman kapsamlı paketler doğal olarak tercih ediliyor.

Ancak bazen bir projede ihtiyacımız gerçekten tek bir native özellik olabiliyor.

App icon badge de bunlardan biri.

Bu durumda sadece ihtiyacınız olan özelliği yapan küçük bir native modül:

• dependency sayısını azaltabilir,
• entegrasyonu basitleştirebilir,
• uygulama mimarisini gereksiz özelliklerden uzak tutabilir.

Bu düşünceyle react-native-notification-badge-manager’ı açık kaynak olarak yayınladım.

Paket npm üzerinde:

https://www.npmjs.com/package/react-native-notification-badge-manager

Kurulum:

yarn add react-native-notification-badge-manager

Issue, bug report, cihaz/launcher geri bildirimi ve contribution’lar özellikle Android tarafındaki uyumluluğun gelişmesine yardımcı olacaktır.