React Native Local Notification

Öncelikle React Native Local Notification için kurulum yapmamız gerekiyor. Kuracağımız paketin sayfasını ziyaret edebilir, diğer ayrıntıları okuyabilirsiniz. Firebase olmadan kurulum yapacağımız için biraz farklı bir kurulum olacak.

Install

npm ile paketimizi kuruyoruz.

npm install --save react-native-push-notification

Kurulum bittikten sonra LocalNotification.js adında bir sayfa açarak aşağıdaki kodları ekliyoruz. kodlar çok uzun olabilir, siz gereksiz alanları çıkarabilirsiniz. Toplamda 3 bölümden oluşuyor:

PushNotification.configure Gerekli ayarlar
PushNotification.createChannel Firebase kullanmadığımız için kendimiz Channel ekliyoruz.
PushNotification.localNotification Görünecek Bildirim

import React, { useState, useEffect } from 'react';
import { Text, Button, Platform } from 'react-native';
import PushNotification from 'react-native-push-notification'
// Must be outside of any component LifeCycle (such as `componentDidMount`).
PushNotification.configure({
    // (optional) Called when Token is generated (iOS and Android)
    onRegister: function (token) {
      console.log("TOKEN:", token);
    },
  
    // (required) Called when a remote is received or opened, or local notification is opened
    onNotification: function (notification) {
      console.log("NOTIFICATION:", notification);
  
      // process the notification
  
      // (required) Called when a remote is received or opened, or local notification is opened
      notification.finish(PushNotificationIOS.FetchResult.NoData);
    },
  
    // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
    onAction: function (notification) {
      console.log("ACTION:", notification.action);
      console.log("NOTIFICATION:", notification);
  
      // process the action
    },
  
    // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
    onRegistrationError: function(err) {
      console.error(err.message, err);
    },
  
    // IOS ONLY (optional): default: all - Permissions to register.
    permissions: {
      alert: true,
      badge: true,
      sound: true,
    },
  
    // Should the initial notification be popped automatically
    // default: true
    popInitialNotification: true,
  
    /**
     * (optional) default: true
     * - Specified if permissions (ios) and token (android and ios) will requested or not,
     * - if not, you must call PushNotificationsHandler.requestPermissions() later
     * - if you are not using remote notification or do not have Firebase installed, use this:
     *     requestPermissions: Platform.OS === 'ios'
     */
    //requestPermissions: true,
    requestPermissions: Platform.OS === 'ios'
  });
export const LocalNotification = () => {

  PushNotification.createChannel(
    {
      channelId: "ahsen8", // (required)
      channelName: "My channel", // (required)
      channelDescription: "A channel to categorise your notifications", // (optional) default: undefined.
      playSound: false, // (optional) default: true
      soundName: "default", // (optional) See `soundName` parameter of `localNotification` function
      importance: 4, // (optional) default: 4. Int value of the Android notification importance
      vibrate: true, // (optional) default: true. Creates the default vibration patten if true.
    },
    (created) => console.log(`createChannel returned '${created}'`) // (optional) callback returns whether the channel was created, false means it already existed.
  );
    PushNotification.localNotification({
      channelId: "ahsen8", // (required)
      channelName: "My channel", // (required)
      autoCancel: true,
      bigText:
        'This is local notification demo in React Native app. Only shown, when expanded.',
      subText: 'Local Notification Demo',
      title: 'Local Notification Title',
      message: 'Expand me to see more',
      vibrate: true,
      vibration: 300,
      playSound: true,
      soundName: 'default',
      actions: '["Yes", "No"]'
    })
  }

Yukarıdaki sayfayı oluşturup ekledikten sonra, App.js ya da hangi sayfada kullanmak istiyorsak import etmemiz gerekecek.

Import

import { LocalNotification } from '../services/LocalPushController'

Bir butona tıklayınca bildirim görmek istiyorum, bu nedenle butona tıklayınca çalışacak handleButtonPress adında bir fonksiyon tanımlayalım:

const handleButtonPress = () => {
    LocalNotification()
  }

Kullanımı

Butona tıklanınca handleButtonPress adında fonksiyonum çalışacak ve artık Local Notification çalışmış olacak.

<Button title={'Local Push Notification'} onPress={handleButtonPress} />

React Native Push Notification Local Notification

Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..