Notification iOS with image not showing with FCM #2432

idir-s · 2019-08-01T09:19:56Z

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
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.

The text was updated successfully, but these errors were encountered:

booboothefool · 2019-08-04T21:50:25Z

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 · 2019-08-05T07:33:37Z

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

LuisRodriguezLD · 2019-08-10T03:40:47Z

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

LuisRodriguezLD · 2019-08-10T03:47:04Z

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

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

booboothefool · 2019-08-11T01:22:21Z

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

LuisRodriguezLD · 2019-08-11T03:15:56Z

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

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 )
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)

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 · 2019-08-11T04:26:48Z

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? firebase/firebase-ios-sdk#1503

LuisRodriguezLD · 2019-08-11T11:58:51Z

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

stale · 2019-09-08T12:41:55Z

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 · 2019-09-11T04:13:58Z

@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 · 2019-09-16T14:22:15Z

@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.

sakinaboriwala · 2019-09-18T06:20:47Z

@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.

joshcho96 · 2019-09-18T17:37:47Z

@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 · 2019-09-19T12:18:44Z

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

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 )

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)

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 · 2019-09-19T15:14:09Z

@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 · 2019-09-19T16:54:47Z

@LuisRodriguezLD
Yes, I did pod install

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

sakinaboriwala · 2019-09-19T17:48:49Z

@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 #632 (comment) for the same.

stale · 2019-10-17T17:55:49Z

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 · 2019-11-01T17:58:07Z

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 · 2019-11-07T13:21:22Z

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 · 2019-11-18T12:48:01Z

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

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 )

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)

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 · 2019-12-15T18:03:07Z

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

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 )

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)

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 · 2020-01-24T21:20:20Z

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 · 2020-02-06T14:53:37Z

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: facebook/react-native#25792 (comment)

pranav-jayadev · 2020-02-12T07:21:31Z

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 · 2020-02-24T08:58:14Z

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 · 2020-07-09T09:56:59Z

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

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

yash-atreya · 2020-07-10T11:52:37Z

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

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 )

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)

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 · 2020-09-23T02:47:03Z

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 · 2020-10-21T05:33:14Z

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 · 2020-10-21T11:39:07Z

@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 #4401

haduytrl · 2020-11-16T04:32:36Z

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 · 2020-12-04T20:45:00Z

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];

Hyllesen · 2021-04-07T06:39:16Z

For anyone with RNFirebaseMessaging.h file not found error or errors with #Import "FirebaseMessaging.h" use
@import Firebase instead

anhquan291 · 2021-04-14T11:20:50Z

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

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 )

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)

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

Hi there, I'm facing the same problem here. Already done all the steps and build successfully. Did you find a solution? Thanks a lot

lauro-cesar · 2021-05-01T00:39:54Z

Don't miss this detail: Check Frameworks and Libraries and make sure the extension is embedded.

OsamaShakir-bot · 2021-06-29T20:20:51Z

After 5 hours or struggle finally, did it follow this link it has step by step guide
https://rnfirebase.io/messaging/ios-notification-images

after then check the development target of your extension

vipu-sa · 2022-01-04T12:48:00Z

https://rnfirebase.io/messaging/ios-notification-images

I am following this link for the notification with the image in iPhone, but the image is not getting with notification.

I am sharing the details of current versions which are used in my project.
"react-native": "0.62.2",
"@react-native-firebase/app": "^8.4.0",
"@react-native-firebase/messaging": "^7.8.1",
Firebase/Messaging (6.34.0) in Podfile.lock
In project, Deployment Info, iOS version is 14.4
In my iPhone device version is 14.7.1

Getting build fail issue when inserting the below line in NotificationService file.
#import "FirebaseMessaging.h"
[[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];

Please help to solve this issue.

ydv0121 · 2022-02-11T07:42:59Z

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

after spend many hours.this worked like a charm.
thanks

congduong97 · 2022-08-17T17:36:39Z

Any solution for #import "RNFirebaseMessaging.h" not found?, thanks

mikehardy · 2022-08-24T14:19:04Z

@congduong97 it is not polite to post unrelated comments to other people's issues

congduong97 · 2022-08-25T02:53:31Z

@mikehardy Sorry,
I had this problem while following the instructions and I saw that someone had the same problem as me

JeanHules · 2022-12-21T04:22:19Z

After a bit of struggling, Xcode set my extension iOS version to the latest while the main app's version was set to 12.4. Changing the extension to 12.4, the image comes through.

fattahmuhyiddeen · 2023-03-14T22:59:03Z

there is official doc for this

https://rnfirebase.io/messaging/ios-notification-images

isaacbatst · 2023-09-21T19:23:12Z

I had to do it a bit different as suggested here

target 'ImageNotification' do
  use_frameworks! :linkage => :static
  
  pod 'Firebase/Messaging', '~> VERSION'
end

DaveTolulope22 · 2024-01-22T17:25:49Z

Notification image only shows when in the app is in the background not when the app is in the Foreground how do I solve this ?

Djain1764 · 2024-01-26T17:33:30Z

Notification image only shows when in the app is in the background not when the app is in the Foreground how do I solve this ?

hey @DaveTolulope22 , are you able to make image notifications work ??
I am not even able to make it work for background notifications, can you please help me on that, can you tell me what reference you followed exactly !!

ehtishamali042 · 2024-01-31T15:41:14Z

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

amazing amazing amazing

danishsaleem0 · 2024-02-20T06:54:30Z

working in forground but not in background how to solve this?
here is my notification-service
import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {Platform} from 'react-native';

class LocalNotificationService {
configure = onOpenNotification => {
PushNotification.configure({
// (optional) Called when Token is generated (iOS and Android)
onRegister: function (token) {},

  // (required) Called when a remote is received or opened, or local notification is opened
  onNotification: function (notification) {
    if (!notification?.data) {
      return;
    }
    notification.userInteraction = true;
    onOpenNotification(
      Platform.OS === 'ios' ? notification.data.item : notification.data,
    );

    if (Platform.OS === 'ios') {
      notification.finish(PushNotificationIOS.FetchResult.NoData);
    }
  },

  // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
  onAction: function (notification) {
    console.log('ACTION:', notification.action);
    console.log('NOTIFICATION:', notification);
  },

  // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
  onRegistrationError: function (err) {
    console.error(err.message, err);
  },

  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  popInitialNotification: true,
  requestPermissions: true,
});

};
unRegister = () => {
PushNotification.unregister();
};

showNotification = (id, title, message, data = {}, options = {}) => {
PushNotification.localNotification({
/* Android only Properties*/
...this.buildAndroidNotification(id, title, message, data, options),
/* IOS and Android properties*/

  ...this.buildIOSNotification(id, title, message, data, options),
  /* IOS and Android properties */
  title: title || '',
  message: message || '',
  playSound: options.playSound || false,
  soundName: options.soundName || 'default',
  channelId: 'mindnourishment',
  userInteraction: false, // BOOLEAN: If the notification was opened by the user from the notification area or not
});

};
buildAndroidNotification = (id, title, message, data = {}, options = {}) => {
return {
id: id || 1,
autoCancel: true,
largeIcon: options.largeIcon || 'ic_launcher',
smallIcon: options.smallIcon || 'ic_notification',
bigText: message || '',
subText: title || '',
vibrate: options.vibrate || true,
vibration: options.vibration || 300,
priority: options.priority || 'high',
importance: options.importance || 'high', // (optional) set notifications importance
data: data,
};
};

buildIOSNotification = (id, title, message, data = {}, options = {}) => {
console.log(data, 'data');
return {
alertAction: options.alertAction || 'view',
category: options.category || '',
userInfo: {
id: id,
item: data,
// image: data?.data?.fcm_options?.image || null,
},
};
};

createNotificationChannel = () => {
PushNotification.createChannel({
channelId: 'mindnourishment',
channelName: 'mindnourishment',
channelDescription: 'Mindnourishment Channel Description ',
importance: 4, // 4 = Max, 3 = High, 2 = Default, 1 = Low, 0 = None
vibration: true,
});
};
cancelAllLocalNotifications = () => {
{
PushNotification.cancelAllLocalNotifications();
}
};
removeDeliveredNotificationByID = notificationId => {
console.log(
'[LocalNotificationService] removeDeliveredNotificationByID: ',
notificationId,
);
PushNotification.cancelLocalNotifications({id: ${notificationId}});
};
}

export const localNotificationService = new LocalNotificationService();

and fcm-service
import messaging from '@react-native-firebase/messaging';
import {Platform} from 'react-native';

class FCMService {
register = (onRegister, onNotification, onOpenNotification) => {
this.checkPermission(onRegister);
this.createNotificationsListeners(
onRegister,
onNotification,
onOpenNotification,
);
};

registerAppWithFCM = async () => {
if (Platform.OS === 'ios') {
await messaging().registerDeviceForRemoteMessages();
await messaging().setAutoInitEnabled(true);
}
};

checkPermission = onRegister => {
messaging()
.hasPermission()
.then(enabled => {
if (enabled) {
// User has permission
this.getToken(onRegister);
} else {
// User doesn't have permission
this.requestPermission();
}
})
.catch(error => {
console.log('[FCMService] Permission rejected', error);
});
};

getToken = onRegister => {
messaging()
.getToken()
.then(fcmToken => {
if (fcmToken) {
onRegister(fcmToken);
} else {
console.log('[FCMService] user does not have a device token');
}
})

  .catch(error => {
    console.log('[FCMService] getToken rejected', error);
  });

};

requestPermission = onRegister => {
messaging()
.requestPermission()
.then(() => {
this.getToken(onRegister);
})
.catch(error => {
console.log('[FCMService] Request permission rejected');
});
};

deleteToken = () => {
console.log('[FCMService] deleteToken');
messaging()
.deleteToken()
.catch(error => {
console.log('[FCMService] Delete token error ', error);
});
};

createNotificationsListeners = (
onRegister,
onNotification,
onOpenNotification,
) => {
// When the application is running ,but in background
messaging().onNotificationOpenedApp(remoteMessage => {
if (remoteMessage) {
const notification = remoteMessage.notification;
console.log(notification, 'remoteMessage');
onOpenNotification(remoteMessage);
}
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
  if (remoteMessage) {
    const notification = remoteMessage;
    console.log(notification);
    onOpenNotification(remoteMessage);
  }
});
// when the application is opened from a quite state.
messaging()
  .getInitialNotification()
  .then(remoteMessage => {
    if (remoteMessage) {
      const notification = remoteMessage.notification;
      onOpenNotification(remoteMessage);
    }
  });
// Foreground state messages
this.messageListener = messaging().onMessage(async remoteMessage => {
  if (remoteMessage) {
    let notification = null;
    if (Platform.OS === 'ios') {
      notification = remoteMessage;
    } else {
      notification = remoteMessage;
    }
    onNotification(notification);
  }
});

// Triggered when have new token
messaging().onTokenRefresh(fcmToken => {
  console.log('[FCMService] New token refresh: ', fcmToken);
  onRegister(fcmToken);
});

};

unRegister = () => {
this.messageListener();
};
}

export const fcmService = new FCMService();

idir-s closed this as completed Aug 1, 2019

idir-s reopened this Aug 1, 2019

stale bot added the Type: Stale Issue has become stale - automatically added by Stale bot label Sep 8, 2019

stale bot removed the Type: Stale Issue has become stale - automatically added by Stale bot label Sep 11, 2019

stale bot added the Type: Stale Issue has become stale - automatically added by Stale bot label Oct 17, 2019

stale bot closed this as completed Nov 1, 2019

This was referenced Aug 13, 2020

Notification with image on iOS #4016

Closed

feat(messaging,ios): add notification extension service to support im… #4085

Merged

Pittan mentioned this issue Sep 6, 2020

[📚] Add description about adding extension to iOS App to receive notification with image #4218

Closed

priyesh-bit mentioned this issue Jan 14, 2022

🐛 [firebase_messaging] Notification Images setup problem iOS firebase/flutterfire#4133

Closed

Paddy78de mentioned this issue Apr 11, 2022

ios image not working havesource/cordova-plugin-push#180

Closed

Notification iOS with image not showing with FCM #2432

Notification iOS with image not showing with FCM #2432

Comments

idir-s commented Aug 1, 2019 • edited Loading

Issue

Project Files

iOS

ios/Podfile:

AppDelegate.m:

Android

Have you converted to AndroidX?

android/build.gradle:

android/app/build.gradle:

android/settings.gradle:

MainApplication.java:

AndroidManifest.xml:

Environment

booboothefool commented Aug 4, 2019 • edited Loading

Ehesp commented Aug 5, 2019 • edited Loading

LuisRodriguezLD commented Aug 10, 2019

LuisRodriguezLD commented Aug 10, 2019

booboothefool commented Aug 11, 2019

LuisRodriguezLD commented Aug 11, 2019 • edited Loading

booboothefool commented Aug 11, 2019 • edited Loading

LuisRodriguezLD commented Aug 11, 2019

stale bot commented Sep 8, 2019

ThanhQuang1410 commented Sep 11, 2019

LuisRodriguezLD commented Sep 16, 2019

sakinaboriwala commented Sep 18, 2019

joshcho96 commented Sep 18, 2019 • edited Loading

NikitaPFE commented Sep 19, 2019

LuisRodriguezLD commented Sep 19, 2019 • edited Loading

NikitaPFE commented Sep 19, 2019

sakinaboriwala commented Sep 19, 2019 • edited Loading

stale bot commented Oct 17, 2019

stale bot commented Nov 1, 2019

Dhavalmaheta commented Nov 7, 2019

Anshuman71 commented Nov 18, 2019

casualcoder404 commented Dec 15, 2019

pilot4u commented Jan 24, 2020

gianpaj commented Feb 6, 2020

pranav-jayadev commented Feb 12, 2020

ali-tit commented Feb 24, 2020 • edited Loading

davidepalazzo commented Jul 9, 2020

yash-atreya commented Jul 10, 2020

jagwingchoy commented Sep 23, 2020

Daha62 commented Oct 21, 2020

mikehardy commented Oct 21, 2020

haduytrl commented Nov 16, 2020

curiousdustin commented Dec 4, 2020

Hyllesen commented Apr 7, 2021

anhquan291 commented Apr 14, 2021 • edited Loading

lauro-cesar commented May 1, 2021

OsamaShakir-bot commented Jun 29, 2021

vipu-sa commented Jan 4, 2022

ydv0121 commented Feb 11, 2022 • edited Loading

congduong97 commented Aug 17, 2022

mikehardy commented Aug 24, 2022

congduong97 commented Aug 25, 2022

JeanHules commented Dec 21, 2022

fattahmuhyiddeen commented Mar 14, 2023

isaacbatst commented Sep 21, 2023 • edited Loading

DaveTolulope22 commented Jan 22, 2024

Djain1764 commented Jan 26, 2024

ehtishamali042 commented Jan 31, 2024

danishsaleem0 commented Feb 20, 2024

idir-s commented Aug 1, 2019 •

edited

Loading

`ios/Podfile`:

`AppDelegate.m`:

`android/build.gradle`:

`android/app/build.gradle`:

`android/settings.gradle`:

`MainApplication.java`:

`AndroidManifest.xml`:

booboothefool commented Aug 4, 2019 •

edited

Loading

Ehesp commented Aug 5, 2019 •

edited

Loading

LuisRodriguezLD commented Aug 11, 2019 •

edited

Loading

booboothefool commented Aug 11, 2019 •

edited

Loading

joshcho96 commented Sep 18, 2019 •

edited

Loading

LuisRodriguezLD commented Sep 19, 2019 •

edited

Loading

sakinaboriwala commented Sep 19, 2019 •

edited

Loading

ali-tit commented Feb 24, 2020 •

edited

Loading

anhquan291 commented Apr 14, 2021 •

edited

Loading

ydv0121 commented Feb 11, 2022 •

edited

Loading

isaacbatst commented Sep 21, 2023 •

edited

Loading