Prerequisites

This section covers how to setup push notification in React Native.

​
Enabling Push Notification in SDK

Set enablePush to true during SDK initialization. More details about SDK initialization can be found here

// Set config
const configs = new CastledConfigs()
configs.appId = "<app-id>"
configs.location = CastledLocation.US
configs.enablePush = true

// Initialize SDK
CastledNotifications.initialize(configs)

​
Native setup

Step 1: Add required permissions

Add the following permission to android app AndroidManifest.xml. This allows the app to receive push notifications

AndroidManifest.xml
    <manifest ...>
        <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
        <application ...>
            ...
        </application>
    </manifest>

Step 2: Firebase push messaging handling service

By default SDK takes care of push token fetch and notification handling once app gets the permission to post notification. In case the app has registered its own Firebase message service class (FirebaseMessagingService) for handling push tokens, SDK needs to be notified of the new token and any push notification received from Castled platform. Folow these instructions if you already have a FirebaseMessagingService registered.

Step 3: Notification default configs

You can also configure default values for Notification Channels and Notification Icons. Please find the instructions here

​
Requesting Push Notification Permission

Following SDK method can be used by the app to fetch user permission for showing push notifications. User will be shown the native notification permission dialog based on the mobile platform he is on.

CastledNotifications.requestPushPermission()
  .then((isGranted) => {
    if (isGranted) {
      console.log("Push notification permission granted")
    } else {
      console.log("Push notification permission not granted")
    }
  })
  .catch((error) => {
    console.log("Request failed, error: " + error.message)
  })

​
Push Notification Events Listener

App can listen to push notification events by registering a listener. This is useful when you want to override the default click actions implemented by the SDK with your own custom implementations.

Currently the following push events as supported:

  • Notification Received
  • Notification Clicked
  • Notification Dimissed

Please find the sample code snippet below

import {
  CastledEvents,
  type CastledClickAction,
  type CastledPushNotification,
  type CastledPushNotificationClickEvent,
} from "castled-react-native-sdk"

// Push received listener
const pushReceivedListener = CastledNotifications.addListener(
  CastledEvents.PUSH_NOTIFICATION_RECEIVED,
  (notification: CastledPushNotification) => {
    console.log("Push notification received:", notification)
  }
)

// Click action listener
const pushClickedListener = CastledNotifications.addListener(
  CastledEvents.PUSH_NOTIFICATION_CLICKED,
  (event: CastledPushNotificationClickEvent) => {
    console.log(
      "Push notification clicked: notification object ",
      event.notification
    )
    console.log("Push notification clicked: clickAction", event.clickAction)
  }
)

// Push dismissed listener
const pushDismissedListener = CastledNotifications.addListener(
  CastledEvents.PUSH_NOTIFICATION_DISMISSED,
  (notification: CastledPushNotification) => {
    console.log("Push notification dismissed:", notification)
  }
)

// Unsubscribing the listeners
pushReceivedListener.remove()
pushClickedListener.remove()
pushDismissedListener.remove()

If the App is handling the push notification click actions itself, please disable the default url handling by the SDK by setting skipUrlHandling to true in the SDK configs during initialization.

Getting StartedInApp Messages