I'm updated my react native version to 0.73.4 and getInitialNotification() and onNotificationOpenedApp() does not work in iOS

[DeepakSharma04]

I have updated my React Native version to 0.73.4. In Android, notifications are working fine in the foreground, background, and quiet states. In iOS, foreground notifications are working, and when the user clicks on them, they navigate to the respective screen.

However, in the background and quiet states, notifications are coming through, but when the user clicks on them, neither getInitialNotification() nor onNotificationOpenedApp() is called, and no remoteMessage is received.

package.json

 "react": "18.2.0",
 "react-native": "0.73.4",
 "@notifee/react-native": "^7.8.2",
 "@react-native-firebase/app": "^19.1.1",
 "@react-native-firebase/messaging": "^19.1.1",

Notification payload {"category": "OPEN_ACTIVITY_1", "contentAvailable": true, "data": {"action_link": "https://mobile.productdemourl.com/deepak/public/panel/user/147", "created_at": "2024-03-30T07:29:18.000000Z", "id": "487", "is_read": "0", "mobile_scenario_id": "147", "module": "users", "notify_message": "A new user has been registered", "requester": "{\"full_name\":\"deepak sharma\",\"email_verified\":false,\"mobile_verified\":false,\"meta_name\":\"deepak sharma <[email protected]>\",\"user_name\":\"deepakadmin\",\"profile_pic\":\"https:\\/\\/mobile.productdemourl.com\\/deepak\\/public\\/v3\\/api\\/view-attachment-kb?api_key=PsQhM8ZdwvjdZ7UVmp8Ht41vxGcANvxu&expires=8022798038&hash=eyJpdiI6Im5JTmJZcC8vN1dOMHgzc2FrbklMTFE9PSIsInZhbHVlIjoiUk1CK3huRm11TEFoRTZjd1RpbG5hNjRWYWF2VlFzRHJ2ay9XNVZLMmZLMG9WUUxhVEtXdTIwUXdIMVNrS1lSVHc2THYvLzNFZERhdmdiZTkwbjRheTJKRjh0UGlRcjhYb1RsY0JIb1hvaXpmWGk4RlcycERJNi9Da1VxNzZnckwiLCJtYWMiOiIxNzBiZTA2OWU1MmYzMjJlMjRhMDQ1ZmMwMDg0ZmE1NDc0NjEzOWM4ODBiMTc4NjEzMGM5NTg4YjA0YjY5NmQ5IiwidGFnIjoiIn0%3D&no-auth=0&signature=27a4c7caf65c2768f6709a766c28b0cfb8725afbdcabfc8af06587373d3d99fd\",\"last_name\":\"sharma\",\"id\":1,\"first_name\":\"deepak\",\"email\":\"[email protected]\"}", "updated_at": "2024-03-30T07:29:18.000000Z", "user_id": "1"}, "from": "505298756081", "messageId": "1711783763956277", "notification": {"body": "A new user has been registered", "sound": "default", "title": "deepak sharma"}}

js file

  React.useEffect(() => {
        // Notification caused app to open from quit state   // check if notification has been opened before
        messaging()
            .getInitialNotification()
            .then(async remoteMessage => {
                const PreviousNotification = await AsyncStorage.getItem('PreviousNotification');
                if (remoteMessage != null && remoteMessage.data != null && remoteMessage.data.id != null && remoteMessage.data.mobile_scenario_id != null && remoteMessage.data.module != null) {
                    if (remoteMessage.data.id !== PreviousNotification) {
                        const Scenario = remoteMessage.data.module;
                        const ScenarioId = remoteMessage.data.mobile_scenario_id;
                        const NotificationId = remoteMessage.data.id;
                        await AsyncStorage.setItem("ScenarioKey", Scenario);
                        await AsyncStorage.setItem("ScenarioIdKey", ScenarioId);
                        await AsyncStorage.setItem("NotificationIdKey", NotificationId);
                    }
                }
            });
    }, []);

  React.useEffect(() => {
      async function handlingBackgroundPushNotifications() {
           messaging().onNotificationOpenedApp(async remoteMessage => {
               if (remoteMessage.data != null && remoteMessage.data.id != null && remoteMessage.data.mobile_scenario_id != null && remoteMessage.data.module != null) {
                   const Scenario = remoteMessage.data.module;
                   const ScenarioId = remoteMessage.data.mobile_scenario_id;
                   const NotificationId = remoteMessage.data.id;
                   onNotificationsClick(Scenario, ScenarioId, NotificationId);
               }
           });
       }
   
       handlingBackgroundPushNotifications();
   }, []);

Pod file

# # Resolve react_native_pods.rb with node to allow for hoisting
# require Pod::Executable.execute_command('node', ['-p',
#   'require.resolve(
#     "react-native/scripts/react_native_pods.rb",
#     {paths: [process.argv[1]]},
#   )', __dir__]).strip


def node_require(script)
  # Resolve script with node to allow for hoisting
  require Pod::Executable.execute_command('node', ['-p',
   "require.resolve(
     '#{script}',
      {paths: [process.argv[1]]},
   )", __dir__]).strip
end

node_require('react-native/scripts/react_native_pods.rb')
node_require('react-native-permissions/scripts/setup.rb')

platform :ios, min_ios_version_supported
prepare_react_native_project!

setup_permissions([
  'AppTrackingTransparency',
  'Bluetooth',
  'Calendars',
  'CalendarsWriteOnly',
  'Camera',
  'Contacts',
  'FaceID',
  'LocationAccuracy',
  'LocationAlways',
  'LocationWhenInUse',
  'MediaLibrary',
  'Microphone',
  'Motion',
  'Notifications',
  'PhotoLibrary',
  'PhotoLibraryAddOnly',
  'Reminders',
  'Siri',
  'SpeechRecognition',
  'StoreKit',
])

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'faveoHelpdeskReactNative' do
  config = use_native_modules!

  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true

  use_react_native!(
    :path => config[:reactNativePath],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'faveoHelpdeskReactNativeTests' do
    inherit! :complete
    # Pods for testing
  end

 # # Enables Flipper.
  # #
  # # Note that if you have use_frameworks! enabled, Flipper will not work and
  # # you should disable the next line.
  # use_flipper!()

  # post_install do |installer|
  #   react_native_post_install(installer)
  #   __apply_Xcode_12_5_M1_post_install_workaround(installer)
  # end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
    
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
  end
end

AppDelegate.mm

#import "AppDelegate.h"
#import <Firebase.h>
#import <React/RCTBundleURLProvider.h>
#import <Bugsnag/Bugsnag.h>


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
   self.moduleName = @"faveoHelpdeskReactNative";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  [Bugsnag start];
  [FIRApp configure];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self getBundleURL];
}
 
- (NSURL *)getBundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

[Mohamed-Ziyad]

@DeepakSharma04 did you configure Apple notification certificate in your firebase?

https://rnfirebase.io/messaging/usage/ios-setup

[DeepakSharma04]

@DeepakSharma04 did you configure Apple notification certificate in your firebase?

https://rnfirebase.io/messaging/usage/ios-setup

I configured the Apple notification certificate in my firebase and i receive the notifications on foreground ,background and kill states but the issue is when i click on background or kill state notifications i'm not getting remoteMessage in getInitialNotification() and onNotificationOpenedApp() methods but in android these are working fine.

[Mohamed-Ziyad]

are you testing on simulator? because ios simulator doesn't support PN, try with a device

[DeepakSharma04]

are you testing on simulator? because ios simulator doesn't support PN, try with a device

I'm checking on real iOS device foreground notifications are working but when background or quite states notifications are coming no getInitialNotification() and onNotificationOpenedApp() event are fired .

[DeepakSharma04]

I figured out the problem with notifee latest release and getInitialNotification() and onNotificationOpenedApp() are working with "@notifee/react-native": "5.7.0".

[ucheNkadiCode]

@DeepakSharma04 When using remote notifications on React Native, I've had the most luck with these docs. It directly states that onForegroundEvent will fire when it's a remote notification. (I first got a hint from this comment)

I'm able to send notifications via the Firebase Messaging Console. The way I've handled it is to place the notifee.onForegroundEvent subscriber onto my home screen and then handle any navigation logic from there. That way I have access to a navigation object and can navigate or pass params. Surprisingly, this onForegroundEvent code even runs from the kill state. I am only able to get onBackgroundEvent to fire from local notifications while the app is running, not remote notifications

Using "@notifee/react-native": "^7.7.1", "react-native": "^0.72.4", "@react-native-firebase/app": "^14.12.0", "@react-native-firebase/messaging": "^14.12.0",

// One Time USE EFFECT function to set things up!!
  useEffect(() => {
    const unsubscribeNotifee = notifee.onForegroundEvent(
      async ({ type, detail }) => {
        console.log(
          `The type is`,
          type,
          "the detail is",
          detail
        );
        switch (type) {
          case EventType.PRESS:
            if (detail.notification?.remote) {
               console.log("It was a remote notification")
              // Do some navigation logic
            }
            break;
          case EventType.ACTION_PRESS:
            console.log(`It was an ACTION PRESS THO`)
            break;
        }
      }
    );
    return () => {
      unsubscribeNotifee();
    };
  }, []);

[github-actions[bot]]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.