(6 Ekim 2019) Dikkat! bu >=react-native@0.60 için çalışmamaktadır.

v0.60 için react-native-fcm depracated oldu ve bu paketi öneriyor. Bunun için bu makaleyi düzenlemek isterdim ancak önerdiği paket henüz bitmediği ve dokümante edilmediği için yazmıyorum. Güncellemesini kendiniz takip edebilirsiniz.

Merhaba arkadaşlar uzun bir süredir bu makaleyi yazmam gerektiğini düşünüyordum ve yazma zamanı geldi. React Native üzerine Firebase Push Notification kurmak için react-native-fcm kullanmalıyız. Bunun kurulumu ve tüm yapmamız gereken dokümanında var ancak biz tüm adımları anlatacağız.

Bu konu şu başlıkları da kapsayabilir:
react native firebase push kullanımı, react native firebase push örneği, firebase push notification kullanımı/kurulumu, react native push notification türkçe

Firebase hesabına sahip olmak ve proje oluşturmak

İlk başta bu işlemi yapmalıyız eğer zaten bir google hesabına sahipseniz hemen firebase ile bir proje oluşturabilirsiniz. console.firebase.google.com adresine girip Proje Ekle seçeneğine tıklayınız.

Ardından Projemize isim verelim, ben "RNPushApp" verdim.

Projemiz oluştuğuna göre artık bildirim göndermek için uygulama oluşturmaya geçebiliriz. Bunun için Sol panel > GROW > Could Messaging sekmesine girelim. 

Şimdi burada duralım çünkü henüz uygulamamız hazır değil. Hemen uygulamamızı hazırlayalım. Biz boş bir proje üzerinden anlatalım. O zaman...

React Native uygulaması oluşturup FCM bağımlılığını kuralım

Uygulamamızı oluşturalım:

$ react-native init RNPushApp
$ cd RNPushApp/

Ardından react-native-fcm kurulumunu yapalım:

$ npm i react-native-fcm --save

Son olarak da git'i kuralım. Bu isteğe bağlı sadece değiişklikleri takip etmek açısından çok kullanışlı oluyor.

$ git init
$ git add .
$ git commit -m "first commit."

Uygulamamız böylelikle artık geliştirmeye hazır. Şimdi App.js dosyamızı tamamen şöyle düzenleyelim:

import React, { Component } from 'react';
import {
    Platform,
    Text,
    View,
} from 'react-native';

import FCM, {
    FCMEvent,
    WillPresentNotificationResult,
    NotificationType,
} from "react-native-fcm";

export default class App extends Component {
    async componentWillMount() {
        // herhangi bir bildirim etkileşiminde çalışır
        FCM.on(FCMEvent.Notification, notif => {
            console.log("Bildirim geldi", notif);

            if(Platform.OS ==='ios' && notif._notificationType === NotificationType.WillPresent && !notif.local_notification){
                // Bu bildirim yalnızca kullanıcı ön planda ise bildirimi göstermek isteyip istemediğinize karar vermektir.
                // genellikle görmezden gelebilirsiniz. sadece göster/gösterme yapar.
                notif.finish(WillPresentNotificationResult.All)
                return;
            }
        });

        // eğer token yenilenirse çalışır
        FCM.on(FCMEvent.RefreshToken, token => {
            console.log("TOKEN YENİLENDİ (refreshUnsubscribe)", token);
        });

        // Uygulamaya Push atmak için izin alıyoruz
        try {
            let result = await FCM.requestPermissions({badge: false, sound: true, alert: true});
        } catch(e){
            console.error(e);
        }

        // Firebase Cloud Message Token değerini getirir.
        FCM.getFCMToken().then(token => {
            console.log("TOKEN (getFCMToken)", token);
        });

        if(Platform.OS === 'ios') {
            // Eğer APNS istiyorsanız isteğe bağlı APNS TOKEN
            FCM.getAPNSToken().then(token => {
                console.log("APNS TOKEN (getAPNSToken)", token);
            });
        }
    }

    render() {
        return (
            <View>
                <Text>
                    React Native Firebase Push Notification Kurulumu Uygulaması.
                    Daha fazla bilgi için: <Text style={{color: 'blue'}}>github.com/abdurrahmanekr/rnpushapp</Text>
                </Text>
            </View>
        );
    }
}

Çok basit bir şekilde uygulama componentWillMount oldunda Push'a dair her şey'i yapmış olduk.

Şimdi ise ios ve android kurulumunu ayrı ayrı anlatalım.

iOS üzerine Firebase Push Notification Kurulumu

Bunun için ilk yapmamız gereken FCM bağımlılığını XCode üzerinen uygulamamıza adreslemek. Bunun için şu komutu çalıştıralım:

$ react-native link react-native-fcm

libRNFIRMessaging.a kütüphanesi eklenirken sıkıntı çıkarabiliyor o yüzden bir de RNPushApp > Build Phases > Link Binary With Libraries menüsüne gelip libRNFIRMessaging.a kütüphanesini kaldırıp tekrar eklemek gerekli.

Bağımlılık kurulumu bu kadardı. Şimdi uygulamanın bazı ayarlarını değiştirelim. Öncelikle uygulamamızda kullanılmayan target'ları kaldıralım. tvOS kullanmıyoruz onu test'i ile beraber kaldıralım.

Eğer mac'inizde pod kurulu değilse brew install pod komutu ile kurabilirsiniz. ios dizinine geçelim ve pod tanımlayalım.

$ cd ios && pod init

Sonra oluşan Podfile dosyasına Firebase bağımlığını ekleyelim:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNPushApp' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for RNPushApp
  pod 'Firebase/Messaging' #buraya ekledik

  target 'RNPushAppTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

Şimdi pod kütüphanelerini kurabiliriz. Bunun için şu komutu çalıştıralım:

$ pod install

Kurulum başarılı ise tekrar uygulamanın dizinine geçelim ve önceleri XCode üzerinde açık olan projemizi kapatıp onun yerine ios/RNPushApp.xcworkspace projesini açalım. Bundan sonraki tüm işlemlerinizi buradan yürütmelisiniz.

AppDelegate.h dosyasını düzenleyelim:

+ @import UserNotifications;
+
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>

Ve tabii ki AppDelegate.m dosyasını da şu şekilde düzenleyelim:

+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];

    return YES;
 }

+
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
+ {
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
+ }
+
+ #if defined(__IPHONE_11_0)
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
+
+ //You can skip this method if you don't want to use local notification
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
+   [RNFIRMessaging didReceiveLocalNotification:notification];
+ }
+
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+ }

Buraya kadar herşey yolunda ise o zaman uygulamamızın erişimlerini düzenleyelim. Push Notification ve Background Modes içindeki Remote notifications açık olmalı. 

Önemli ayarlamalar da bitti. Öncelikle uygulamızın id'sini belirleyelim. com.rnpushapp olsun.

Tabi sizin bu id'niz apple geliştirici hesabınızda kayıtlı olması gerekiyor onun gibi bu konudan bağımsız işlemleri çoktan hallettiniz diye düşünerek anlatıyorum. Eğer bir sertifika veya uygulama id'si oluşturmadıysanız. Oluşturduktan sonra tekrar bu adımdan devam ediniz.

Uygulamızı bağlamak için firebase üzerinde ios uygulaması oluşturalım. O menüye geri gelelim. 

Gerekli id isim vs. alanları dolduralım.

Sonraki adımda bize bir plist dosyasını projemize dahil etmemiz gerektiğini söylüyor bu dosyayı verdiği talimattaki gibi yerine getirelim. Dosyayı ios/GoogleService-Info.plist olarak koplayadıktan sonra XCode'a sürükleyip bırakınız. 

2. adımı da yerine getirdiysek diğer adımları atlayabiliriz çünkü o adımları çoktan yaptık. Push'u test etmek için yapılması gereken birşey de ios development push sertifikanızın olması ve dışarıya p12 sertifikası çıkarabilmeniz. Bu sertifikayı Proje ayarları > Cloud Messaging > iOS uygulama yapılandırması > APNs Sertifikaları > Geliştirme APNs sertifikası bölmesinden yükleyebilirsiniz. (Not: Uygulamayı yayınlamak istiyorsanız üretim sertifikasını da yüklemelisiniz) Yüklediğinizde bir geliştirme sertifikanız olduğunu görmelisiniz.

Şimdi uygulamanızı gerçek bir iOS cihaz üzerine çalıştırmalısınız. Çalıştırdığımızda artık push atılabilir bir duruma gelmesi gerekiyor. Bunu anlamak için cihazı sallayalım ve açılan penceredeki Debug JS Remotely seçeneğine tıklayarak geliştirici penceresini açalım. Sonra console.log ile yazdırdığımız FCM değerini görelim:

Şimdi uygulamamıza Test olarak Push Notification atmak için Yine Cloud Messaging menüsüne gelelim ve "İlk Mesajınızı Gönderin" seçeneğine tıklayalım. Gerekli alanları aşağıdaki gibi dolduralım (FCM kayıt jetonu yerine console'a yazılan TOKEN değerini koplayadık):

Mesajı Gönder > Gönder ile komutu verelim. (Not: bu işlemleri yaparken uygulama çalışır durumda ve arkaplanda olmalı)

Ver artık Push Notification bizlere göründü:

Böylelikle iOS üzerine yapmamız gereken tüm işleri halletmiş olduk. Sıra androidde :)

Android üzerine Firebase Push Notification Kurulumu

İlk önce fcm bağımlılığını android'e adresleyelim.

$ react-native link react-native-fcm

android/build.gradle dosyasında şu değişiklikleri yapalım:

  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0'
+   classpath 'com.google.gms:google-services:3.0.0'

android/app/build.gradle dosyasının en altına şu komutu ekleyelim:

apply plugin: 'com.google.gms.google-services'

android/app/src/main/AndroidManifest.xml Dosyasında şu düzenlemeleri yapalım:

  <application
    ...
    android:theme="@style/AppTheme">

+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>

+   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
+     <intent-filter>
+       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
+     </intent-filter>
+   </service>

+   <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
+     <intent-filter>
+       <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
+     </intent-filter>
+   </service>

    ...

Buraya yazdığımız @mipmap/ic_notif değerine dikkat edin uygulamamızda bu dosyaları arayacaktır. Bulamazsa uygulamamız derlenemez o yüzden isteğe bağlı olarak bu bildirim ikonu değiştirme işlemini yapmayabilirsiniz. 

Kullanmak istemiyorsanız yazdığımız şu değeri siliniz.

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>

Eğer kullanmak istiyorsanız android/app/src/main/res dizinindeki yerlere ic_notif ikonlarını tek tek eklemelisiniz. İkonları kendinize göre özelleştirebilirsiniz veya buradan kopyalayabilirsiniz.

Sonra android/app/build.gradle dosyasına react-native-fcm bağımlılığını ekleyelim:

 dependencies {
+    compile project(':react-native-fcm')
+    compile 'com.google.firebase:firebase-core:10.0.1' //this decides your firebase SDK version
+    compile 'com.google.firebase:firebase-messaging:10.0.1'
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }

android/app/src/main/java/com/<proje adı>/MainActivity.java dosyasını şu şekilde düzenleyelim:

+ import android.content.Intent;
...
public class MainActivity extends ReactActivity {
+ @Override
+    public void onNewIntent(Intent intent) {
+        super.onNewIntent(intent);
+        setIntent(intent);
+    }
}

Bildirime tıklama işlemini yapılandırmak için AndroidManifest.xml dosyasını şu şekilde düzenleyelim (bunu neden yapıyoruz?):

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize"
+   android:launchMode="singleTop"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>

Android uygulamanın bildirimleri için izinleri

İzinleri eklemek için AndroidManifest.xml dosyasında şu değişiklikleri yapalım:

  <uses-permission android:name="android.permission.INTERNET" />
+ <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
+ <uses-permission android:name="android.permission.VIBRATE" />

  <application>
+      <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
+      <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
+          <intent-filter>
+              <action android:name="android.intent.action.BOOT_COMPLETED"/>
+              <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
+              <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
+              <category android:name="android.intent.category.DEFAULT" />
+          </intent-filter>
+      </receiver>
  </application>

Firebase üzerinde Android uygulama oluşturma

Anasayfaya gelelim ve başka bir uygulama ekleme butonuna tıklayıp android'i seçelim.

Sonra uygulama id'sini ve adını yazalım

Sonra bizden verdiği dosyayı indirelim onu android/app dizinine atalım.

2. adımda tamamsa diğer adımları atlayabiliriz çünkü zaten halihazırdalar. 

Şimdi derleme aşamasına geçebiliriz.

Derlemeden önce birşeyden bahsedelim. android/build.gradle dosyasına google-services adında bir bağımlılık ekledik. Eğer bu bağımlılık sizin bilgisayarınızda yüklü olmazsa derleme başarısız olacaktır. O yüzden SDK Manager > SDK Tools açarak Support Repository> Google Repository değerini seçelim eğer güncelleme istiyorsa güncelleyelim.

Derlemek için android dizinine geçip gradlew komutunu çalıştıralım.

$ cd android && ./gradlew assemble

Herşey yolunda ise android/app/build/outputs/apk/app-debug.apk olarak oluşan dosyayı bir android cihaza yükleyelim. Uygulamayı yükleyince çalışan webpack-dev-server bulamayacağı için bir hata ile karşılaşabilirsiniz. Bunun için telefonu sallayın ve Dev Settings > Debug server host & port for device seçeneğine basın ve bilgisayarınızı ip'sini yazın (tabi bilgisayarınızda npm start ile projeyi yayına açmanız gerekiyor).

Uygulamamız eğer yayınlandıysa iOS'a yaptığımız gibi Debug modunda açalım ve console'a yazılan TOKEN (getFCMToken) değerini alıp aynı ios'a Cloud Messaging üzerinden gönderelim.

Kulaklarım falan görünüyor ama olsun :) Bildirimimiz geldi.

Yapmamız gerekenler bu kadardı. Siz FCM dokümanından daha çok bilgi elde edebilirsiniz. 

Bu Projenin Dosyaları

github.com/abdurrahmanekr/rnpushapp

Destekçiler ve iOS Hesabı

Detaysoft

Kaynaklar

React Native Firebase Cloud Messaging Eklentisi
github.com/evollu/react-native-fcm

Firebase ile ilgili tüm dokümanlar
firebase.google.com/docs

@mipmap/ic_notif ile iligi çıkan sorunun çözümü
github.com/evollu/react-native-fcm/issues/84

Could not find com.google.firebase:firebase-core:9.0.0 sorununun çözümü
github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/106