{"componentChunkName":"component---src-templates-documentation-tsx","path":"/analytics/screen-tracking","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\": \"Screen Tracking\",\n  \"description\": \"Setup Firebase Analytics to track your in-app screen flow.\",\n  \"previous\": \"/analytics/usage\",\n  \"next\": \"/app-check/usage\"\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, \"Standard React Native applications run inside a single \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Activity\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ViewController\"), \", meaning any screen changes won't be\\ntracked by the native Firebase SDKs. There are a number of ways to implement navigation within React Native apps,\\ntherefore there is no \\\"one fits all\\\" solution to screen tracking.\"), mdx(\"h1\", {\n    \"id\": \"react-navigation\"\n  }, \"React Navigation\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactnavigation.org/\"\n  }, \"React Navigation\"), \" library allows for various navigation techniques such as\\nStack, Tab, Native or even custom navigation. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"NavigationContainer\"), \" component which the library exposes provides\\naccess to the current navigation state when a screen changes, allowing you to use the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/reference/analytics#logScreenView\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"logScreenView\")), \"\\nmethod the Analytics library provides:\"), 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\"), \" analytics \", 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/analytics'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"NavigationContainer\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'@react-navigation/native'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\")), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\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 arrow operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" routeNameRef \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"React\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"useRef\"), 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  }, \"const\"), \" navigationRef \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"React\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"useRef\"), 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  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"NavigationContainer\"), \"\\n      ref\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"navigationRef\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      onReady\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\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 punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token arrow operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        routeNameRef\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"current\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" navigationRef\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"current\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"getCurrentRoute\"), 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 property-access\"\n  }, \"name\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      onStateChange\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"async\"), \" \", 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 arrow operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" previousRouteName \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" routeNameRef\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"current\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" currentRouteName \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" navigationRef\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"current\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"getCurrentRoute\"), 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 property-access\"\n  }, \"name\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"previousRouteName \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!==\"), \" currentRouteName\", 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  }, \"analytics\"), 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  }, \"logScreenView\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n            screen_name\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" currentRouteName\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n            screen_class\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" currentRouteName\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\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 punctuation\"\n  }, \";\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        routeNameRef\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"current\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" currentRouteName\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\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 operator\"\n  }, \">\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token spread operator\"\n  }, \"...\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"NavigationContainer\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\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 punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"default\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\")), mdx(\"p\", null, \"For a full working example, view the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactnavigation.org/docs/screen-tracking/\"\n  }, \"Screen tracking for analytics\"), \"\\ndocumentation on the React Navigation website.\"), mdx(\"h1\", {\n    \"id\": \"react-native-navigation\"\n  }, \"React Native Navigation\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/wix/react-native-navigation\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"wix/react-native-navigation\")), \" provides 100% native platform navigation\\nfor React Native apps. To manually track screens, you need to setup a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"componentDidAppear\"), \" event listener and manually call the\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/reference/analytics#logScreenView\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"logScreenView\")), \" method the Analytics library provides:\"), mdx(\"pre\", {\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" analytics \", 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/analytics'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"Navigation\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react-native-navigation'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"Navigation\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"events\"), 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  }, \"registerComponentDidAppearListener\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"async\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" componentName\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" componentType \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token arrow operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"componentType \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"===\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'Component'\"), 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  }, \"analytics\"), 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  }, \"logScreenView\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      screen_name\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" componentName\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      screen_class\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" componentName\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\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 punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\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 punctuation\"\n  }, \";\"), \"\\n\")), mdx(\"p\", null, \"To learn more, view the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://wix.github.io/react-native-navigation/api/events#componentdidappear\"\n  }, \"events documentation\"), \"\\non the React Native Navigation website.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Screen Tracking","description":"Setup Firebase Analytics to track your in-app screen flow.","icon":null,"noindex":null},"excerpt":"Standard React Native applications run inside a single  Activity / ViewController , meaning any screen changes won't be\ntracked by the…","tableOfContents":{"items":[{"url":"#react-navigation","title":"React Navigation"},{"url":"#react-native-navigation","title":"React Native Navigation"}]},"headings":[{"depth":1,"value":"React Navigation"},{"depth":1,"value":"React Native Navigation"}],"parent":{"__typename":"File","relativePath":"analytics/screen-tracking.md"}},"next":{"frontmatter":{"title":"App Check"},"fields":{"slug":"/app-check/usage"}},"previous":{"frontmatter":{"title":"Analytics"},"fields":{"slug":"/analytics/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":"83042640-32b4-5cb5-972c-bd152b887f8a","next":"/app-check/usage","previous":"/analytics/usage"}},"staticQueryHashes":["3688227230"]}