[0.76] updating appProperties does not work on iOS

[aliceni81]

Description

Hi, I'm using react native v0.76.5 (new architecture is enabled) and react-native-firebase/messaging v21.6.2.

According to the documentation, I have the following code in index.js

messaging().setBackgroundMessageHandler(async remoteMessage => {
  //
});

const HeadlessCheck = ({ isHeadless }) => {
  if (isHeadless) return null;
  return <App />;
}

AppRegistry.registerComponent(appName, () => HeadlessCheck);

I have the the following code in AppDelegate.mm:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"gk_research_app_staging";
  // 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 = @{};

  // return [super application:application didFinishLaunchingWithOptions:launchOptions];
  self.initialProps = [RNFBMessagingModule addCustomPropsToUserProps:nil withLaunchOptions:launchOptions];
  [FIRApp configure];
  [application registerForRemoteNotifications];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

I have a problem for iOS device - when the app is in quit state and receives a notification, after a few seconds, I click the notification which makes the app open, but nothing is shown. I know it's because of "if (isHeadless) return null;".

The following logs are in my console:
When the app is opened(foreground/background):
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":false},"fabric":true}
When the app is quit and receives a notification, the bundle is re-generated:
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":true},"fabric":true}
When re-open the app or open the app by the notification, the bundle is not regenerated and keep the last state:
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":true},"fabric":true}

This issue does not happen when the app is already open, no matter if it is in foreground or background state, because the bundle will not be re-generated.

To make the app UI display, I need to exit the app and open the app again which cause the bundle re-generated:
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":false},"fabric":true}

How can I solve this issue?
I need your help!!!

Related:
#20115
invertase/react-native-firebase#5388

Steps to reproduce

1. App is in quit state and receives a notification
2. Open the app
3. App shows blank screen

React Native Version

0.76.5

Affected Platforms

Runtime - iOS

Areas

Bridgeless - The New Initialization Flow

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M2
  Memory: 2.56 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.0
    path: ~/.nvm/versions/node/v20.18.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.0.0
    path: ~/.nvm/versions/node/v20.18.0/bin/npm
  Watchman:
    version: 2024.10.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/williamchan/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 34.0.0
      - 35.0.0
    System Images:
      - android-23 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/williamchan/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

The following logs are in my console:
When the app is opened(foreground/background):
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":false},"fabric":true}
When the app is quit and receives a notification, the bundle is re-generated:
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":true},"fabric":true}
When re-open the app or open the app by the notification, the bundle is not regenerated and keep the last state:
Running "test_app" with {"rootTag":1,"initialProps":{"concurrentRoot":true,"isHeadless":true},"fabric":true}

Reproducer

/

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[aliceni81]

When I disable the new architecture, notifications works well.

[cipolleschi]

@aliceni81 thanks for opening the issue and sorry for the disruption this is causing.

I believe that the problem might be in the AppDelegate code.

Can you try to change it as it follows:

  self.moduleName = @"gk_research_app_staging";
  // 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 = @{};
-
-  // return [super application:application didFinishLaunchingWithOptions:launchOptions];
  self.initialProps = [RNFBMessagingModule addCustomPropsToUserProps:nil withLaunchOptions:launchOptions];
+ BOOL appStarted = [super application:application didFinishLaunchingWithOptions:launchOptions];  
  [FIRApp configure];
  [application registerForRemoteNotifications];
- return [super application:application didFinishLaunchingWithOptions:launchOptions];
+ return appStarted;

A possible problem is that the the firebase app is starting before the React Native environment is started, and that's make the code not working fine.

[aliceni81]

@cipolleschi Thanks for you reply.
I tried your suggestion, but it did not work.

[cipolleschi]

@aliceni81 can you prepare a small reproducer using this template? It will help me investigate the issue.
Also, can you provide some hints on how to create and send a notification to test this scenario?

[aliceni81]

@cipolleschi Honestly, I'm new to react native. Have no idea how to reproduce it with react-native-firebase as it requires complicated settings.
I saw @cortinico @mikehardy had helped to fix the bug of #48124 and @mikehardy is the maintainer of react-native-firebase.
Sorry to bother you guys, but do you have any ideas about this bug?

[mikehardy]

It appears you need to give up on injecting appProperties values in the didFinishLaunchingWithOptions method since the rootview may already be launching and won't apply appProperties changes that are set in a race with it's launch

Instead it appears that the race needs to be avoided by implementing an observer for the RCTJavaScriptDidLoadNotification notification, and implement a block that sets the appProperties there

#20115 (comment)

[[NSNotificationCenter defaultCenter] addObserverForName:RCTJavaScriptDidLoadNotification object:nil queue:nil usingBlock:^(NSNotification * _Nonnull note) {
   // Goal: set appProperties here somehow? 
  //    Unsure but inside Xcode the IDE should guide you to the right object and method to call...  
  //    1-  it will involve getting a handle on RCTRootView somehow, 
  //       - here is an example getting the RCTRootView https://github.com/invertase/react-native-firebase/blob/082a1e496cb1f8496f53869d9ab9e6f88ecbdc00/packages/messaging/ios/RNFBMessaging/RNFBMessaging%2BNSNotificationCenter.m#L79-L88
  // 
  //    2-  determining foreground or background state of the app,  
  //         - here is example code getting that state https://github.com/invertase/react-native-firebase/blob/082a1e496cb1f8496f53869d9ab9e6f88ecbdc00/packages/messaging/ios/RNFBMessaging/RNFBMessaging%2BAppDelegate.m#L158
  // 
  //    -  and then setting new appProperties value into RCTRootView.appProperties with the isHeadless state ?
  //      - example code adding a property https://github.com/facebook/react-native/blob/53ff6133a7da8a35128cbbef913793df4a5dea70/packages/rn-tester/RNTester/NativeExampleViews/UpdatePropertiesExampleView.mm#L76-L79
  //       - note that the property says it should be set on main thread only https://github.com/facebook/react-native/blob/53ff6133a7da8a35128cbbef913793df4a5dea70/packages/react-native/React/Base/RCTRootView.h#L99
  //      - here is an example of using main thread in a block: https://github.com/invertase/react-native-firebase/blob/082a1e496cb1f8496f53869d9ab9e6f88ecbdc00/packages/messaging/ios/RNFBMessaging/RNFBMessaging%2BAppDelegate.m#L166-L170
}];

[aliceni81]

@mikehardy Really appreciate your reply. The settings I have is refer to the react-native-firebase official documentation. https://rnfirebase.io/messaging/usage#background-application-state.

Is it only for old architecture? Will the documentation be updated soon?

[mikehardy]

@aliceni81 unsure if only old arch, or new, best way to get docs updated is to test the idea to make sure it works then post a PR with the edit for what you tested. I likely won't have time