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

[Pittan]

Documentation Feedback

https://rnfirebase.io/messaging/server-integration#ios

Hello! I'm working on a new App for iOS built with React Native and react-native-firebase!

@react-native-firebase/messaging is awesome to implement notification feature quickly!

But I thought adding "You must create an App-extension to receive notification with image" to its document will be nice for beginners.

I had a few background for iOS App developing, so it won't be a huge problem.
But maybe for people who are not familiar with iOS App developing, it would be a great assist!

---

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

[mikehardy]

Hi there! This feature is generally available for anyone I think? #4085

And it has been documented? #4089

https://rnfirebase.io/messaging/server-integration#ios

Is there some other place this could be to make it more obvious?

[Pittan]

@mikehardy
Hi! I created an extension using this method.

I know Firebase has a document about creating a notification with image, but we should appeal to developer that we have an easier way to implement it.
(Or am I missing something? I thought @react-native-firebase/messaging doesn't have an out-of-box image support for notification, which need to create extension manually.)

[mikehardy]

Did you follow the links I sent?

[Pittan]

@mikehardy
Yes, I read #4085, #4089 and https://rnfirebase.io/messaging/server-integration#ios .

@davidepalazzo
Does changes from #4085 expected to support image without creating extension?

[helenaford]

I'm facing the same problem. Doesn't seem like the extension works out of the box without having to do additional steps, but not sure. @davidepalazzo I'm creating my own extension then trying to inherit the RNFBMessaging one but no luck.

[davidepalazzo]

Hi @Pittan. Yes, that was the intent of the PR. Although, it looks like it stopped working. I tested it with a fresh install – the payload comes through fine, the notification is displayed but the image isn't showing. Not too sure what changed since I pushed the code.

Hey @helenaford, I found that to make it work with you need to target FirebaseMessaging in your service extension and add a new target in the main Podfile. So the steps would be to:

1. From Xcode create a new Notification Service Extension
2. Add a pod to the target

target 'EXTENSION_NAME' do
  pod 'Firebase/Messaging', '~> VERSION_NUMBER'
end

3. Import FirebaseMessaging.h in the EXTENSION_NAME.m file

This is a solid solution and should work reliably.

@mikehardy, I'm happy to extend on the above steps and add it to the doc. I'll remove the previous code I added in favour of the native extension as I feel this is a better and more stable approach. Thoughts?

[mikehardy]

@davidepalazzo I trust your judgement and will happily work with you to ingest the change here, thanks for the offer

[davidepalazzo]

No worries @mikehardy, I'm more than happy to work on this change and have a PR within a few days.

In terms of structure, I'd probably move out the instructions from under Server Integration to its own section if that works for you guys. Perhaps something like messaging/notifications-with-image?

[mikehardy]

That sounds good

[davidepalazzo]

Hey @mikehardy, I just pushed 2 PRs:

• docs(messaging): add step-by-step instructions for image notification #4225 adds new bits to go in the doco
• fix(ios, messaging): remove UNNotificationServiceExtension in favour of local target extension #4226 removes the code that is going to become redundant after the documentation is updated

Cheers.

[vuongductuanktmt]

Please support for ipad! iphone worked but ipad not working.

[davidepalazzo]

@vuongductuanktmt try changing the version of the Notification Service Extension to a lower value:

It should match whatever version you're using in your main app target. iOS 10 is the minimum version required to make this work.

[Pittan]

@mikehardy
With the help of @davidepalazzo ,
I think we're good to close this issue!

Thank you for your cooperation!