Troubleshooting Common Issues of React Native Firebase- Cloud Messaging

Source: npm @react-native-firebase/app

Are you facing issues while implementing React Native Firebase Cloud Messaging?

Getting notifications up and running smoothly on both Android and iOS can sometimes be challenging, given the unique configurations each platform demands.
This guide will walk you through the important steps to set up Firebase Cloud Messaging (FCM) in React Native and tackle some common errors:

Configuring Firebase:

Download GoogleService-Info.plist (iOS) and google-services.json (Android).

Select the downloaded GoogleService-Info.plist file from your computer, and ensure the "Copy items if needed" checkbox is enabled

Download the google-services.json file and place it inside of your project at the following location:
/android/app/google-services.json.

Enable Push Notifications for iOS in Xcode:

The Push Notifications capability needs to be added to the project. This can be done via the "Capability" option under the "Signing & Capabilities" tab:
Click on the "+ Capabilities" button.
Search for "Push Notifications".

Once selected, the capability will be shown below the other enabled capabilities. If no option appears when searching, the capability may already be enabled

The Background Modes capability needs to be enabled, along with both the Background fetch and Remote notifications sub-modes. This can be added via the "Capability" option on the "Signing & Capabilities" tab.

Now, ensure that both the "Background fetch" and the "Remote notifications" sub-modes are enabled

Setup Guide for React Native FCM:

Follow the official Firebase Cloud Messaging setup guide. This guide includes essential steps to get started with sending and receiving notifications on Android and iOS. Once you’ve completed these steps, you can test notifications directly from the Firebase Console under Messaging by composing a new campaign.

Note:
For M1 Mac users, issues with CocoaPods are common when setting up React Native Firebase. Here are some quick solutions:

1. Use arch -x86_64 - M1 Macs may encounter compatibility issues with CocoaPods. Run commands with arch -x86_64 to use the x86_64 architecture:

arch -x86_64 pod install

1. Update CocoaPods Repository- If you face errors related to outdated pod versions, update your CocoaPods repo:

arch -x86_64 pod repo update

1. Fix ffi Error- You might encounter an ffi library error. To fix it, install the ffi gem specifically for your architecture:

sudo arch -x86_64 gem install ffi

1. Re-Install Pods - After these steps, re-run the pod installation command:

arch -x86_64 pod install

Following these steps should help resolve architecture-specific issues on M1 Macs when installing and managing pods for your React Native project.

Note:
For Android 13+ devices, you need to request runtime permissions for push notifications explicitly. Add the following permissions to your AndroidManifest.xml:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

Then, in your code, request notification permissions at runtime. You can handle Android permissions directly like this:

import { Platform, PermissionsAndroid } from 'react-native';

async function requestNotificationPermission() {
// Version >= 33(`~project/build.gradle`)
  if (Platform.OS === 'android' ) {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
    );

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Notification permission granted');
    } else {
      console.log('Notification permission denied');
    }
  }
}

Call requestNotificationPermission() during app initialization or before subscribing to notifications to ensure the user has granted permission.

Ensuring Compatibility:

Before diving into the setup, make sure that both @react-native-firebase/app and @react-native-firebase/messaging packages are installed in your project and are compatible.
Consistent versions are crucial to avoiding unexpected integration issues. To verify version compatibility, refer to the official React Native Firebase Release Documentation.
Make sure you have the latest versions of both packages installed to avoid compatibility issues.

If you’re testing on an iOS device, note the following:

• Physical iOS devices are generally required to receive push notifications.
• If you're on macOS 13+ with Apple Silicon, you can also use an iOS Simulator running iOS 16+ for testing.

Troubleshooting Tips:

After completing the setup, you may still run into issues. Here are some common problems and solutions:

Simulator Not Receiving Notifications:

If notifications aren’t appearing in the iOS simulator, try the following:

• Restart or reset the simulator by erasing all content and settings.
• Retry after resetting, as sometimes a simulator restart can fix the issue.

After troubleshooting this myself for a couple of hours, I found that a quick restart was the simplest solution!

Check Steps and Common Issues:
Double-check the setup steps in the Firebase guide to ensure everything is configured correctly.

Error Installing CocoaPods:
If you encounter installation errors, such as:

   error: RPC failed; curl stream was reset

   error: 6428 bytes of body are still expected

   

This could be due to network issues. Try switching from Wi-Fi to a mobile hotspot (or vice versa) and retry the installation. Sometimes, changing your network can solve connection-related pod installation issues. If this doesn’t resolve the problem, you may need to try additional troubleshooting tips, such as clearing the CocoaPods cache or updating Xcode.

Allowing HTTP URLs in iOS (App Transport Security):
If you’re using an HTTP URL for API requests (as opposed to HTTPS), you’ll need to update your iOS Info.plist file to avoid blocked connections due to App Transport Security (ATS) restrictions. Add the following lines in your Info.plist file:

   <key>NSAppTransportSecurity</key>

   <dict>

     <key>NSAllowsArbitraryLoads</key>

     <true/>

     <key>NSExceptionDomains</key>

     <dict>

       <key>localhost</key>

       <dict>

         <key>NSExceptionAllowsInsecureHTTPLoads</key>

         <true/>

       </dict>

     </dict>

   </dict>

This will allow your app to make HTTP requests without interference. Be cautious with this setting in production apps and try to limit it to development environments where possible.

Ensure App Transport Security (ATS) Compatibility:
For iOS, ensure that any HTTPS endpoints you’re using are ATS-compliant. If you’re testing with staging servers or self-signed certificates, make sure they are ATS-compatible, as Firebase requires a secure connection to communicate with APNs (Apple Push Notification Service).

Conclusion:
Setting up Firebase Cloud Messaging in React Native can be straightforward, but minor setup mistakes or device configuration quirks can lead to issues. Following this guide and troubleshooting tips should help you get notifications running smoothly. For any additional issues, you can check out the official documentation, forums, or GitHub discussions to find solutions shared by other developers.

Happy coding !!!!