Skip to main content
Tutorial

Push Notifications in Expo: The Complete Guide I Wish Existed When I Started

5 min read

How to implement Expo push notifications in React Native apps for UAE businesses.

React NativeExpoPush NotificationsFirebaseMobile Development

At 2:17 AM, two days before Greeny Corner's UAE App Store launch, I realized the push notifications weren't working on iOS. The client wanted automated plant watering reminders in Arabic, and we were stuck with a silent app. I spent seven hours debugging Apple's push server logs (which look like hieroglyphs), only to discover a misconfigured entitlements file. That morning, I became a push notification survival guide for developers who want to avoid caffeine-induced meltdowns.

Why Expo for Push Notifications?

Expo handles most of the plumbing for React Native apps, but push notifications still require manual work. If you're building for Gulf businesses like a luxury limo service in Abu Dhabi (shoutout to Tawasul Limo), you'll need reliable notifications for booking updates and driver location tracking. Expo 54 SDK changed the notification landscape by deprecating Notifications library in favor of expo-notifications and expo-device. Save yourself the headache: install them now with:

bash
npx expo install expo-notifications expo-device

Setting Up Firebase Cloud Messaging

Your first real decision: Use Firebase or a custom backend. Firebase's free tier works for 90% of UAE startups. Log into Firebase Console, enable Cloud Messaging, and grab your Server Key. I recommend saving it in a .env file with version control (check out Testing Laravel APIs: My Actual Workflow for environment management tips). On Android, you'll hit a roadblock with Google Play Services. Run this in the terminal:

bash
npx expo run:android

Wait ten minutes for Gradle to compile. This is why developers drink.

Common Issues That Waste Hours

Here's what my logs looked like at 2 AM last summer:

json
{"error": "The Apple Push Notification service failed to return a device token."}

Apple's APNs require specific SSL certificates. Don't generate them through Keychain Access—it creates legacy certificates. Use Apple Developer portal's "Auth Key" section. I wasted 14 hours here because my UAE client wanted Arabic text in the notification body. The fix? Ensure your server sends Content-Type: application/json; charset=utf-8 headers. Yes, even for plain strings.

Another gotcha: Device tokens change. Always fetch them on every app launch. Use this pattern:

javascript
import * as Notifications from 'expo-notifications';

const registration = async () => {
  const token = (await Notifications.getExpoPushTokenAsync()).data;
  // Send token to your backend
}

Best Practices for Gulf Market Apps

Saudi clients expect Arabic translations in push alerts. Don't hardcode messages. Use a translation function that detects device language with expo-device. For DAS Holding's corporate portal, I integrated Firebase Dynamic Links to deep-link Arabic users to specific sections. Pro tip: Test notifications on physical devices. Android emulators lie about FCM support.

Battery optimization settings? Samsung's "Good Lock" app disables background services by default. There's nothing like getting a 3 AM call from a Dubai restaurateur because push alerts stopped working for their delivery drivers. Solution: Ask users to disable battery optimization in your app settings screen, then cry a little inside.

Frequently Asked Questions

How do I test push notifications in development?

Use https://expo.dev/notifications—it's the only place to send one-off test messages. For full test automation, build mock notification endpoints that return 200 status codes before hitting Firebase.

Why does my push token keep changing?

Tokens expire if you reinstall the app. For enterprise clients like a logistics company in Dubai that tracks vehicle maintenance, store tokens with a timestamp then compare them on each login.

How to handle Android background notifications?

Start with "priority": "high" in your FCM payload. For background handling, create a Notifications.setNotificationHandler with handleIntentInBackground: true. Note: Android 12+ restricts background processes harshly.

Can I send notifications from a Laravel backend?

Yes. Use kreait/laravel-firebase package with version ^4.0. Send raw Firebase request with proper to and notification keys. Check Testing Laravel APIs: My Actual Workflow for endpoint validation tricks.

If you’ve read this far, you’re probably the developer every Dubai SME needs for reliable mobile apps. I help Gulf businesses launch React Native apps that actually work—Greeny Corner's plant notification success rate now sits at 92% across iOS and Android. Want to discuss your project? Let’s book a free consultation or get in touch if you’re building for UAE audiences.

S

Sarah

Senior Full-Stack Developer & PMP-Certified Project Lead — Abu Dhabi, UAE

7+ years building web applications for UAE & GCC businesses. Specialising in Laravel, Next.js, and Arabic RTL development.

Work with Sarah