React-native-firebase: Notification iOS with image not showing with FCM

[idir-s]

Issue

I want to receive notification with an image from FCM but the image is not display in the notification banner on iOS but work on Android.

---

Project Files

iOS

Click To Expand

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

    pod 'Firebase/Core', '~> 6.3.0'
    pod 'GoogleIDFASupport', '~> 3.14.0'
    pod 'Firebase/Messaging', '~> 6.3.0'
    pod 'RNFirebase', :path => '../node_modules/react-native-firebase/ios'

#### `AppDelegate.m`:

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo
fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
  [[RNFirebaseNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {
  [[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings];
}

---

Android

Click To Expand

#### Have you converted to AndroidX? - [ ] my application is an AndroidX application? - [ ] I am using `android/gradle.settings` `jetifier=true` for Android compatibility? - [ ] I am using the NPM package `jetifier` for react-native compatibility? #### `android/build.gradle`:

// N/A

#### `android/app/build.gradle`:

// N/A

#### `android/settings.gradle`:

// N/A

#### `MainApplication.java`:

// N/A

#### `AndroidManifest.xml`:

<!-- N/A -->

---

Environment

Click To Expand

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

react-native : 0.60.4

- **Platform that you're experiencing the issue on**: - [ ] iOS - **react-native-firebase - 5.5.6

---

Think react-native-firebase is great? Please consider supporting all of the project maintainers and contributors by donating via our Open Collective where all contributors can submit expenses. [Learn More]

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

[booboothefool]

I'm also having this problem. After attaching an image to a notification in Firebase, I would have expected the puppy to show up in the notification, but there's only text. Are there any extra steps or iOS code that has to be added to enable this functionality?

[Ehesp]

This should be something handled automatically by the device. I guess, it would be an SDK version update?

[LuisRodriguezLD]

I can see this was implemented back in April for Android but I can't find something similar on iOS

[LuisRodriguezLD]

Apparently we need to create an extension -> docs here.

Would be great if react-native-firebase could do this automatically :)

[booboothefool]

@LuisRodriguezLD Were you able to get that notification service extension set up properly? If so, could you provide some steps?

[LuisRodriguezLD]

Yes! I made it work :)
Here is what I did:

1. Create a new Notification Service Extension
   In Xcode, File -> New -> Target -> Notification Service Extension
   Name it and save it ( I used NotificationServiceExtension but you can use whatever )

2. This new target will need the pods as well, so in your pod file add

target 'NotificationServiceExtension' do
    pod 'Firebase/Messaging', '~> 6.3.0'
end

(Don't forget to pod install)

1. Edit your NotificationService.m file in the NotificationServiceExtension folder, this was created automatically in step 1.

Import RNFirebaseMessaging at the top

#import "RNFirebaseMessaging.h"

And replace

self.contentHandler(self.bestAttemptContent);

with

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

This video can get you started in step 1.
This page has instructions on step 3.

If you get stuck let me know.
Please note, step 1 automatically adds a deployment target version. Adjust according to your needs.

[booboothefool]

I am running into some problems.

react: 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz
react-native-firebase: ~5.4.0

pod 'RNFirebase', :path => '../node_modules/react-native-firebase/ios'
pod 'Firebase/Core', '~> 5.4.0'
pod 'Firebase/Auth', '~> 5.4.0'
pod 'Firebase/Messaging', '~> 5.4.0'
pod 'Firebase/Storage', '~> 5.4.0'
pod 'Firebase/DynamicLinks', '~> 5.4.0'

Ugh I'm stuck on 5.4.0 and this might have to do with it? https://github.com/firebase/firebase-ios-sdk/pull/1503

[LuisRodriguezLD]

Yeah. I highly recommend you upgrade react-native-firebase to 5.5.6 which has the firebase sdk in 6.3.0

[stale[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 the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[ThanhQuang1410]

@LuisRodriguezLD thanks for your solution but I still get some glitch here. When app in background or foreground, my notification display perfectly with image. But when app is open image dose not show. Do you have any solution for that?
Thanks for your support

[LuisRodriguezLD]

@ThanhQuang1410 Sorry, I do not have a current solution for when the app is open. I am pretty sure it's a very similar approach.

I'll try to get an example running today but no promises. Feel free to DM me.

[sakina1403]

@LuisRodriguezLD Awesome. Did you get a chance to try? I am facing a similar issue on Android as well. When the App is open expandable Notifications don't come, even if it's text. The Notification is received but it's not expandable.

[yoopoong96]

@LuisRodriguezLD Awesome. Did you get a chance to try? I am facing a similar issue on Android as well. When the App is open expandable Notifications don't come, even if it's text. The Notification is received but it's not expandable.

In android handle it by doing notification.android.setLargeIcon(IMAGE_URL);
and pass image url as data

[NikitaPFE]

Yes! I made it work :)
Here is what I did:

1. Create a new Notification Service Extension
   In Xcode, File -> New -> Target -> Notification Service Extension
   Name it and save it ( I used NotificationServiceExtension but you can use whatever )
2. This new target will need the pods as well, so in your pod file add

target 'NotificationServiceExtension' do
    pod 'Firebase/Messaging', '~> 6.3.0'
end

(Don't forget to pod install)

1. Edit your NotificationService.m file in the NotificationServiceExtension folder, this was created automatically in step 1.

Import RNFirebaseMessaging at the top

#import "RNFirebaseMessaging.h"

And replace

self.contentHandler(self.bestAttemptContent);

with

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

This video can get you started in step 1.
This page has instructions on step 3.

If you get stuck let me know.
Please note, step 1 automatically adds a deployment target version. Adjust according to your needs.

Сan you show an example of your code?
When i try to add #import "RNFirebaseMessaging.h" i have error "file not found".
Рow did you modify the AppDelegate.m and AppDelegate.h files?

I use Firebase/Messaging', '~> 6.3.0'
and react native 0.59.9

[LuisRodriguezLD]

@NikitaPFE there is not actual code besides that, it's just configuration.

file not found could be because you did not install the pods. did you follow step 2? Don't forget you need to pod install

[NikitaPFE]

@LuisRodriguezLD
Yes, I did pod install

You do not know whether to remove these methods from the AppDelegate.m?

[sakina1403]

@NikitaPFE There is no need to remove that code from Appdelegate.m

To resolve file not found error, follow these steps:

Go to NotificationService Target -> Build Settings -> Search Header paths and add ->

$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase/messaging

Refer https://github.com/invertase/react-native-firebase/issues/632#issuecomment-359673796 for the same.

[stale[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 the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[Dhavalmaheta]

I'm also having this problem. After attaching an image to a notification in Firebase, I would have expected the puppy to show up in the notification, but there's only text. Are there any extra steps or iOS code that has to be added to enable this functionality?

any solution you got for this ?

[Anshuman71]

Yes! I made it work :)
Here is what I did:

1. Create a new Notification Service Extension
   In Xcode, File -> New -> Target -> Notification Service Extension
   Name it and save it ( I used NotificationServiceExtension but you can use whatever )
2. This new target will need the pods as well, so in your pod file add

target 'NotificationServiceExtension' do
    pod 'Firebase/Messaging', '~> 6.3.0'
end

(Don't forget to pod install)

1. Edit your NotificationService.m file in the NotificationServiceExtension folder, this was created automatically in step 1.

Import RNFirebaseMessaging at the top

#import "RNFirebaseMessaging.h"

And replace

self.contentHandler(self.bestAttemptContent);

with

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

This video can get you started in step 1.
This page has instructions on step 3.

If you get stuck let me know.
Please note, step 1 automatically adds a deployment target version. Adjust according to your needs.

@LuisRodriguezLD thanks for your help. Your solution worked like a charm and now I can send push with images from the console. Can you please share your push notification code, the payload you send from your server.

[casualcoder404]

Yes! I made it work :)
Here is what I did:

1. Create a new Notification Service Extension
   In Xcode, File -> New -> Target -> Notification Service Extension
   Name it and save it ( I used NotificationServiceExtension but you can use whatever )
2. This new target will need the pods as well, so in your pod file add

target 'NotificationServiceExtension' do
    pod 'Firebase/Messaging', '~> 6.3.0'
end

(Don't forget to pod install)

1. Edit your NotificationService.m file in the NotificationServiceExtension folder, this was created automatically in step 1.

Import RNFirebaseMessaging at the top

#import "RNFirebaseMessaging.h"

And replace

self.contentHandler(self.bestAttemptContent);

with

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

This video can get you started in step 1.
This page has instructions on step 3.

If you get stuck let me know.
Please note, step 1 automatically adds a deployment target version. Adjust according to your needs.

I implemented these steps in my code. However when I send =>

{
"to": "dWB537Nz1GA:APA91bHIjJ5....",
"content_available": true,
"mutable_content": true,
"data":
{
"message": "Offer!",
"mediaUrl": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/FloorGoban.JPG/1024px-FloorGoban.JPG"
},
"notification":
{
"body": "Enter your message",
"sound": "default"
}
}

I am still not able to see the image in the notification.

[pilot4u]

did anyone solved this issue I'm struggling with the same one
I added :
target 'NotificationServiceExtension' do
pod 'Firebase/Messaging', '~> 6.3.0'
end
to pod file and did pod install
as well edited NotificationService.m file
and replaced self.contentHandler(self.bestAttemptContent);
with:
[[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent
withContentHandler:contentHandler];

but cannot receive notification after successfully sending following FCM POST
"notification": { "title": “test”, "body": “test”, "icon": "", "sound": "" }, "apns": { "payload": { "aps": { "mutable-content": 1 }, "mediaUrl": "<img url>", "mediaType": "image" }, "fcm_options": { "image": “<img url>“ } }, "data": { <custom json> }, "to": “<fcm token>” }

please note that this message is received when the application is in the foreground.
but nothing is received when the app in the background or closed
please help us to resolve this issue

[gianpaj]

If you have this iOS app build error:

'openURL:options:completionHandler:' is unavailable: not available on iOS (App Extension

you have to add this at the end of your Podfile:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'
    end
  end
end

from: https://github.com/facebook/react-native/issues/25792#issuecomment-517295859

[pranav-jayadev]

I have tried this, and am getting some error like the provisioning profile is not matching. Here my question is after adding the Notification service extension do we need to create another provisioning profile for this bundle id?

[ali-tit]

after adding a NotificationServiceExtension please Check your deployment target on Service Extension.

by default the Extension deployment target is set to iOS 13.1 ( depending on your sdk version ), so you need a device with same iOS version OR you have to choose a lower value to match your device iOS

[davidepalazzo]

Import RNFirebaseMessaging at the top
#import "RNFirebaseMessaging.h"

For people using RNF 5 or greater change the import to #import “FirebaseMessaging.h”.

[yash-atreya]

Yes! I made it work :)
Here is what I did:

1. Create a new Notification Service Extension
   In Xcode, File -> New -> Target -> Notification Service Extension
   Name it and save it ( I used NotificationServiceExtension but you can use whatever )
2. This new target will need the pods as well, so in your pod file add

target 'NotificationServiceExtension' do
    pod 'Firebase/Messaging', '~> 6.3.0'
end

(Don't forget to pod install)

1. Edit your NotificationService.m file in the NotificationServiceExtension folder, this was created automatically in step 1.

Import RNFirebaseMessaging at the top

#import "RNFirebaseMessaging.h"

And replace

self.contentHandler(self.bestAttemptContent);

with

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

This video can get you started in step 1.
This page has instructions on step 3.

If you get stuck let me know.
Please note, step 1 automatically adds a deployment target version. Adjust according to your needs.

This did not work for me.
Build was successful but it still didn't work

[jagwingchoy]

after adding a NotificationServiceExtension please Check your deployment target on Service Extension.

by default the Extension deployment target is set to iOS 13.1 ( depending on your sdk version ), so you need a device with same iOS version OR you have to choose a lower value to match your device iOS

Thanks you make my day!!

[Daha62]

Import RNFirebaseMessaging at the top
#import "RNFirebaseMessaging.h"

For people using RNF 5 or greater change the import to #import “FirebaseMessaging.h”.

I've one everything that was written above, but got an error

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_FIRMessaging", referenced from:
      objc-class-ref in NotificationService.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

react-native v0.63.3
RNF is greater than 5

Here is a part of my NotificationService.m

#import "NotificationService.h"
#import "FirebaseMessaging.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];
}

@end

Also I have in my podFile

  target 'NotificationService' do
    pod 'Firebase/Messaging', '~> 6.30.0'
  end

Any ideas?

[mikehardy]

@Daha62 as near as I can tell this is a "welcome to Xcode 12 and Apple SIlicon support in Xcode" bug. It's not related specifically to our module. You'll find all sorts of conflicting advice on stack overflow about it and you can see the PR here for a workaround (not a great solution) to a similar issue. It's going to be project-specific in the end I think https://github.com/invertase/react-native-firebase/pull/4401

[haduy97]

after adding a NotificationServiceExtension please Check your deployment target on Service Extension.

by default the Extension deployment target is set to iOS 13.1 ( depending on your sdk version ), so you need a device with same iOS version OR you have to choose a lower value to match your device iOS

Thank you very much, you just save my whole day. I appreciate it

[curiousdustin]

Another tip for those trying to cruise through this thing that should be handled automatically...

The NotificationService.m is created with boilerplate code already in it.

You probably want to remove or edit this line, which modifies the notification title:

self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title];