--- title: "React Native SDK: Push notifications" description: "Set up push notifications for customer messages with the Gleap React Native SDK. Follow the integration code examples." url: https://docs.gleap.ai/en/articles/505-react-native-sdk-push-notifications collection: "React Native" updated: 2026-11-01 language: en --- # React Native SDK: Push notifications Set up push notifications for customer messages with the Gleap React Native SDK. Follow the integration code examples. Stay connected with your customers by utilizing push notifications to alert them of new chat messages, release notes, and news articles. This will deepen engagement and foster stronger relationships. Gleap supports [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) to send push notifications to users. ## Setup Firebase Cloud Messaging To make use of Gleap Push Notifications you must add the Firebase Cloud Messaging service to your app or website. Learn how to get started with FCM [here](https://rnfirebase.io/messaging/usage). ## Getting your Firebase Cloud Messaging Token Open your project in Firebase and open the project settings. Click on "Cloud Messaging" and, if it is not already enabled, activate the Firebase Cloud Messaging API (V1). ![Firebase Cloud Messaging API v1 settings in the existing example project.](https://staticfiles.gleap.io/p613b5dd730aed737108f87ab/EXsrhvuamORx0xa4YtpmZJLx4XMOleKSVb6TBLALNylbZ14MDv1sYjLjJyqQKq2vtu3fAsIo4uf.png) Proceed to the "Service Accounts" section and generate a new private key, which will automatically create a file named like `serviceAccountKey.json`. ![Firebase service-account setup in the existing example project. No private key is displayed.](https://staticfiles.gleap.io/p613b5dd730aed737108f87ab/3L6WWg4TfpUDuiPLiyLesRpKNB76FF1eO4geLNXJnFQPDCnJqHFf0jyWRy7EArmsw8yjT2uITrs.png) In Gleap, open Settings → Developer → Push notifications and upload the Firebase service-account JSON file. Keep the file private; it authorizes push delivery for the Firebase project. ![Push notification service-account file upload. No credential is shown.](https://staticfiles.gleap.io/p613b5dd730aed737108f87ab/P0ExxlppVbgauOrnK6goEgpy9DwTz5Ov3oHyxwBLNQNVfiXkOmA5Fs7cHQPhzZnopvdi2bMl7dL.png) ## Subscribe to the Gleap user topic The last step to complete the push notification setup is to subscribe to the user topic, which Gleap will send the push notifications to. In order to do so, you will need to register the register & unregister push message topic callbacks. ```js // Find more information here: // https://rnfirebase.io/messaging/usage Gleap.registerListener("registerPushMessageGroup", (topic) => { messaging() .subscribeToTopic(topic) .then(() => console.log("Subscribed to topic!")); }); Gleap.registerListener("unregisterPushMessageGroup", (topic) => { messaging() .unsubscribeFromTopic(topic) .then(() => console.log("Unsubscribed from topic!")); }); ``` > **Info:** Register both listeners **before** calling `Gleap.initialize()`, so the initial topic registration isn't missed. Gleap manages the topic lifecycle for you: `identify()` / `clearIdentity()` automatically emit `unregisterPushMessageGroup` for the previous topic and `registerPushMessageGroup` for the new one — you don't need to unsubscribe manually on sign-out. ## Push notification payload Every push notification sent by Gleap carries a `data` payload with the following keys:

Key

Value

sender

Always GLEAP — use this to detect Gleap notifications.

type

conversation for chat messages. Other Gleap content uses news or checklist.

id

The reference to open — for conversation this is the conversation's share token.

Outbound push campaigns send `type` and `actionId` instead of `id`. The notification itself contains the sender's name in the title and a short plain-text preview (truncated to 70 characters) of the message as the body. ## Handle push-notification taps When the user taps a Gleap notification, check for `sender === 'GLEAP'` and open the referenced content. When the app is launched from a killed state, wait for Gleap's `initialized` event before routing — otherwise the SDK may not be ready to open the conversation yet: ```js import messaging from "@react-native-firebase/messaging"; import Gleap from "react-native-gleapsdk"; const routeGleapPushNotification = (remoteMessage) => { const data = remoteMessage?.data; if (data?.sender !== "GLEAP") { return; } if (data?.type === "conversation" && data?.id) { Gleap.openConversation(data.id); } else if (data?.type === "news" && data?.id) { Gleap.openNewsArticle(data.id, true); } else if (data?.type === "checklist" && data?.id) { Gleap.openChecklist(data.id, true); } }; let gleapInitialized = false; let pendingPushNotification = null; // Register BEFORE Gleap.initialize(). Gleap.registerListener("initialized", () => { gleapInitialized = true; if (pendingPushNotification) { routeGleapPushNotification(pendingPushNotification); pendingPushNotification = null; } }); const handleGleapPushNotification = (remoteMessage) => { if (gleapInitialized) { routeGleapPushNotification(remoteMessage); } else { pendingPushNotification = remoteMessage; } }; // App opened from background by tapping a notification. messaging().onNotificationOpenedApp((remoteMessage) => { if (remoteMessage) { handleGleapPushNotification(remoteMessage); } }); // App launched from a killed state by tapping a notification. messaging() .getInitialNotification() .then((remoteMessage) => { if (remoteMessage) { handleGleapPushNotification(remoteMessage); } }); ``` That's it - build and run your app 🚀 ## Notification images When a changelog or news article with a featured image is sent as a push notification, Gleap includes the image in the FCM payload. - **Android** displays the image automatically when the notification arrives while your app is in the background — no setup required. - **iOS** requires a Notification Service Extension in your app to display the image. Follow the native setup in the [iOS push notification guide](https://gleap-developer-docs.gleap.help/en/articles/441-ios-sdk-push-notifications#notification-images) — the extension is added to the iOS project in Xcode and works unchanged in a React Native app. ## Related - [React Native SDK setup](https://docs.gleap.ai/en/articles/499-react-native-sdk-setup.md) - [React Native SDK: User identity](https://docs.gleap.ai/en/articles/500-react-native-sdk-user-identity.md) - [React Native SDK: Track events](https://docs.gleap.ai/en/articles/501-react-native-sdk-track-events.md) - [React Native SDK: Track pages](https://docs.gleap.ai/en/articles/502-react-native-sdk-track-pages.md) - [React Native SDK: Frontend tools](https://docs.gleap.ai/en/articles/503-react-native-sdk-frontend-tools.md)