How to Enable Push Notifications in an App: A Complete Guide

Set Up Firebase Cloud Messaging (FCM)

Firebase Cloud Messaging (FCM) allows you to send notifications to users. To set it up:

1. In the Firebase Console, go to Cloud Messaging.
2. Get your Server Key and Sender ID from the Firebase Console. You will need the Server Key to send notifications from the backend and the Sender ID to send them from the frontend.
3. Install the Firebase SDK for messaging:

            npm install firebase
        

4. In your React Native app, configure Firebase Cloud Messaging:

your-project/

│

├── app/

│   ├── _layout.tsx              ← initialize notifications

│   └── (tabs)/

│       └── index.tsx

│

├── components/

│   ├── firebase.tsx             ← Firebase Auth/config

│   └── notifications.ts         ← push notification code

│

├── assets/

│   └── notification-icon.png

│

├── app.json                     ← Expo notification configuration

│

└── package.json

React Native Example: Firebase Cloud Messaging (notifications.tsx)

        import * as Notifications from "expo-notifications";

import * as Device from "expo-device";

import Constants from "expo-constants";

import { Platform } from "react-native";



Notifications.setNotificationHandler({

  handleNotification: async () => ({

    shouldShowBanner: true,

    shouldShowList: true,

    shouldPlaySound: true,

    shouldSetBadge: false,

  }),

});



export async function registerForPushNotificationsAsync() {

  if (!Device.isDevice) {

    console.log("Push notifications require a physical device.");

    return null;

  }



  // Android notification channel

  if (Platform.OS === "android") {

    await Notifications.setNotificationChannelAsync("default", {

      name: "default",

      importance: Notifications.AndroidImportance.MAX,

      vibrationPattern: [0, 250, 250, 250],

      sound: "default",

    });

  }



  // Request permission

  const { status: existingStatus } =

    await Notifications.getPermissionsAsync();



  let finalStatus = existingStatus;



  if (existingStatus !== "granted") {

    const { status } =

      await Notifications.requestPermissionsAsync();



    finalStatus = status;

  }



  if (finalStatus !== "granted") {

    console.log("Notification permission was not granted.");

    return null;

  }



  // Get Expo push token

  const projectId =

    Constants.expoConfig?.extra?.eas?.projectId ??

    Constants.easConfig?.projectId;



  if (!projectId) {

    console.log("EAS project ID not found.");

    return null;

  }



  const token = (

    await Notifications.getExpoPushTokenAsync({

      projectId,

    })

  ).data;



  console.log("Expo Push Token:", token);



  return token;

}


    

Backend Integration (Optional)

If you need to send notifications from the backend (e.g., to notify users when an order status changes), you can use Firebase Admin SDK to send push notifications:

Example: Send Notification from Backend (FastAPI Endpoint)

        @app.put("/orders/{order_id}/status")
async def update_order_status(
    order_id: int,
    status: str,
):
    # update database
    ...
You can do:

from notifications import send_push_notification


@app.put("/orders/{order_id}/status")
async def update_order_status(
    order_id: int,
    status: str,
):
    # 1. Find order
    order = get_order(order_id)

    if not order:
        return {"error": "Order not found"}

    # 2. Update status
    order.status = status

    # 3. Save to database
    save_order(order)

    # 4. Get customer's push token
    user = get_user(order.user_id)

    if user.expo_push_token:

        await send_push_notification(
            token=user.expo_push_token,
            title="Order Update",
            body=f"Your order #{order_id} is now {status}.",
            data={
                "type": "ORDER_STATUS",
                "orderId": str(order_id),
                "status": status,
            },
        )

    return {
        "success": True,
        "order_id": order_id,
        "status": status,
    }
    

              YOUR APP

                 │

                 │ token

                 ▼

             YOUR API

                 │

                 ▼

              DATABASE

                 │

                 │

        Order status changes

                 │

                 ▼

              BACKEND

                 │

                 ▼

       Expo Push Notification

            │          │

            ▼          ▼

           FCM        APNs

            │          │

            ▼          ▼

         Android      iPhone

Conclusion

Firebase offers a variety of powerful services for integrating user authentication, push notifications, real-time databases, and more into your app. By following these steps, you can set up Firebase Authentication to handle user login and Firebase Cloud Messaging (FCM) for push notifications in your React Native app.

inside layout.tsx

import { useEffect } from "react";

import { registerForPushNotificationsAsync } from "../components/notifications";

inside component layout.tsx

useEffect(() => {

  registerForPushNotificationsAsync().then((token) => {

    if (token) {

      console.log("User push token:", token);

      // TODO:

      // Send this token to your backend

    }

  });

}, []);

in app.json

{

  "expo": {

    "name": "Your App",

    "slug": "your-app",

    "plugins": [

      "expo-router",

      [

        "expo-notifications",

        {

          "icon": "./assets/notification-icon.png",

          "color": "#ffffff"

        }

      ]

    ]

  }

}