Skip to main content

Solving Expo Notification Issues on Preview Build: The Project ID Fix

When building mobile applications, notifications are a crucial feature, helping to keep users engaged and updated. If you’re using Expo and a NestJS backend to handle push notifications, you might have noticed a strange quirk: notifications work perfectly fine in development but mysteriously fail in preview builds.

That was exactly the issue I faced while working on my app. Everything was going smoothly during development, but once I moved to preview builds, the push notifications simply wouldn’t come through. After spending hours troubleshooting, I finally figured out the problem — the Project ID.

This article will walk you through the issue and provide the solution I found, saving you hours of head-scratching.

The Problem: Notifications Work in Development, But Not in Preview

While setting up push notifications using Expo, I used the following code to retrieve the Expo push token:

expoPushToken = (await Notifications.getExpoPushTokenAsync()).data;

This code worked perfectly in development. I was getting Expo push tokens and receiving notifications as expected. However, when I created a preview build, notifications stopped working altogether.

Why It Worked in Development but Not in Preview

When you run an Expo app in development, the Project ID is automatically set, allowing everything to function smoothly, including retrieving push tokens.

But here’s the catch: in preview builds (or non-development environments), the Project ID isn’t set automatically. When it’s missing, the app doesn’t know which Expo project it belongs to, and as a result, the Expo push token can’t be retrieved properly.

This was the root cause of my issue. The Project ID was missing when I ran the app in preview mode.

The Solution: Manually Set the Project ID

To fix this issue, you need to explicitly provide the Project ID when retrieving the Expo push token. Here’s the code that worked for me:

token = await Notifications.getExpoPushTokenAsync({
  projectId: Constants.expoConfig.extra.eas.projectId,
});

This ensures that even in a preview build, the app knows which project it belongs to by using the projectId stored in your Expo configuration.

The Final Code: Error Handling and Push Token Retrieval

Incorporating error handling and fallback options, here’s the final code I used to ensure that notifications work both in development and in preview builds:

try {
  const projectId =
    Constants?.expoConfig?.extra?.eas?.projectId ?? Constants?.easConfig?.projectId;

  if (!projectId) {
    throw new Error('Project ID not found');
  }
  expoPushToken = (await Notifications.getExpoPushTokenAsync({ projectId })).data;
} catch (error) {
  console.error('Error retrieving Expo push token:', error);
}

How It Works:

  1. Project ID Retrieval: We first try to retrieve the Project ID from Constants.expoConfig.extra.eas.projectId. If it’s not found, we check Constants.easConfig.projectId.
  2. Error Handling: If no Project ID is found, an error is thrown to ensure we catch it early.
  3. Get Expo Push Token: Finally, we pass the Project ID into Notifications.getExpoPushTokenAsync to retrieve the token.

This solution ensures that the Project ID is always provided, regardless of whether you’re in development or preview mode.

Why This Works

  • Development Build: The Project ID is automatically set when using development builds, so you don’t need to worry about this in local development.
  • Preview/Production Builds: In preview and production builds, the Project ID isn’t automatically included, which is why you need to manually fetch it from your Expo configuration.

By manually specifying the Project ID, you’re telling the Expo Notifications service which project the push token belongs to, ensuring notifications work in all environments.

Conclusion

If you’re working with Expo notifications and find that everything works perfectly in development but fails in preview builds, the missing Project ID could be the culprit. By explicitly passing the Project ID when retrieving the push token, you can ensure that push notifications work across all environments.

Notifications are an essential part of many mobile apps, and ensuring they work in both development and preview builds is critical. Hopefully, this solution saves you the time and frustration I experienced!

This should help you set up Expo notifications properly for both development and production environments. Feel free to share this article with fellow developers who might be facing the same issue!

Happy coding!

Labels:

Popular posts from this blog

Xcode and iOS Version Mismatch: Troubleshooting "Incompatible Build Number" Errors

Have you ever encountered a frustrating error while trying to run your iOS app in Xcode, leaving you scratching your head? A common issue arises when your device's iOS version is too new for the Xcode version you're using. This often manifests as an "incompatible build number" error, and looks like this: DVTDeviceOperation: Encountered a build number "" that is incompatible with DVTBuildVersion. This usually happens when you are testing with beta versions of either iOS or Xcode, and can prevent Xcode from properly compiling your storyboards. Let's explore why this occurs and what you can do to resolve it. Why This Error Occurs The core problem lies in the mismatch between the iOS version on your test device and the Software Development Kit (SDK) supported by your Xcode installation. Xcode uses the SDK to understand how to build and run apps for specific iOS versions. When your device runs a newer iOS version than Xcode anticipates, Xcode mi...
Read more

How to Fix the “Invariant Violation: TurboModuleRegistry.getEnforcing(…): ‘RNCWebView’ Could Not Be Found” Error in React Native

When working with React Native, especially when integrating additional libraries like react-native-signature-canvas , encountering errors can be frustrating. One such error is: Invariant Violation: TurboModuleRegistry. getEnforcing (...): 'RNCWebView' could not be found This error often occurs when the necessary dependencies for a module are not properly linked or when the environment you’re using doesn’t support the required native modules. Here’s a breakdown of how I encountered and resolved this issue. The Problem I was working on a React Native project where I needed to add the react-native-signature-canvas library to capture user signatures. The installation process seemed straightforward: Installed the package: npm install react-native-signature- canvas 2. Since react-native-signature-canvas depends on react-native-webview , I also installed the WebView package: npm install react- native -webview 3. I navigated to the iOS directory and ran: cd ios pod install Everythi...
Read more

Fixing FirebaseMessagingError: Requested entity was not found.

If you’re working with Firebase Cloud Messaging (FCM) and encounter the error: FirebaseMessagingError: Requested entity was not found. with the error code: messaging/registration-token-not-registered this means that the FCM registration token is invalid, expired, or unregistered . This issue can prevent push notifications from being delivered to users. ๐Ÿ” Possible Causes & Solutions 1️⃣ Invalid or Expired FCM Token FCM tokens are not permanent and may expire over time. If you’re storing tokens in your database, some might be outdated. ✅ Solution: Remove invalid tokens from your database when sending push notifications. Refresh and store the latest FCM token when the app starts. Example: Automatically Refresh Token firebase. messaging (). onTokenRefresh ( ( newToken ) => { // Send newToken to your backend and update the stored token }); 2️⃣ Token Unregistered on Client Device A token might become unregistered if: The app is uninstalled on the user’s device. ...
Read more