{"componentChunkName":"component---src-templates-documentation-tsx","path":"/in-app-messaging/usage","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\": \"In App Messaging\",\n  \"description\": \"Installation and getting started with In App Messaging.\",\n  \"icon\": \"//firebase.google.com/static/images/products/icons/run_in_app_messaging.svg\",\n  \"next\": \"/installations/usage\",\n  \"previous\": \"/functions/usage\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Youtube = makeShortcode(\"Youtube\");\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(\"h1\", {\n    \"id\": \"installation\"\n  }, \"Installation\"), mdx(\"p\", null, \"This module requires that the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@react-native-firebase/app\"), \" module is already setup and installed. To install the \\\"app\\\" module, view the\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/\"\n  }, \"Getting Started\"), \" documentation.\"), mdx(\"p\", null, \"This module also requires that the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@react-native-firebase/analytics\"), \" module is already setup and installed. To install the \\\"analytics\\\" module, view it's \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/analytics/usage\"\n  }, \"Getting Started\"), \" documentation.\"), mdx(\"pre\", {\n    \"className\": \"language-bash\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"# Install & setup the app module\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"yarn\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), \" @react-native-firebase/app\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"# Install the in-app-messaging module\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"yarn\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), \" @react-native-firebase/in-app-messaging\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"# If you're developing your app using iOS, run this command\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token builtin class-name\"\n  }, \"cd\"), \" ios/ \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"&&\"), \" pod \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"install\"), \"\\n\")), mdx(\"p\", null, \"Note: in-app-messaging requires a minimum android gradle plugin version of 3.5.4 to compile or you will see \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AAPT\"), \" errors regarding unexpected XML with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<queries>\"), \" elements. However, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"react-native@0.63.4\"), \" still ships with a default of 3.5.3. If you have not already, you must update the line \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"classpath(\\\"com.android.tools.build:gradle:3.5.3\\\")\"), \"in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"android/build.gradle\"), \" to a minimum of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"3.5.4\"), \" for android builds to work.\"), mdx(\"p\", null, \"If you're using an older version of React Native without autolinking support, or wish to integrate into an existing project,\\nyou can follow the manual installation steps for \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/in-app-messaging/usage/installation/ios\"\n  }, \"iOS\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/in-app-messaging/usage/installation/android\"\n  }, \"Android\"), \".\"), mdx(\"h1\", {\n    \"id\": \"what-does-it-do\"\n  }, \"What does it do\"), mdx(\"p\", null, \"Firebase In-App Messaging helps you to engage your apps active users by sending them targeted, contextual messages that encourage\\nthem to use key app features. For example, you could send an in-app message to get users to subscribe, watch a video,\\ncomplete a level, or buy an item. You can customize messages as cards, banners, modals, or images, and set up triggers\\nso that they appear exactly when they'd benefit your users most.\"), mdx(Youtube, {\n    id: \"5MRKpvKV2pg\",\n    mdxType: \"Youtube\"\n  }), mdx(\"p\", null, \"React Native Firebase provides support for both native Android & iOS integration with a simple JavaScript API.\"), mdx(\"h1\", {\n    \"id\": \"usage\"\n  }, \"Usage\"), mdx(\"p\", null, \"Most of the set up occurs on \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://console.firebase.google.com/u/0/project/_/inappmessaging\"\n  }, \"Firebase Console\"), \" in the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"In-App Messaging\"), \" tab. You can create campaigns and customize elements such as Image, Banner, Modal & Cards to appear on\\npredefined events (e.g. purchase). This involves no code for the developer to implement. Any published campaigns from the\\nFirebase Console are automatically handled and displayed on your user's device.\"), mdx(\"p\", null, \"This module provides a JavaScript API to allow greater control of the displaying of these messages.\"), mdx(\"h1\", {\n    \"id\": \"limitations\"\n  }, \"Limitations\"), mdx(\"p\", null, \"According to github issue \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/firebase/firebase-ios-sdk/issues/4768\"\n  }, \"https://github.com/firebase/firebase-ios-sdk/issues/4768\"), \" Firebase In-App Messaging allows only 1 campaign per day on app foreground or app launch. This limit is to prevent you from accidentally overwhelming your users with non-contextually appropriate messages. However, if you use the contextual triggers (for example: Analytics event or programmatically triggered in-app-messaging campaigns), there is no daily rate limit.\"), mdx(\"h2\", {\n    \"id\": \"displaying-messages\"\n  }, \"Displaying Messages\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setMessagesDisplaySuppressed\"), \" method allows you to control when messages can/cannot be displayed. Below illustrates\\na use case for controlling the flow of messages:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"The suppressed state is not persisted between restarts, so ensure it is called as early as possible.\")), mdx(\"pre\", {\n    \"className\": \"language-jsx\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" inAppMessaging \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'@react-native-firebase/in-app-messaging'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"async\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"bootstrap\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"await\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"inAppMessaging\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"setMessagesDisplaySuppressed\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"async\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"onSetup\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"user\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"await\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setupUser\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"user\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Allow user to receive messages now setup is complete\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"inAppMessaging\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"setMessagesDisplaySuppressed\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\")), mdx(\"h1\", {\n    \"id\": \"firebasejson\"\n  }, \"firebase.json\"), mdx(\"h2\", {\n    \"id\": \"disable-collection-of-data\"\n  }, \"Disable collection of data\"), mdx(\"p\", null, \"In App Messaging can be further configured to enable or disable automatic data collection for Firebase In-App Messaging.\"), mdx(\"p\", null, \"This is useful for opt-in-first data flows, for example when dealing with GDPR compliance. This can be overridden in JavaScript.\\nThis is possible by setting the below noted property on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"firebase.json\"), \" file at the root of your project directory.\"), mdx(\"pre\", {\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// <project-root>/firebase.json\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"react-native\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"in_app_messaging_auto_collection_enabled\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"In App Messaging","description":"Installation and getting started with In App Messaging.","icon":"//firebase.google.com/static/images/products/icons/run_in_app_messaging.svg","noindex":null},"excerpt":"Installation This module requires that the  @react-native-firebase/app  module is already setup and installed. To install the \"app\" module…","tableOfContents":{"items":[{"url":"#installation","title":"Installation"},{"url":"#what-does-it-do","title":"What does it do"},{"url":"#usage","title":"Usage"},{"url":"#limitations","title":"Limitations","items":[{"url":"#displaying-messages","title":"Displaying Messages"}]},{"url":"#firebasejson","title":"firebase.json","items":[{"url":"#disable-collection-of-data","title":"Disable collection of data"}]}]},"headings":[{"depth":1,"value":"Installation"},{"depth":1,"value":"What does it do"},{"depth":1,"value":"Usage"},{"depth":1,"value":"Limitations"},{"depth":2,"value":"Displaying Messages"},{"depth":1,"value":"firebase.json"},{"depth":2,"value":"Disable collection of data"}],"parent":{"__typename":"File","relativePath":"in-app-messaging/usage/index.md"}},"next":{"frontmatter":{"title":"Installations"},"fields":{"slug":"/installations/usage"}},"previous":{"frontmatter":{"title":"Cloud Functions"},"fields":{"slug":"/functions/usage"}},"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":"2d3caec6-cfc0-555f-bc61-9e6708dac98b","next":"/installations/usage","previous":"/functions/usage"}},"staticQueryHashes":["3688227230"]}