React Native Push Notifications (Android)

export const AppCredentials = {
  appId: 'YOUR_APP_ID',
  region: 'YOUR_REGION',
  authKey: 'YOUR_AUTH_KEY',

  // Android — the FCM provider ID from the CometChat dashboard
  fcmProviderId: 'FCM-PROVIDER-ID',

  // iOS — one APNs provider covers both the device token and the VoIP token
  apnsProviderId: 'APNS-PROVIDER-ID',
};

import { AppRegistry } from 'react-native';
import { registerBackgroundCallTask } from '@cometchat/push-notifications-react-native';
import App from './App';
import { name as appName } from './app.json';

// Android: lets a FULLY KILLED app reject a call declined from its notification. The package
// does the work — this only registers its background task. (No-op on iOS.)
registerBackgroundCallTask();

AppRegistry.registerComponent(appName, () => App);

import { createNavigationContainerRef } from '@react-navigation/native';

/** Pass this to your <NavigationContainer ref={navigationRef}>. */
export const navigationRef = createNavigationContainerRef();

/**
 * Resolves once the NavigationContainer is mounted. A notification tap or answered call
 * that LAUNCHED the app arrives before the navigator exists, and navigating then is
 * silently dropped. The ref queues listeners added before it mounts.
 */
export function whenNavigationReady(): Promise<void> {
  if (navigationRef.isReady()) return Promise.resolve();
  return new Promise(resolve => {
    const unsubscribe = navigationRef.addListener('ready', () => {
      unsubscribe();
      resolve();
    });
  });
}

/** Navigate by route name once the navigator is ready. */
export async function navigate(name: string, params?: object): Promise<void> {
  await whenNavigationReady();
  (navigationRef.navigate as (name: string, params?: object) => void)(name, params);
}

import { useEffect, useState } from 'react';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';
import { CometChatUIEventHandler, MessageEvents } from '@cometchat/chat-uikit-react-native';
import {
  CometChatPNHelper,
  CometChatPushNotifications,
  type PNCallEndEvent,
  type PNCallInfo,
  type PNNotificationTapInfo,
} from '@cometchat/push-notifications-react-native';

import { AppCredentials } from '../AppCredentials';
import { navigate, navigationRef } from '../navigation/navigationRef';

/** Your navigator's route names — these are the CometChat UI Kit sample app's. */
const SCREENS = {
  messages: 'Messages',
  thread: 'ThreadView',
  ongoingCall: 'OngoingCallScreen',
  home: 'BottomTabNavigator',
} as const;

const LOGIN_LISTENER_ID = 'push-notifications-login';

/**
 * Starts push for the logged-in user. Call it from React with `usePushOnLogin()` (below)
 * rather than directly: it returns a cleanup that must run on logout, or every handler
 * fires twice after the next login.
 */
export function setupPushOnLogin(): () => void {
  // Subscribe BEFORE init(): the tap or answered call that LAUNCHED the app is delivered
  // as soon as init() runs.
  const unsubscribes = [
    CometChatPushNotifications.onNotificationTap(openFromNotification),
    CometChatPushNotifications.onCallAccepted(openCallScreen),
    CometChatPushNotifications.onCallEnded(endCall),
  ];

  const start = async () => {
    // Await each permission request before the next — Android allows only one pending
    // request per activity. A rejection means the OS could not be asked (not that the user
    // declined), and must not stop init(): the push token still has to register.
    await CometChatPNHelper.requestNotificationPermission().catch(() => false);
    await CometChatPNHelper.requestCallPermissions(); // mic + camera, needed before a call connects

    await CometChatPushNotifications.init({
      fcmProviderId: AppCredentials.fcmProviderId, // Android
      apnsProviderId: AppCredentials.apnsProviderId, // iOS (APNs device + VoIP)
      notificationSmallIcon: 'ic_notification', // Android status-bar icon
      showInForeground: true, // one notification while the app is open, too
      ringInForeground: false, // the UI Kit shows its own incoming-call screen while open
    });
  };
  start().catch(error => console.log('Push setup failed:', error));

  return () => unsubscribes.forEach(unsubscribe => unsubscribe());
}

/**
 * Runs push while a user is logged in — after a fresh login AND after a session restored
 * on launch — and cleans up on logout. Use it once, in a component rendered after
 * CometChat has been initialized.
 */
export function usePushOnLogin(): void {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    // A restored session never fires loginSuccess, so check once on mount.
    CometChat.getLoggedinUser()
      .then(user => setLoggedIn(!!user))
      .catch(() => setLoggedIn(false));

    CometChat.addLoginListener(
      LOGIN_LISTENER_ID,
      new CometChat.LoginListener({
        loginSuccess: () => setLoggedIn(true),
        logoutSuccess: () => setLoggedIn(false),
      }),
    );
    return () => CometChat.removeLoginListener(LOGIN_LISTENER_ID);
  }, []);

  useEffect(() => {
    if (!loggedIn) return;
    return setupPushOnLogin();
  }, [loggedIn]);
}

/** Open the thread for a thread reply, otherwise the conversation. */
async function openFromNotification(info: PNNotificationTapInfo): Promise<void> {
  const isGroup = info.receiverType === 'group';
  try {
    const user = !isGroup && info.sender ? await CometChat.getUser(info.sender) : undefined;
    const group = isGroup && info.receiver ? await CometChat.getGroup(info.receiver) : undefined;
    if (!user && !group) return;

    markConversationRead(isGroup ? info.receiver! : info.sender!, isGroup);

    if (info.parentMessageId) {
      try {
        const parent = await CometChat.getMessageDetails(info.parentMessageId);
        // The thread screen needs the user or group, not just the parent message.
        await navigate(SCREENS.thread, { message: parent, user, group, highlightMessageId: info.messageId });
        return;
      } catch (error) {
        console.log('Could not open the thread, opening the conversation:', error);
      }
    }
    await navigate(SCREENS.messages, { user, group });
  } catch (error) {
    console.log('Could not open the conversation from a notification:', error);
  }
}

/** Mark the conversation read and clear its unread badge in the UI Kit's conversation list. */
function markConversationRead(conversationWith: string, isGroup: boolean): void {
  const type = isGroup ? CometChat.RECEIVER_TYPE.GROUP : CometChat.RECEIVER_TYPE.USER;
  CometChat.markConversationAsRead(conversationWith, type)
    .then(() => CometChat.getConversation(conversationWith, type))
    .then(conversation => {
      const lastMessage = conversation.getLastMessage();
      if (lastMessage) {
        CometChatUIEventHandler.emitMessageEvent(MessageEvents.ccMessageRead, { message: lastMessage });
      }
    })
    .catch(error => console.log('Could not mark the conversation read:', error));
}

/** The package has already accepted the call — just show the call screen. */
function openCallScreen(info: PNCallInfo): void {
  navigate(SCREENS.ongoingCall, { sessionId: info.sessionId, callType: info.callType });
}

/**
 * A ringing call was cancelled or declined, or the user ended the call from the iOS call
 * screen — which the Calls SDK does not see, so tear the call down here.
 */
function endCall(info: PNCallEndEvent): void {
  if (info.sessionId) CometChat.endCall(info.sessionId).catch(() => {});
  try {
    CometChatCalls.endSession();
  } catch {}
  try {
    CometChat.clearActiveCall();
  } catch {}
  if (navigationRef.isReady() && navigationRef.getCurrentRoute()?.name === SCREENS.ongoingCall) {
    navigate(SCREENS.home);
  }
}

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import { CometChatUIKit, UIKitSettings } from '@cometchat/chat-uikit-react-native';

import { AppCredentials } from './AppCredentials';
import { navigationRef } from './navigation/navigationRef';
import { usePushOnLogin } from './push/pushNotifications';

export default function App() {
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    // Your existing CometChat initialization.
    CometChatUIKit.init({
      appId: AppCredentials.appId,
      region: AppCredentials.region,
      authKey: AppCredentials.authKey,
      subscriptionType: CometChat.AppSettings.SUBSCRIPTION_TYPE_ALL_USERS as UIKitSettings['subscriptionType'],
    } as UIKitSettings)
      .then(() => setInitialized(true))
      .catch(error => console.log('CometChat init failed:', error));
  }, []);

  // Push must start only after CometChat is initialized.
  if (!initialized) return null;
  return <Root />;
}

function Root() {
  usePushOnLogin(); // push follows login and logout from here on

  return (
    <NavigationContainer ref={navigationRef}>
      <RootStack /> {/* your existing navigator */}
    </NavigationContainer>
  );
}

buildscript {
  dependencies {
    classpath("com.google.gms:google-services:4.4.2")
  }
}

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

<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" tools:node="remove" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_PHONE_CALL" tools:node="remove" />
<uses-permission android:name="android.permission.MANAGE_OWN_CALLS" tools:node="remove" />
<uses-permission android:name="android.permission.RECORD_AUDIO" tools:node="remove" />
<uses-permission android:name="android.permission.CAMERA" tools:node="remove" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" tools:node="remove" />

<application>
  <service android:name="com.cometchat.pushnotification.reactnative.IncomingCallService" tools:node="remove" />
  <activity android:name="com.cometchat.pushnotification.reactnative.CallRingingActivity" tools:node="remove" />
</application>

<application>
  <service android:name="com.cometchat.pushnotification.reactnative.CometChatFcmService" tools:node="remove" />
  <service android:name="io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService" tools:node="remove" />
  <service android:name=".AppMessagingService" android:exported="false">
    <intent-filter>
      <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
  </service>
</application>

dependencies {
  implementation platform("com.google.firebase:firebase-bom:33.16.0")
  implementation "com.google.firebase:firebase-messaging"
}

package com.yourapp // your app's package

import com.cometchat.pushnotification.reactnative.CometChatFcmService
import com.google.firebase.messaging.RemoteMessage
import io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService

class AppMessagingService : ReactNativeFirebaseMessagingService() {
  override fun onMessageReceived(message: RemoteMessage) {
    // CometChat's pushes are shown by this package; anything else goes on.
    if (!CometChatFcmService.handleMessage(this, message)) super.onMessageReceived(message)
  }

  override fun onNewToken(token: String) {
    CometChatFcmService.handleNewToken(this, token)
    super.onNewToken(token)
  }
}

import { CometChatUIKit } from '@cometchat/chat-uikit-react-native';
import { CometChatPushNotifications } from '@cometchat/push-notifications-react-native';

/** Log out and stop this device receiving the user's notifications. Resolves false on failure. */
export async function logout(): Promise<boolean> {
  // Unregister BEFORE logout: it needs the session's auth token, so after logout it fails
  // and the device keeps receiving notifications for the user who just logged out.
  try {
    await CometChatPushNotifications.unregister();
  } catch (error) {
    console.log('Failed to unregister the push token:', error);
    return false;
  }
  try {
    await CometChatUIKit.logout();
    return true;
  } catch (error) {
    console.log('Logout failed:', error);
    return false;
  }
}