React-native-firebase: Send images with notifications on iOS.

[345ml]

Issue

I used to use version 6.3.1 of react-native-firebase, which provides notifications with images.
I'm referring to the official documentation.
https://firebase.google.com/docs/cloud-messaging/ios/send-image

NotificationService.m

#import "NotificationService.h"
#import "RNFBMessagingModule.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];

    // Modify the notification content here...
//    self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title];

    [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    self.contentHandler(self.bestAttemptContent);
}

@end

In version 6.7.1, it doesn't work anymore.

I found that changing #import "RNFBMessagingModule.h" to #import " RNFBMessagingSerializer.h" works, but it crashes on iOS real machines.

Perhaps it's triggered by the fact that the app received the notification when it was in foreground.

Is there a correct way to implement notifications with images?

---

Project Files

Javascript

Click To Expand

#### `package.json`:

    "react": "16.9.0",
    "react-dom": "16.8.3",
    "react-native": "0.61.5",
    "@react-native-firebase/analytics": "^6.7.1",
    "@react-native-firebase/app": "^6.7.1",
    "@react-native-firebase/auth": "^6.7.1",
    "@react-native-firebase/crashlytics": "^6.7.1",
    "@react-native-firebase/dynamic-links": "^6.7.1",
    "@react-native-firebase/firestore": "^6.7.1",
    "@react-native-firebase/functions": "^6.8.0",
    "@react-native-firebase/messaging": "^6.7.1",
    "@react-native-firebase/remote-config": "^6.7.1",
    "@react-native-firebase/storage": "^6.7.1",

### iOS

Click To Expand

#### `ios/Podfile`: - [ ] I'm not using Pods - [x] I'm using Pods and my Podfile looks like:

platform :ios, '10.0'

require_relative '../node_modules/react-native-unimodules/cocoapods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'NotificationServiceExtension' do
  pod 'Firebase/Messaging'
end

target 'appname' do
  # Pods for leavoice
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications.podspec"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"

  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  use_unimodules!
  use_native_modules!
end

## Environment

Click To Expand

**`react-native info` output:**

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.56 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.20.1 - ~/.anyenv/envs/nodenv/versions/10.20.1/bin/node
    Yarn: 1.22.4 - ~/.nodebrew/current/bin/yarn
    npm: 6.14.4 - ~/.anyenv/envs/nodenv/versions/10.20.1/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 23.0.2, 25.0.0, 26.0.1, 26.0.3, 27.0.3, 28.0.2, 28.0.3, 30.0.0
      System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom, android-R | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

- **Platform that you're experiencing the issue on**: - [ x] iOS - [ ] Android - [ ] **iOS** but have not tested behavior on Android - [ ] **Android** but have not tested behavior on iOS - [ ] Both - **`react-native-firebase` version you're using that has this issue:** - 6.7.1 - **`Firebase` module(s) you're using that has the issue:** - `e.g. Instance ID` - **Are you using `TypeScript`?** - N

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[345ml]

It's not right.
The crash occurs even after deleting the NotificationService.
Is this a bug in version 6.7.1?

[345ml]

https://github.com/invertase/react-native-firebase/issues/3499
It may be a similar problem to this one.

[ngondat97]

I am the same

[gilbertl]

I find that when I use Firebase admin SDK to send a notification with payload

notification: { title: "title", body: "body", imageUrl: "https://someurl" }

on clicking the notification, the app crashes instantly.

If I don't pass the imageUrl

notification: { title: "title", body: "body", }

then the notification opens just fine.

crash logs: https://pastebin.com/bV8YDEQ7

I'm on 7.0.1

[mikehardy]

Please just post relevant parts of the stack trace directly in here, enclosed in triple-backticks so the markdown looks good.

[345ml]

@mikehardy
I'm sorry, but I'm not familiar with native development.
If the information is wrong, I will send it again.

Thread 1 Queue : com.apple.main-thread (serial)
#0  0x00000001933b5d88 in __pthread_kill ()
#1  0x00000001932ce1e8 in pthread_kill$VARIANT$mp ()
#2  0x0000000193221644 in abort ()
#3  0x0000000193389cc0 in abort_message ()
#4  0x000000019337be10 in demangling_terminate_handler() ()
#5  0x00000001932e2e80 in _objc_terminate() ()
#6  0x000000019338914c in std::__terminate(void (*)()) ()
#7  0x00000001933890e4 in std::terminate() ()
#8  0x00000001932e2e04 in objc_terminate ()
#9  0x000000010792f744 in _dispatch_client_callout ()
#10 0x0000000107932bb0 in _dispatch_block_invoke_direct ()
#11 0x0000000198783440 in __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__ ()
#12 0x000000019878310c in -[FBSSerialQueue _queue_performNextIfPossible] ()
#13 0x0000000198783634 in -[FBSSerialQueue _performNextFromRunLoopSource] ()
#14 0x000000019353eb64 in __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ ()
#15 0x000000019353eabc in __CFRunLoopDoSource0 ()
#16 0x000000019353e244 in __CFRunLoopDoSources0 ()
#17 0x0000000193539274 in __CFRunLoopRun ()
#18 0x0000000193538c34 in CFRunLoopRunSpecific ()
#19 0x000000019d68238c in GSEventRunModal ()
#20 0x000000019766b22c in UIApplicationMain ()
#21 0x0000000102823650 in main at /Users/horota/work/voice-memo-chat/ios/leavoice/main.m:14
#22 0x00000001933c0800 in start ()
Thread#0    0x00000001935c05f0 in __exceptionPreprocess ()
#1  0x00000001932e2bcc in objc_exception_throw ()
#2  0x00000001934c4ea8 in -[NSObject(NSObject) doesNotRecognizeSelector:] ()
#3  0x00000001935c4694 in ___forwarding___ ()
#4  0x00000001935c65bc in _CF_forwarding_prep_0 ()
#5  0x00000001032a87f4 in +[RNFBMessagingSerializer remoteMessageUserInfoToDict:] at /Users/horota/work/voice-memo-chat/node_modules/@react-native-firebase/messaging/ios/RNFBMessaging/RNFBMessagingSerializer.m:116
#6  0x00000001032a7e24 in +[RNFBMessagingSerializer notificationToDict:] at /Users/horota/work/voice-memo-chat/node_modules/@react-native-firebase/messaging/ios/RNFBMessaging/RNFBMessagingSerializer.m:39
#7  0x00000001032a445c in -[RNFBMessagingUNUserNotificationCenter userNotificationCenter:willPresentNotification:withCompletionHandler:] at /Users/horota/work/voice-memo-chat/node_modules/@react-native-firebase/messaging/ios/RNFBMessaging/RNFBMessaging+UNUserNotificationCenter.m:68
#8  0x00000001030dc894 in __FCMSwizzleWillPresentNotificationWithHandler_block_invoke at /Users/horota/work/voice-memo-chat/ios/Pods/FirebaseMessaging/Firebase/Messaging/FIRMessagingRemoteNotificationsProxy.m:444
#9  0x00000001030daa30 in FCMSwizzleWillPresentNotificationWithHandler at /Users/horota/work/voice-memo-chat/ios/Pods/FirebaseMessaging/Firebase/Messaging/FIRMessagingRemoteNotificationsProxy.m:489
#10 0x000000019767edac in -[UIApplication _handleNonLaunchSpecificActions:forScene:withTransitionContext:completion:] ()
#11 0x0000000196c82bb0 in -[UIScene _emitSceneSettingsUpdateResponseForCompletion:afterSceneUpdateWork:] ()
#12 0x0000000196c83c64 in -[UIScene scene:didUpdateWithDiff:transitionContext:completion:] ()
#13 0x00000001972096f4 in -[UIApplicationSceneClientAgent scene:handleEvent:withCompletion:] ()
#14 0x000000019873ac98 in -[FBSSceneImpl updater:didUpdateSettings:withDiff:transitionContext:completion:] ()
#15 0x000000019875f274 in __88-[FBSWorkspaceScenesClient sceneID:updateWithSettingsDiff:transitionContext:completion:]_block_invoke_2 ()
#16 0x00000001987447ec in -[FBSWorkspace _calloutQueue_executeCalloutFromSource:withBlock:] ()
#17 0x000000019875f1a8 in __88-[FBSWorkspaceScenesClient sceneID:updateWithSettingsDiff:transitionContext:completion:]_block_invoke ()
#18 0x000000010792f730 in _dispatch_client_callout ()
#19 0x0000000107932bb0 in _dispatch_block_invoke_direct ()
#20 0x0000000198783440 in __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__ ()
#21 0x000000019878310c in -[FBSSerialQueue _queue_performNextIfPossible] ()
#22 0x0000000198783634 in -[FBSSerialQueue _performNextFromRunLoopSource] ()
#23 0x000000019353eb64 in __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ ()
#24 0x000000019353eabc in __CFRunLoopDoSource0 ()
#25 0x000000019353e244 in __CFRunLoopDoSources0 ()
#26 0x0000000193539274 in __CFRunLoopRun ()
#27 0x0000000193538c34 in CFRunLoopRunSpecific ()
#28 0x000000019d68238c in GSEventRunModal ()
#29 0x000000019766b22c in UIApplicationMain ()
#30 0x0000000102823650 in main at /Users/horota/work/voice-memo-chat/ios/leavoice/main.m:14
#31 0x00000001933c0800 in start ()

package.json
package.json "@react-native-firebase/messaging": "6.7.1", "@react-native-firebase/app": "^6.7.1",

[mikehardy]

@345ml that stack trace is good, thank you! Can you accompany it with the exact JSON that was sent as a message? The combination of program inputs, program versions, and crash trace is the best way to localize an error - without the inputs, we spend a lot of time trying to figure them out, when I think you'll just have them available

[345ml]

@mikehardy
The JSON at the time of message issuance looks like this.
(Server-side program on Firebase Functions)

If I remember correctly, I was able to reproduce the error when issuing notifications in a test from Cloud Messaging in the Firebase Console.

Input JSON

{
  data: {},
  tokens: fcmTokens,  // Array
  notification: {
    title: 'Title',
    body: 'Body',
  },
  android: {
    notification: {
      channelId: channeled,  // String
      image: imageUrl,  // String
    },
  },
  apns: {
    payload: {
      aps: {
        badge: count,  // Number
        "mutable-content": 1,
      },
    },
    fcm_options: {
      image: imageUrl,  // String
    },
  },
};

Run

admin.messaging().sendMulticast(json)

package.json

"engines": {
    "node": "8"  // I'm using Node.js v8.16.0
},
"dependencies": {
    "firebase-admin": "^8.9.2",
    and more...
}

[Wedin]

I'm also experiencing this, my notifications are also crashing on iOS when including an image in the notification. It crashes as soon as I press the notification.

I did some digging and found that

It crashes on this line: https://github.com/invertase/react-native-firebase/blob/master/packages/messaging/ios/RNFBMessaging/RNFBMessagingSerializer.m#L116

With the error message:

NSInvalidArgumentException: -[__NSCFNumber isEqualToString:]: unrecognized selector sent to instance

Looking at the examples mutable-content should be treated as a number, right?

[mikehardy]

Ah ha! Critical troubleshooting there - fantastic @Wedin - here is what I think is the same issue, with a patch-package patch to fix it until it's merged. https://github.com/invertase/react-native-firebase/issues/3447#issuecomment-618639388

I am really busy and rolling through issues literally as fast as possible right now, if anyone else could see if there is actually a viable pull request for that or not, and if not make one so that we could merge this in it looks like a lot of people would be helped :pray:

[mikehardy]

possible dupes - no PR that I can see https://github.com/invertase/react-native-firebase/issues?q=mutable-content+

[zoontek]

@mikehardy Done!

[Salakar]

Fix shipped in https://github.com/invertase/react-native-firebase/commit/3549999d5592171746aef8ca5e315d078cab30e4

Thanks!

[345ml]

Good job guys!!!