{"componentChunkName":"component---src-templates-documentation-tsx","path":"/messaging/ios-notification-images","result":{"data":{"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"iOS Notification Images\",\n  \"description\": \"Displaying an image in an iOS notification.\",\n  \"next\": \"/messaging/server-integration\",\n  \"previous\": \"/messaging/notifications\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"This is a quick guide to display an image in an incoming notification. Android handles this out of the box so this extra setup is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"only necessary for iOS\"), \".\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"If you want to know more about the specifics of this setup read the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://firebase.google.com/docs/cloud-messaging/ios/send-image\"\n  }, \"official Firebase docs\"), \".\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\uD83D\\uDEA8 Before you start\"), \"\\nBe sure you already have Cloud Messaging installed and set up. In case you don't \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/messaging/usage\"\n  }, \"get started here\"), \".\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\uD83C\\uDFC1 Ready to start\"), \"\\nThe following steps will guide you through how to add a new target to your application to support payloads with an image. Open Xcode and let's get started.\"), mdx(\"h3\", {\n    \"id\": \"step-1---add-a-notification-service-extension\"\n  }, \"Step 1 - Add a notification service extension\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"From Xcode top menu go to: \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"File > New > Target...\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A modal will present a list of possible targets, scroll down or use the filter to select \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification Service Extension\"), \". Press \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Next\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Add a product name (use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ImageNotification\"), \" to follow along) and click \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Finish\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Enable the scheme by clicking \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Activate\"))), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/assets/docs/messaging/ios-notification-images-step-1.gif\",\n    \"alt\": \"step-1\"\n  })), mdx(\"h3\", {\n    \"id\": \"step-2---add-target-to-the-podfile\"\n  }, \"Step 2 - Add target to the Podfile\"), mdx(\"p\", null, \"Ensure that your new extension has access to Firebase/Messaging pod by adding it in the Podfile:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"From the Navigator open the Podfile: \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Pods > Podfile\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Scroll down to the bottom of the file and add\")), mdx(\"pre\", {\n    \"className\": \"language-ruby\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-Ruby\"\n  }, \"target \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'ImageNotification'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"do\"), \"\\n  use_frameworks\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token symbol\"\n  }, \":linkage\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token symbol\"\n  }, \":static\"), \"\\n  pod \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'Firebase/Messaging'\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"end\"), \"\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Install or update your pods using \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"pod install\"), \" from the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ios\"), \" folder\")), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/assets/docs/messaging/ios-notification-images-step-2.gif\",\n    \"alt\": \"step-2\"\n  })), mdx(\"h3\", {\n    \"id\": \"step-3---use-the-extension-helper-objective-c\"\n  }, \"Step 3 - Use the extension helper (Objective-C)\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"If you selected to create your extension as a Swift project, jump to the next section.\")), mdx(\"p\", null, \"At this point everything should still be running normally. This is the final step which is invoking the extension helper.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"From the navigator select your \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ImageNotification\"), \" extension\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"NotificationService.m\"), \" file\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"At the top of the file import \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"FirebaseMessaging.h\"), \" right after the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"NotificationService.h\"), \" as shown below\")), mdx(\"pre\", {\n    \"className\": \"language-diff\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"#import \\\"NotificationService.h\\\"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token inserted-sign inserted\"\n  }, \"+ #import \\\"FirebaseMessaging.h\\\"\\n\"))), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"then replace everything from line 25 to 28 with the extension helper\")), mdx(\"pre\", {\n    \"className\": \"language-diff\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token deleted-sign deleted\"\n  }, \"- // Modify the notification content here...\\n- self.bestAttemptContent.title = [NSString stringWithFormat:@\\\"%@ [modified]\\\", self.bestAttemptContent.title];\\n\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token deleted-sign deleted\"\n  }, \"- self.contentHandler(self.bestAttemptContent);\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token inserted-sign inserted\"\n  }, \"+ [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];\\n\"))), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/assets/docs/messaging/ios-notification-images-step-3.gif\",\n    \"alt\": \"step-3\"\n  })), mdx(\"h3\", {\n    \"id\": \"step-3---use-the-extension-helper-swift\"\n  }, \"Step 3 - Use the extension helper (Swift)\"), mdx(\"p\", null, \"At this point everything should still be running normally. This is the final step which is invoking the extension helper.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"From the navigator select your \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ImageNotification\"), \" extension\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"NotificationService.swift\"), \" file\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"At the top of the file import \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Firebase\"), \" right after the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"NotificationService\"), \" as shown below\")), mdx(\"pre\", {\n    \"className\": \"language-diff\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"import UserNotifications\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token inserted-sign inserted\"\n  }, \"+ import Firebase\\n\"), \"\\nclass NotificationService: UNNotificationServiceExtension {\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"then replace everything from line 19 to 23 with the extension helper\")), mdx(\"pre\", {\n    \"className\": \"language-diff\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token unchanged\"\n  }, \"        if let bestAttemptContent = bestAttemptContent {\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token deleted-sign deleted\"\n  }, \"-            // Modify the notification content here...\\n-            bestAttemptContent.title = \\\"\\\\(bestAttemptContent.title) [modified]\\\"\\n-\\n-            contentHandler(bestAttemptContent)\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token inserted-sign inserted\"\n  }, \"+            Messaging.serviceExtension()\\n+               .populateNotificationContent(bestAttemptContent, withContentHandler: contentHandler)\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token unchanged\"\n  }, \"        }\\n\"))), mdx(\"h2\", {\n    \"id\": \"all-done\"\n  }, \"All done\"), mdx(\"p\", null, \"Run the app and check it builds successfully \\u2013 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"make sure you have the correct target selected\"), \". Now you can use the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://console.firebase.google.com/u/0/project/_/notification\"\n  }, \"Notifications composer\"), \" to test sending notifications with an image (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"300KB\"), \" max size). You can also create custom notifications via \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://firebase.google.com/docs/cloud-messaging/http-server-ref\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"FCM HTTP\")), \" or \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.npmjs.com/package/firebase-admin\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"firebase-admin\")), \". Read this page to send \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/messaging/server-integration\"\n  }, \"messages from a server\"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"iOS Notification Images","description":"Displaying an image in an iOS notification.","icon":null,"noindex":null},"excerpt":"This is a quick guide to display an image in an incoming notification. Android handles this out of the box so this extra setup is  only…","tableOfContents":{"items":[{"items":[{"url":"#step-1---add-a-notification-service-extension","title":"Step 1 - Add a notification service extension"},{"url":"#step-2---add-target-to-the-podfile","title":"Step 2 - Add target to the Podfile"},{"url":"#step-3---use-the-extension-helper-objective-c","title":"Step 3 - Use the extension helper (Objective-C)"},{"url":"#step-3---use-the-extension-helper-swift","title":"Step 3 - Use the extension helper (Swift)"}]},{"url":"#all-done","title":"All done"}]},"headings":[{"depth":3,"value":"Step 1 - Add a notification service extension"},{"depth":3,"value":"Step 2 - Add target to the Podfile"},{"depth":3,"value":"Step 3 - Use the extension helper (Objective-C)"},{"depth":3,"value":"Step 3 - Use the extension helper (Swift)"},{"depth":2,"value":"All done"}],"parent":{"__typename":"File","relativePath":"messaging/ios-notification-images.md"}},"next":{"frontmatter":{"title":"Server Integration"},"fields":{"slug":"/messaging/server-integration"}},"previous":{"frontmatter":{"title":"Notifications"},"fields":{"slug":"/messaging/notifications"}},"sidebar":{"raw":"[[\"Getting Started\",\"/\"],[\"Migration Guide to v22\",\"/migrating-to-v22\"],[\"Migration Guide to v23\",\"/migrating-to-v23\"],[\"TypeScript\",\"/typescript\"],[\"Platforms\",\"/platforms\"],[\"Release Notes\",\"/releases\"],[\"FAQs and Tips\",\"/faqs-and-tips\"],[\"Feature Requests\",\"https://invertase.canny.io/react-native-firebase\"],[\"Contributing\",\"https://github.com/invertase/react-native-firebase/blob/main/CONTRIBUTING.md\"],[\"AI Logic\",[[\"Usage\",\"/ai/usage\"]],\"//firebase.google.com/static/images/icons/firebase-ai-logic.svg\"],[\"Analytics\",[[\"Usage\",\"/analytics/usage\"],[\"Screen Tracking\",\"/analytics/screen-tracking\"],[\"Building an Analytics Funnel\",\"https://blog.theodo.com/2018/01/building-google-analytics-funnel-firebase-react-native\"]],\"//firebase.google.com/static/images/products/icons/run_analytics.svg\"],[\"App Check\",[[\"Usage\",\"/app-check/usage\"]],\"//firebase.google.com/static/images/products/icons/build_app_check.svg\"],[\"App Distribution\",[[\"Usage\",\"/app-distribution/usage\"]],\"//firebase.google.com/static/images/products/icons/run_app_distribution.svg\"],[\"Authentication\",[[\"Usage\",\"/auth/usage\"],[\"Social Auth\",\"/auth/social-auth\"],[\"Phone Auth\",\"/auth/phone-auth\"],[\"OpenID Connect Auth\",\"/auth/oidc-auth\"],[\"Multi-factor Auth\",\"/auth/multi-factor-auth\"]],\"//firebase.google.com/static/images/products/icons/build_auth.svg\"],[\"Cloud Firestore\",[[\"Usage\",\"/firestore/usage\"],[\"Usage with Emulator\",\"/firestore/emulator\"],[\"Usage with FlatLists\",\"/firestore/usage-with-flatlists\"],[\"Implementing Pagination\",\"/firestore/pagination\"],[\"Building a \\\"TODO\\\" app\",\"https://invertase.io/blog/getting-started-with-cloud-firestore-on-react-native\"]],\"//firebase.google.com/static/images/products/icons/build_firestore.svg\"],[\"Cloud Functions\",[[\"Usage\",\"/functions/usage\"],[\"Writing & Deploying Functions\",\"/functions/writing-deploying-functions\"]],\"//firebase.google.com/static/images/products/icons/build_functions.svg\"],[\"Cloud Messaging\",[[\"Usage\",\"/messaging/usage\"],[\"iOS Project Setup\",\"/messaging/usage/ios-setup\"],[\"iOS Permissions\",\"/messaging/ios-permissions\"],[\"Notifications\",\"/messaging/notifications\"],[\"iOS Notification Images\",\"/messaging/ios-notification-images\"],[\"Server Integration\",\"/messaging/server-integration\"]],\"//firebase.google.com/static/images/products/icons/run_cloud_messaging.svg\"],[\"Cloud Storage\",[[\"Usage\",\"/storage/usage\"]],\"//firebase.google.com/static/images/products/icons/build_storage.svg\"],[\"Core / App\",[[\"Usage\",\"/app/usage\"],[\"JSON Config\",\"/app/json-config\"],[\"Utils\",\"/app/utils\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"Crashlytics\",[[\"Usage\",\"/crashlytics/usage\"],[\"Viewing crash reports\",\"/crashlytics/crash-reports\"]],\"//firebase.google.com/static/images/products/icons/run_crashlytics.svg\"],[\"Realtime Database\",[[\"Usage\",\"/database/usage\"],[\"Offline Support\",\"/database/offline-support\"],[\"Presence Detection\",\"/database/presence-detection\"]],\"//firebase.google.com/static/images/products/icons/build_realtime_database.svg\"],[\"In-App Messaging\",[[\"Usage\",\"/in-app-messaging/usage\"]],\"//firebase.google.com/static/images/products/icons/run_in_app_messaging.svg\"],[\"Installations\",[[\"Usage\",\"/installations/usage\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"ML\",[[\"Usage\",\"/ml/usage\"]],\"//firebase.google.com/static/images/products/icons/build_ml.svg\"],[\"Remote Config\",[[\"Usage\",\"/remote-config/usage\"]],\"//firebase.google.com/static/images/products/icons/run_remote_config.svg\"],[\"Performance Monitoring\",[[\"Usage\",\"/perf/usage\"],[\"Axios Integration\",\"/perf/axios-integration\"],[\"KY Integration\",\"/perf/ky-integration\"]],\"//firebase.google.com/static/images/products/icons/run_performance.svg\"],[\"VertexAi\",[[\"Usage\",\"/vertexai/usage\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"Legacy docs\",[[\"Migrating to v6\",\"/migrating-to-v6\"],[\"Legacy Docs (<= v5)\",\"https://v5.rnfirebase.io/docs/v5.x.x/getting-started\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"]]"}},"pageContext":{"id":"b972572b-28e1-5975-8654-b61a6195f743","next":"/messaging/server-integration","previous":"/messaging/notifications"}},"staticQueryHashes":["3688227230"]}