Getting started: Push Notifications in React Native

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    ...
</manifest>

import React, {useRef, useState} from 'react';
import {
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import * as Ably from 'ably';
import {AblyProvider, ChannelProvider, useAbly, useChannel} from 'ably/react';
import messaging from '@react-native-firebase/messaging';
import notifee, {AuthorizationStatus} from '@notifee/react-native';

const CHANNEL_NAME = 'my-first-push-channel';

// Use token authentication in production
const client = new Ably.Realtime({
  key: 'demokey:*****',
  clientId: 'push-tutorial-client',
});

function PushScreen() {
  const [status, setStatus] = useState('Ready to start');
  const [log, setLog] = useState<string[]>([]);

  function addLog(message: string) {
    setLog(prev => [...prev, message]);
  }

  function showStatus(message: string) {
    setStatus(message);
    console.log(message);
  }

  useChannel(CHANNEL_NAME, message => {
    addLog(`Received: ${message.name} - ${JSON.stringify(message.data)}`);
  });

  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <Text style={styles.title}>Ably Push Tutorial</Text>
        <View style={styles.statusBox}>
          <Text style={styles.statusText}>{status}</Text>
        </View>
        <ScrollView style={styles.logBox}>
          {log.map((entry, i) => (
            <Text key={i} style={styles.logEntry}>{entry}</Text>
          ))}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <AblyProvider client={client}>
      <ChannelProvider channelName={CHANNEL_NAME}>
        <PushScreen />
      </ChannelProvider>
    </AblyProvider>
  );
}

const styles = StyleSheet.create({
  safeArea: {flex: 1, backgroundColor: '#fff'},
  container: {flex: 1, padding: 16},
  title: {fontSize: 22, fontWeight: 'bold', textAlign: 'center', marginBottom: 12},
  statusBox: {backgroundColor: '#f0f0f0', padding: 12, borderRadius: 6, marginBottom: 12},
  statusText: {fontSize: 14},
  logBox: {flex: 1, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 6, padding: 8},
  logEntry: {fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace', fontSize: 12, marginBottom: 4},
});

// Inside PushScreen:
const client = useAbly();

// Randomly generated on each app start for simplicity — in production, persist this (e.g. using AsyncStorage) to reuse the same device registration across restarts
const [deviceId] = useState(
  `push-tutorial-${Platform.OS}-${Math.random().toString(36).slice(2, 9)}`,
);
const tokenRefreshUnsubscribeRef = useRef<(() => void) | null>(null); // To store the FCM token refresh listener unsubscribe function

async function requestPermission(): Promise<boolean> {
  if (Platform.OS === 'android') {
    // Use notifee for consistent POST_NOTIFICATIONS permission behavior across Android API levels
    const settings = await notifee.requestPermission();
    return settings.authorizationStatus >= AuthorizationStatus.AUTHORIZED;
  }
  // On iOS, request permission using Firebase Messaging which will trigger the native iOS permission dialog
  const authStatus = await messaging().requestPermission();
  return (
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL
  );
}

// Save the device registration with Ably using the FCM token
async function saveDeviceRegistration(token: string) {
  await client.push.admin.deviceRegistrations.save({
    id: deviceId,
    clientId: 'push-tutorial-client',
    platform: Platform.OS === 'ios' ? 'ios' : 'android',
    formFactor: 'phone',
    push: {
      recipient: {
        transportType: 'fcm', // FCM on both platforms — messaging().getToken() returns an FCM token even on iOS
        registrationToken: token,
      },
    },
  });
}

async function activatePush() {
  try {
    showStatus('Activating push notifications...');
    const granted = await requestPermission();
    if (!granted) {
      showStatus('Notification permission denied.');
      return;
    }

    await messaging().registerDeviceForRemoteMessages(); // Required to receive push notifications on iOS, no-op on Android
    const fcmToken = await messaging().getToken();
    await saveDeviceRegistration(fcmToken);

    tokenRefreshUnsubscribeRef.current?.();
    tokenRefreshUnsubscribeRef.current = messaging().onTokenRefresh(async newToken => {
      try {
        await saveDeviceRegistration(newToken);
      } catch (error) {
        console.error('Failed to update FCM token:', (error as Ably.ErrorInfo).message);
      }
    });

    showStatus(`Push activated. Device ID: ${deviceId}`);
    addLog(`Push activated. Device ID: ${deviceId}`);
  } catch (error) {
    showStatus(`Failed to activate push: ${(error as Ably.ErrorInfo).message}`);
  }
}

async function deactivatePush() {
  try {
    showStatus('Deactivating push notifications...');
    await client.push.admin.deviceRegistrations.remove(deviceId);
    tokenRefreshUnsubscribeRef.current?.();
    tokenRefreshUnsubscribeRef.current = null;
    showStatus('Push notifications deactivated.');
  } catch (error) {
    showStatus(`Failed to deactivate push: ${(error as Ably.ErrorInfo).message}`);
  }
}

useEffect(() => {
  // Create a default Android notification channel
  if (Platform.OS === 'android') {
    notifee.createChannel({id: 'default', name: 'Default Channel'});
  }

  // Handle foreground push messages
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    const title = remoteMessage.notification?.title ?? 'Push Notification';
    const body = remoteMessage.notification?.body ?? '';
    addLog(`Push received: ${title} — ${body}`);
    await notifee.displayNotification({
      title,
      body,
      android: {channelId: 'default'},
    });
  });

  return () => {
    unsubscribe();
  };
}, []);

async function subscribeToChannel() {
  try {
    await client.push.admin.channelSubscriptions.save({
      deviceId,
      channel: CHANNEL_NAME,
    });
    showStatus(`Subscribed to push on channel: ${CHANNEL_NAME}`);
  } catch (error) {
    showStatus(`Failed to subscribe: ${(error as Ably.ErrorInfo).message}`);
  }
}

async function unsubscribeFromChannel() {
  try {
    await client.push.admin.channelSubscriptions.remove({
      deviceId,
      channel: CHANNEL_NAME,
    });
    showStatus(`Unsubscribed from push on channel: ${CHANNEL_NAME}`);
  } catch (error) {
    showStatus(`Failed to unsubscribe: ${(error as Ably.ErrorInfo).message}`);
  }
}

return (
  <SafeAreaView style={styles.safeArea}>
    <View style={styles.container}>
      <Text style={styles.title}>Ably Push Tutorial</Text>
      <View style={styles.statusBox}>
        <Text style={styles.statusText}>{status}</Text>
      </View>
      <View style={styles.buttons}>
        <TouchableOpacity style={[styles.btn, styles.btnGreen]} onPress={activatePush}>
          <Text style={styles.btnText}>Activate Push</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.btn, styles.btnRed]} onPress={deactivatePush}>
          <Text style={styles.btnText}>Deactivate Push</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.btn, styles.btnPurple]} onPress={subscribeToChannel}>
          <Text style={styles.btnText}>Subscribe to Channel</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.btn, styles.btnOrange]} onPress={unsubscribeFromChannel}>
          <Text style={styles.btnText}>Unsubscribe from Channel</Text>
        </TouchableOpacity>
      </View>
      <ScrollView style={styles.logBox}>
        {log.map((entry, i) => (
          <Text key={i} style={styles.logEntry}>{entry}</Text>
        ))}
      </ScrollView>
      <TouchableOpacity style={[styles.btn, styles.btnGray]} onPress={() => setLog([])}>
        <Text style={styles.btnText}>Clear Log</Text>
      </TouchableOpacity>
    </View>
  </SafeAreaView>
);

buttons: {gap: 8, marginBottom: 12},
btn: {padding: 14, borderRadius: 6, alignItems: 'center'},
btnText: {color: '#fff', fontWeight: '600'},
btnGreen: {backgroundColor: '#28a745'},
btnRed: {backgroundColor: '#dc3545'},
btnPurple: {backgroundColor: '#6f42c1'},
btnOrange: {backgroundColor: '#fd7e14'},
btnGray: {backgroundColor: '#6c757d', marginTop: 8},