[📚] Issues while seting up iOS notification images - iOS Notification Images

[darlanhms]

trafficstars

Summary: I followed every step on iOS Notification Images section and I still had some issues building my application, I managed to solve em' but I don't know if it is worth documenting. (It is a expo bare workflow BTW). It wasn't an error with this library itself and it is probably some annoying ios configuration, I just think it is helpful to share if someone is having the same issues.

• Unable to integrate the following embedded targets with their respective host targets (a host target is a "parent" target which embeds a "child" target like a framework or extension)

This issue always occurs when I put target 'ImageNotification' do ... at the end of the file. I solved it by putting it before the last end tag.

• Cycle inside ...; building could produce unreliable results. Cycle details: → Target '...': ExtractAppIntentsMetadata

I solved it by clicking on xcode project, Targets -> Build Phases and dragging "Embed Frameworks" above "Compile Sources"

• 'sharedApplication' is unavailable: not available on iOS

I solved it by pasting the following code to Podfile. It disables that option on every pod.

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

• [Sandbox: bash(72986) deny(1) file-write-data /Users/XXX/ios/Pods/resources-to-copy-XXXShareExtension.txt

I solved it by going to xcode project Build Settings and setting User Script Sandboxing to 'No'

---

I'm not experienced at writing issues, if the issue is bad written or not related just close it.

[controtie]

Super helpful finding this post today. Thanks for sharing your findings!

[themtaysw]

hi @darlanhms so i followed your guide and its great and worked before but since i needed clean build i prebuild with expo and now this step fix:

'sharedApplication' is unavailable: not available on iOS (App Extension) - Use view controller based solutions where appropriate instead.

doesnt work, any suggestion?

my Podfile:

require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")

require 'json'
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}

ENV['RCT_NEW_ARCH_ENABLED'] = podfile_properties['newArchEnabled'] == 'true' ? '1' : '0'
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] = podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']

platform :ios, podfile_properties['ios.deploymentTarget'] || '13.4'
install! 'cocoapods',
  :deterministic_uuids => false

prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...), which will be excluded. To fix this,
# you can also exclude `react-native-flipper` in `react-native.config.js`
#
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
#   }
# }
# ```
flipper_config = FlipperConfiguration.disabled
if ENV['NO_FLIPPER'] == '1' then
  # Explicitly disabled through environment variables
  flipper_config = FlipperConfiguration.disabled
elsif podfile_properties.key?('ios.flipper') then
  # Configure Flipper in Podfile.properties.json
  if podfile_properties['ios.flipper'] == 'true' then
    flipper_config = FlipperConfiguration.enabled(["Debug", "Release"])
  elsif podfile_properties['ios.flipper'] != 'false' then
    flipper_config = FlipperConfiguration.enabled(["Debug", "Release"], { 'Flipper' => podfile_properties['ios.flipper'] })
  end
end

target 'matysw' do
  use_expo_modules!
  config = use_native_modules!

  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/..",
    # Note that if you have use_frameworks! enabled, Flipper will not work if enabled
    :flipper_configuration => flipper_config
  )

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )

    # This is necessary for Xcode 14, because it signs resource bundles by default
    # when building for devices.
    installer.target_installation_results.pod_target_installation_results
      .each do |pod_name, target_installation_result|
      target_installation_result.resource_bundle_targets.each do |resource_bundle_target|
        resource_bundle_target.build_configurations.each do |config|
          config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
        end
      end
    end
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'
      end
    end
  end

  post_integrate do |installer|
    begin
      expo_patch_react_imports!(installer)
    rescue => e
      Pod::UI.warn e
    end
  end
  
  target 'ImageNotification' do
    pod 'Firebase/Messaging', '~> 10.23.1'
  end
end

[JamesZhao2022]

Thank you so much for help, I did everything to fix the issue. Build and run all works, but the image didn't show, did you do anything to make the image show in app notifcation?

[darlanhms]

@JamesZhao2022 another thing that I had to do was unbind this framework and bind again (click on it and - and add the same one again) (it should create another build phases there you should check if it is correctly ordered again)

It is important to have it as "Do Not Embed" cause you'll have problems sending it to app store later.

[Jahanzeb009]

by following these instructions, the build error fixed but only notifications with images still not showing

[sntg-p]

I also had these problems (except the sharedApplication one) and still can't make images appear on the notification. Even though the Notification Service extension is running (I'm modifying the title and it appears in my device).

Maybe it is a problem of firebase-ios-sdk?

[mayur-bhandari]

I also had these problems (except the sharedApplication one) and still can't make images appear on the notification. Even though the Notification Service extension is running (I'm modifying the title and it appears in my device).

Maybe it is a problem of firebase-ios-sdk?

I tried to update the title but it is not appearing on my device. Can you please share your Notification Service file?

[sntg-p]

It's just the autogenerated one with the populateNotificationContent from Firebase.

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

    // self.contentHandler(self.bestAttemptContent);
    [[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 my case, I noticed it is working but it seems like URL has to specify the image extension. As in:

• https://myhost.com/image won't work
• https://googledimage.com/image.jpg will work

Not really sure if this is the same problem other people are having, but it is indeed a different behavior from Android where both URLs would work.

[krisnapy]

Summary: I followed every step on iOS Notification Images section and I still had some issues building my application, I managed to solve em' but I don't know if it is worth documenting. (It is a expo bare workflow BTW). It wasn't an error with this library itself and it is probably some annoying ios configuration, I just think it is helpful to share if someone is having the same issues.

• Unable to integrate the following embedded targets with their respective host targets (a host target is a "parent" target which embeds a "child" target like a framework or extension)

This issue always occurs when I put target 'ImageNotification' do ... at the end of the file. I solved it by putting it before the last end tag.

• Cycle inside ...; building could produce unreliable results. Cycle details: → Target '...': ExtractAppIntentsMetadata

I solved it by clicking on xcode project, Targets -> Build Phases and dragging "Embed Frameworks" above "Compile Sources"

• 'sharedApplication' is unavailable: not available on iOS

I solved it by pasting the following code to Podfile. It disables that option on every pod.

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

• [Sandbox: bash(72986) deny(1) file-write-data /Users/XXX/ios/Pods/resources-to-copy-XXXShareExtension.txt

I solved it by going to xcode project Build Settings and setting User Script Sandboxing to 'No'

I'm not experienced at writing issues, if the issue is bad written or not related just close it.

I followed the guide provided by @darlanhms to add the APPLICATION_EXTENSION_API_ONLY configuration in my Podfile. However, after adding this code, I encountered the following warning for several pod libraries on github action deployment: warning: The iOS deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.2.99.

[krisnapy]

I've tried setting the IPHONEOS_DEPLOYMENT_TARGET directly in the Podfile using the following code: config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'

And got another error from xcode:

[binle]

I got the same

hi @darlanhms so i followed your guide and its great and worked before but since i needed clean build i prebuild with expo and now this step fix:

'sharedApplication' is unavailable: not available on iOS (App Extension) - Use view controller based solutions where appropriate instead.

doesnt work, any suggestion?

my Podfile:

require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")

require 'json'
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}

ENV['RCT_NEW_ARCH_ENABLED'] = podfile_properties['newArchEnabled'] == 'true' ? '1' : '0'
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] = podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']

platform :ios, podfile_properties['ios.deploymentTarget'] || '13.4'
install! 'cocoapods',
  :deterministic_uuids => false

prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...), which will be excluded. To fix this,
# you can also exclude `react-native-flipper` in `react-native.config.js`
#
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
#   }
# }
# ```
flipper_config = FlipperConfiguration.disabled
if ENV['NO_FLIPPER'] == '1' then
  # Explicitly disabled through environment variables
  flipper_config = FlipperConfiguration.disabled
elsif podfile_properties.key?('ios.flipper') then
  # Configure Flipper in Podfile.properties.json
  if podfile_properties['ios.flipper'] == 'true' then
    flipper_config = FlipperConfiguration.enabled(["Debug", "Release"])
  elsif podfile_properties['ios.flipper'] != 'false' then
    flipper_config = FlipperConfiguration.enabled(["Debug", "Release"], { 'Flipper' => podfile_properties['ios.flipper'] })
  end
end

target 'matysw' do
  use_expo_modules!
  config = use_native_modules!

  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/..",
    # Note that if you have use_frameworks! enabled, Flipper will not work if enabled
    :flipper_configuration => flipper_config
  )

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )

    # This is necessary for Xcode 14, because it signs resource bundles by default
    # when building for devices.
    installer.target_installation_results.pod_target_installation_results
      .each do |pod_name, target_installation_result|
      target_installation_result.resource_bundle_targets.each do |resource_bundle_target|
        resource_bundle_target.build_configurations.each do |config|
          config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
        end
      end
    end
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'
      end
    end
  end

  post_integrate do |installer|
    begin
      expo_patch_react_imports!(installer)
    rescue => e
      Pod::UI.warn e
    end
  end
  
  target 'ImageNotification' do
    pod 'Firebase/Messaging', '~> 10.23.1'
  end
end

I got the same error. I moved the target ImageNotification to the end of file and it worked.

[tommyDoroGit]

I too cannot get an Image to appear on a IOS push notification. I'm running the following;

package.json

    "react-native": "0.69.12",
    "@react-native-firebase/app": "17.5.0",
    "@react-native-firebase/messaging": "17.5.0",

Podfile

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

Curiously, I get this error in Xcode where the FirebaseMessaging.h import is failing despite the pod being located in the project. See below

Can anyone confirm that the IOS image support actually works?

[binle]

I too cannot get an Image to appear on a IOS push notification. I'm running the following;

package.json

    "react-native": "0.69.12",
    "@react-native-firebase/app": "17.5.0",
    "@react-native-firebase/messaging": "17.5.0",

Podfile

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

Curiously, I get this error in Xcode where the FirebaseMessaging.h import is failing despite the pod being located in the project. See below

Can anyone confirm that the IOS image support actually works?

It still worked for me. In your case, I think you missed pod install my client's app:

[tommyDoroGit]

Thanks for sending through @binle.

The pod is in my Podfile.lock so it appears the pod installed correctly

[tommyDoroGit]

A further update, I managed to get the Podfile's to properly install, resulting in the below config in Xcode. After a successful build, I'm still unable to see the notification images.

[abhisheksoni27]

@Salakar @mikehardy @Lyokone Do we have any update on this?

[irvinsingGitHub]

Encountered the same error. Then realised that I misunderstood the instructions regarding the pod file.

Instructions say to paste the following code "at the end of the pod file".

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

But what it actually means is that you have to paste it outside of the main target block in the pod file:

target 'yourMainApp' do use_expo_modules! config = use_native_modules!

... rest of code...

end

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

If you paste the the above target 'ImageNotification' block of code within the main target block (which is what i did initially), you will encounter build error in Xcode 'sharedApplication' is unavailable: not available on iOS.

So the solution is to ensure your pod file is configured as above. The new target block must be OUTSIDE of the main target block (i.e. 'at the end of the pod file').

Then quit Xcode. Then in the terminal, go to project folder --> cd iOS --> pod deintegrate --> then pod install.

Then open Xcode, wait for it re-index files, clean folder, clear issues, then rebuild the app.

[Santhosh-Umapathi]

The missing information was to create new Bundle Id and Provisioning profiles

Steps

1. Create Notification Image Service
2. Provide New Bundle Id and Provisioning Profiles
3. Update Podfile same as the docs, put it at the end of the file, not inside the main target
4. Clear pods and deintegrate and pod install.

[skizzo]

The missing information was to create new Bundle Id and Provisioning profiles

Steps

1. Create Notification Image Service
2. Provide New Bundle Id and Provisioning Profiles
3. Update Podfile same as the docs, put it at the end of the file, not inside the main target
4. Clear pods and deintegrate and pod install.

@Santhosh-Umapathi could you be a bit more specific what you mean by "Provide New Bundle Id and Provisioning Profiles"? Thank you!

[skizzo]

Encountered the same error. Then realised that I misunderstood the instructions regarding the pod file.

Instructions say to paste the following code "at the end of the pod file".

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

But what it actually means is that you have to paste it outside of the main target block in the pod file:

target 'yourMainApp' do use_expo_modules! config = use_native_modules!

... rest of code...

end

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

If you paste the the above target 'ImageNotification' block of code within the main target block (which is what i did initially), you will encounter build error in Xcode 'sharedApplication' is unavailable: not available on iOS.

So the solution is to ensure your pod file is configured as above. The new target block must be OUTSIDE of the main target block (i.e. 'at the end of the pod file').

Then quit Xcode. Then in the terminal, go to project folder --> cd iOS --> pod deintegrate --> then pod install.

Then open Xcode, wait for it re-index files, clean folder, clear issues, then rebuild the app.

@irvinsingGitHub When following your advice, I get the error that "FirebaseMessaging.h" can't be found. How did you manage to resolve this? Thanks :)

[darlanhms]

Encountered the same error. Then realised that I misunderstood the instructions regarding the pod file. Instructions say to paste the following code "at the end of the pod file". target 'ImageNotification' do use_frameworks! :linkage => :static pod 'Firebase/Messaging' end But what it actually means is that you have to paste it outside of the main target block in the pod file: target 'yourMainApp' do use_expo_modules! config = use_native_modules! ... rest of code... end target 'ImageNotification' do use_frameworks! :linkage => :static pod 'Firebase/Messaging' end If you paste the the above target 'ImageNotification' block of code within the main target block (which is what i did initially), you will encounter build error in Xcode 'sharedApplication' is unavailable: not available on iOS. So the solution is to ensure your pod file is configured as above. The new target block must be OUTSIDE of the main target block (i.e. 'at the end of the pod file'). Then quit Xcode. Then in the terminal, go to project folder --> cd iOS --> pod deintegrate --> then pod install. Then open Xcode, wait for it re-index files, clean folder, clear issues, then rebuild the app.

@irvinsingGitHub When following your advice, I get the error that "FirebaseMessaging.h" can't be found. How did you manage to resolve this? Thanks :)

You forgot to follow Step 2 (Mainly the third line of code) and run pod-install after it

[tommyDoroGit]

I can confirm the I've ran pod install. The ImageNotification.framework is attached to the Notification service extension correctly.

All the steps outlined in the docs for IOS images has been followed and Android images are working fine when testing in Firebase.

Is there further configuration required? Maybe something missing in Signing & Capability? This is a bare React Native project and I'm running React Native 0.74.1 & @react-native-firebase/messaging 20.4.0.