PageSourceSearch

https://reactnavigation.org/docs/getting-started/

html reactnavigation.org collected 2026-10-02 02:52:32 UTC 77,658 bytes, 37 lines download raw bytes

1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-7.x docs-doc-page docs-doc-id-getting-started" data-has-hydrated=false><head><meta charset=UTF-8><meta name=generator content="Docusaurus v3.10.2"><title data-rh=true>Getting started | React Navigation</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"/><meta data-rh=true name=twitter:card content=summary_large_image /><meta data-rh=true property=og:url content=https://reactnavigation.org/docs/getting-started /><meta data-rh=true property=og:locale content=en /><meta data-rh=true name=docusaurus_locale content=en /><meta data-rh=true name=docsearch:language content=en /><meta data-rh=true name=docusaurus_version content=7.x /><meta data-rh=true name=docusaurus_tag content=docs-default-7.x /><meta data-rh=true name=docsearch:version content=7.x /><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-7.x /><meta data-rh=true property=og:title content="Getting started | React Navigation"/><meta data-rh=true name=description content="React Navigation is a navigation library for React Native and Web. It provides routing logic and UI common on mobile apps and PWAs with type-safe navigation, built-in universal links on mobile, and browser history integration on the web."/><meta data-rh=true property=og:description content="React Navigation is a navigation library for React Native and Web. It provides routing logic and UI common on mobile apps and PWAs with type-safe navigation, built-in universal links on mobile, and browser history integration on the web."/><link data-rh=true rel=icon href=/img/spiro.svg /><link data-rh=true rel=canonical href=https://reactnavigation.org/docs/getting-started /><link data-rh=true rel=alternate href=https://reactnavigation.org/docs/getting-started hreflang=en /><link data-rh=true rel=alternate href=https://reactnavigation.org/docs/getting-started hreflang=x-default /><link data-rh=true rel=preconnect href=https://QCWXRU195A-dsn.algolia.net crossorigin=anonymous /><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Navigation RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Navigation Atom Feed"><link rel=search type=application/opensearchdescription+xml title="React Navigation" href=/opensearch.xml>
1<script>window.ga=window.ga||function(){(window.ga.q=window.ga.q||[]).push(arguments)},window.ga.l=Date.now(),window.ga("create","UA-10128745-16","auto"),window.ga("send","pageview");var loadAnalytics=function(){if(!loadAnalytics.done){loadAnalytics.done=!0,clearTimeout(analyticsTimer),window.removeEventListener("pointerdown",loadAnalytics),window.removeEventListener("keydown",loadAnalytics),window.removeEventListener("scroll",loadAnalytics);var n=document.createElement("script");n.async=!0,n.src="https://www.google-analytics.com/analytics.js",document.head.appendChild(n)}};window.addEventListener("pointerdown",loadAnalytics,{once:!0}),window.addEventListener("keydown",loadAnalytics,{once:!0}),window.addEventListener("scroll",loadAnalytics,{once:!0,passive:!0});var analyticsTimer=setTimeout(loadAnalytics,5e3)</script>
1<link rel=stylesheet href=/assets/css/styles.40190bfa.css />
1<script src=/assets/js/runtime~main.608ea25a.js defer></script>
1<script src=/assets/js/main.43af5266.js defer></script>
1    <meta property="og:image" content="https://reactnavigation.org/img/og-image.png">
2    <meta name="twitter:image" content="https://reactnavigation.org/img/og-image.png">
3  </head><body><svg style="display: none;"><defs>
4<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
5</defs></svg>
6<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme-8fb")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script>
6<div id=__docusaurus><link rel=preload as=image href=/img/spiro.svg /><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/spiro.svg alt="React Navigation Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height=300 width=294 /><img src=/img/spiro.svg alt="React Navigation Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height=300 width=294 /></div><b class="navbar__title text--truncate">React Navigation</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a aria-current=page class="navbar__link active" aria-haspopup=true aria-expanded=false role=button href=/docs/getting-started>7.x</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/8.x/getting-started>8.x</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>7.x</a><li><a class=dropdown__link href=/docs/6.x/getting-started>6.x</a><li><a class=dropdown__link href=/docs/5.x/getting-started>5.x</a><li><a class=dropdown__link href=/docs/4.x/getting-started>4.x</a><li><a class=dropdown__link href=/docs/3.x/getting-started>3.x</a><li><a class=dropdown__link href=/docs/2.x/getting-started>2.x</a><li><a class=dropdown__link href=/docs/1.x/getting-started>1.x</a></ul></div><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/getting-started>Docs</a><a class="navbar__item navbar__link" href=/blog>Blog</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Help</a><ul class=dropdown__menu><li><a href=https://github.com/react-navigation/react-navigation/issues target=_blank rel="noopener noreferrer" class=dropdown__link>Issues<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://react-navigation.canny.io/feature-requests target=_blank rel="noopener noreferrer" class=dropdown__link>Feature Requests<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://www.reactiflux.com target=_blank rel="noopener noreferrer" class=dropdown__link>Reactiflux Discord<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://stackoverflow.com/questions/tagged/react-navigation target=_blank rel="noopener noreferrer" class=dropdown__link>Stack Overflow<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a class=dropdown__link href=/docs/troubleshooting>Troubleshooting</a><li><a class=dropdown__link href=/docs/contributing>Contributing</a></ul></div><a href=https://x.com/reactnavigation target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-social-link navbar-social-link-x" aria-label=X></a><a href=https://github.com/react-navigation/react-navigation target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-social-link navbar-social-link-github" aria-label=GitHub></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,
61S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts=Meta+k><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 24 24" aria-hidden=true><circle cx=11 cy=11 r=8 stroke=currentColor fill=none stroke-width=1.4 /><path d="m21 21-4.3-4.3" stroke=currentColor fill=none stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M14%2015a2%202%200%200%200-4%200%22%2F%3E%3Cpath%20d%3D%22M2.5%2013%205%207c.7-1.3%201.4-2%203-2%22%2F%3E%3Cpath%20d%3D%22M21.5%2013%2019%207c-.7-1.3-1.5-2-3-2%22%2F%3E%3C%2Fsvg%3E")' href=/docs/getting-started><span class=categoryLinkLabel_W154>Fundamentals</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/getting-started><span class=linkLabel_WmDU>Getting started</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/hello-react-navigation><span class=linkLabel_WmDU>Hello React Navigation</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigating><span class=linkLabel_WmDU>Moving between screens</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/params><span class=linkLabel_WmDU>Passing parameters to routes</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/headers><span class=linkLabel_WmDU>Configuring the header bar</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/header-buttons><span class=linkLabel_WmDU>Header buttons</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/nesting-navigators><span class=linkLabel_WmDU>Nesting navigators</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-lifecycle><span class=linkLabel_WmDU>Navigation lifecycle</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/next-steps><span class=linkLabel_WmDU>Next steps</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l1.4-.8%22%2F%3
6E%3Cpath%20d%3D%22M16.5%209.4%207.55%204.24%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3Cg%20transform%3D%22translate(0%2C-2)%22%3E%3Cpath%20d%3D%22m16%2019%203-3%203%203%22%2F%3E%3Cpath%20d%3D%22M19%2022v-6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")' href=/docs/upgrade-guides><span class=categoryLinkLabel_W154>Migration guides</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/upgrade-guides><span class=linkLabel_WmDU>Upgrade Guides</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/upgrading-from-6.x><span class=linkLabel_WmDU>Upgrading from 6.x</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/from-expo-router><span class=linkLabel_WmDU>Moving from Expo Router</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.582a.5.5%200%200%201%200%20.962L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3
6E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E")' href=/docs/typescript><span class=categoryLinkLabel_W154>Features</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/typescript><span class=linkLabel_WmDU>Configuring TypeScript</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/testing><span class=linkLabel_WmDU>Writing tests</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/deep-linking><span class=linkLabel_WmDU>Deep linking</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/configuring-links><span class=linkLabel_WmDU>Configuring links</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/themes><span class=linkLabel_WmDU>Customizing Themes</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/state-persistence><span class=linkLabel_WmDU>State persistence</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/web-support><span class=linkLabel_WmDU>Web support</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/server-rendering><span class=linkLabel_WmDU>Server rendering</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E")' href=/docs/auth-flow><span class=categoryLinkLabel_W154>Tutorials</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/auth-flow><span class=linkLabel_WmDU>Authentication flows</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/handling-safe-area><span class=linkLabel_WmDU>Supporting safe areas</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/customizing-tabbar><span class=linkLabel_WmDU>Customizing tab bar</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/hiding-tabbar-in-screens><span class=linkLabel_WmDU>Hiding tab bar in screens</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/status-bar><span class=linkLabel_WmDU>Status bar configuration</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/modal><span class=linkLabel_WmDU>Opening a modal</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/multiple-drawers><span class=linkLabel_WmDU>Multiple drawers</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/screen-options-resolution><span class=linkLabel_WmDU>
6Options with nested navigators</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/custom-android-back-button-handling><span class=linkLabel_WmDU>Android back button behavior</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/shared-element-transitions><span class=linkLabel_WmDU>Shared element transitions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/preventing-going-back><span class=linkLabel_WmDU>Preventing going back</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/function-after-focusing-screen><span class=linkLabel_WmDU>Call a function on focus</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-ref><span class=linkLabel_WmDU>Navigation ref</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/screen-tracking><span class=linkLabel_WmDU>Screen tracking</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203H7a2%202%200%200%200-2%202v5a2%202%200%200%201-2%202%202%202%200%200%201%202%202v5c0%201.1.9%202%202%202h1%22%2F%3E%3Cpath%20d%3D%22M16%2021h1a2%202%200%200%200%202-2v-5c0-1.1.9-2%202-2a2%202%200%200%201-2-2V5a2%202%200%200%200-2-2h-1%22%2F%3E%3C%2Fsvg%3E")' href=/docs/static-configuration><span class=categoryLinkLabel_W154>Static config</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/static-configuration><span class=linkLabel_WmDU>Static configuration</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/static-vs-dynamic><span class=linkLabel_WmDU>Static vs Dynamic API</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/combine-static-with-dynamic><span class=linkLabel_WmDU>Mixing Static & Dynamic APIs</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolygon%20points%3D%2216.24%207.76%2014.12%2014.12%207.76%2016.24%209.88%209.88%2016.24%207.76%22%2F%3E%3C%2Fsvg%3E")' href=/docs/stack-navigator><span class=categoryLinkLabel_W154>Navigators</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/stack-navigator><span class=linkLabel_WmDU>Stack</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/native-stack-navigator><span class=linkLabel_WmDU>Native Stack</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bottom-tab-navigator><span class=linkLabel_WmDU>Bottom Tabs</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/native-bottom-tab-navigator><span class=linkLabel_WmDU>Native Bottom Tabs</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawer-navigator><span class=linkLabel_WmDU>Drawer</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/material-top-tab-navigator><span class=linkLabel_WmDU>Material Top Tabs</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%221%202%2022%2022%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M10%2021V8a1%201%200%200%200-1-1H4a1%201%200%200%200-1%201v12a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-5a1%201%200%200%200-1-1H3%22%2F%3
6E%3C%2Fsvg%3E")' href=/docs/devtools><span class=categoryLinkLabel_W154>Libraries</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/devtools><span class=linkLabel_WmDU>Developer tools</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/elements><span class=linkLabel_WmDU>Elements</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/tab-view><span class=linkLabel_WmDU>Tab View</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawer-layout><span class=linkLabel_WmDU>Drawer Layout</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3
6E%3Cpath%20d%3D%22m10%2010-2%202%202%202%22%2F%3E%3Cpath%20d%3D%22m14%2014%202-2-2-2%22%2F%3E%3C%2Fsvg%3E")' href=/docs/navigation-container><span class=categoryLinkLabel_W154>API reference</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-container><span class=linkLabel_WmDU>NavigationContainer</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/server-container><span class=linkLabel_WmDU>ServerContainer</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigator><span class=linkLabel_WmDU>Navigator</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/group><span class=linkLabel_WmDU>Group</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/screen><span class=linkLabel_WmDU>Screen</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/screen-options><span class=linkLabel_WmDU>Options for screens</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/route-object><span class=linkLabel_WmDU>Route object</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-object><span class=linkLabel_WmDU>Navigation object</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-context><span class=linkLabel_WmDU>Navigation context</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-events><span class=linkLabel_WmDU>Navigation events</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/link><span class=linkLabel_WmDU>Link</span></a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/use-navigation><span class=categoryLinkLabel_W154>Hooks</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-navigation><span class=linkLabel_WmDU>useNavigation</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-route><span class=linkLabel_WmDU>useRoute</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-navigation-state><span class=linkLabel_WmDU>useNavigationState</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-focus-effect><span class=linkLabel_WmDU>useFocusEffect</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-is-focused><span class=linkLabel_WmDU>useIsFocused</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-prevent-remove><span class=linkLabel_WmDU>usePreventRemove</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-route-path><span class=linkLabel_WmDU>useRoutePath</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-link-to><span class=linkLabel_WmDU>useLinkTo</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-link-props><span class=linkLabel_WmDU>useLinkProps</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-link-builder><span class=linkLabel_WmDU>useLinkBuilder</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-scroll-to-top><span class=linkLabel_WmDU>useScrollToTop</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/use-theme><span class=linkLabel_WmDU>useTheme</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/navigation-actions><span class=categoryLinkLabel_W154>Actions</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-actions><span class=linkLabel_WmDU>CommonActions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/stack-actions><span class=linkLabel_WmDU>StackActions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawer-actions><span class=linkLabel_WmDU>DrawerActions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/tab-actions><span class=linkLabel_WmDU>TabActions</span></a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%228%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M17%2014v7%22%2F%3E%3Cpath%20d%3D%22M7%2014v7%22%2F%3E%3Cpath%20d%3D%22M17%203v3%22%2F%3
6E%3Cpath%20d%3D%22M7%203v3%22%2F%3E%3Cpath%20d%3D%22M10%2014%202.3%206.3%22%2F%3E%3Cpath%20d%3D%22m14%206%207.7%207.7%22%2F%3E%3Cpath%20d%3D%22m8%206%208%208%22%2F%3E%3C%2Fsvg%3E")' href=/docs/navigation-state><span class=categoryLinkLabel_W154>Advanced</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation-state><span class=linkLabel_WmDU>Navigation state</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/custom-routers><span class=linkLabel_WmDU>Custom routers</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/custom-navigators><span class=linkLabel_WmDU>Custom navigators</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/standard-navigator><span class=linkLabel_WmDU>Standard navigator</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22%2F%3E%3Cpath%20d%3D%22M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22%2F%3E%3C%2Fsvg%3E")' href=/docs/community-solutions><span class=categoryLinkLabel_W154>Ecosystem</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/community-solutions><span class=linkLabel_WmDU>Community solutions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/community-navigators><span class=linkLabel_WmDU>Community navigators</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/community-libraries><span class=linkLabel_WmDU>Community libraries</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/more-resources><span class=linkLabel_WmDU>More resources</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true data-category-icon=true style='--category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202H2v10l9.29%209.29c.94.94%202.48.94%203.42%200l6.58-6.58c.94-.94.94-2.48%200-3.42L12%202Z%22%2F%3E%3Cpath%20d%3D%22M7%207h.01%22%2F%3E%3C%2Fsvg%3E")' href=/docs/glossary-of-terms><span class=categoryLinkLabel_W154>Meta</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/glossary-of-terms><span class=linkLabel_WmDU>Glossary of terms</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/troubleshooting><span class=linkLabel_WmDU>Troubleshooting</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/pitch><span class=linkLabel_WmDU>Pitch & anti-pitch</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/used-by><span class=linkLabel_WmDU>Apps using React Navigation</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contributing><span class=linkLabel_WmDU>Contributing</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/llms><span class=linkLabel_WmDU>LLMs</span></a></ul></ul></nav></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_VOVn"><div class=docItemContainer_Djhp><article><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header class=header__dxZ><h1>Getting started</h1><div class=container_zC1j><button type=button class=button_FEwT title="Copy page" aria-expanded=false aria-haspopup=menu><span class=iconContainer_KvhL><svg class="icon_NQGV hidden_w8dW" xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polyline points="20 6 9 17 4 12"/></svg><svg class="icon_NQGV visible_HBoJ" xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect x=9 y=9 width=13 height=13 rx=2 ry=2 /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>Copy page<svg class="chevron_ilJg " xmlns=http://www.w3.org/2000/svg width=12 height=12 viewB
6ox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polyline points="6 9 12 15 18 9"/></svg></button></div></header><p>React Navigation is a navigation library for React Native and Web. It provides routing logic and UI common on mobile apps and PWAs with type-safe navigation, built-in universal links on mobile, and browser history integration on the web.</p>
7<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=starter-template>Starter template<a href=#starter-template class=hash-link aria-label="Direct link to Starter template" title="Direct link to Starter template" translate=no>​</a></h2>
8<p>You can use the <a href=https://github.com/react-navigation/template target=_blank rel="noopener noreferrer" class="">React Navigation template</a> to quickly set up a new project:</p>
9<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">npx create-expo-app@latest </span><span class="token parameter variable" style="color:hsl(26, 100%, 29%)">--template</span><span class="token plain"> react-navigation/template</span><br/></div></code></pre></div></div>
10<p>This creates a new Expo project with React Navigation already installed and configured. See the project's <code>README.md</code> for more information, then move on to <a href=#setting-up-react-navigation class="">Setting up React Navigation</a>.</p>
11<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=installation>Installation<a href=#installation class=hash-link aria-label="Direct link to Installation" title="Direct link to Installation" translate=no>​</a></h2>
12<p>The <code>@react-navigation/native</code> package contains the core functionality of React Navigation.</p>
13<p>In your project directory, run:</p>
14<div class="theme-tabs-container tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/npm.svg alt="" width=16 height=16 />npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/yarn.svg alt="" width=16 height=16 />yarn<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/pnpm.svg alt="" width=16 height=16 />pnpm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/bun.svg alt="" width=16 height=16 />bun</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token function" style="color:hsl(256, 54%, 50%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">install</span><span class="token plain"> @react-navigation/native</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token function" style="color:hsl(256, 54%, 50%)">yarn</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">add</span><span class="token plain"> @react-navigation/native</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token function" style="color:hsl(256, 54%, 50%)">pnpm</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">add</span><span class="token plain"> @react-navigation/native</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">bun </span><span class="token function" style="color:hsl(256, 54%, 50%)">add</span><span class="token plain"> @react-navigation/native</span><br/></div></code></pre></div></div></div></div></div>
15<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed=true><summary>Minimum requirements</summary><div><div class=collapsibleContent_i85q><ul>
16<li class=""><code>react-native</code> >= 0.72.0</li>
17<li class=""><code>expo</code> >= 52 (if you use <a href=https://expo.dev/go target=_blank rel="noopener noreferrer" class="">Expo Go</a>)</li>
18<li class=""><code>typescript</code> >= 5.0.0 (if you use TypeScript)</li>
19</ul></div></div></details>
20<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=installing-dependencies>Installing dependencies<a href=#installing-dependencies class=hash-link aria-label="Direct link to Installing dependencies" title="Direct link to Installing dependencies" translate=no>​</a></h3>
21<p>Next, install the dependencies used by most navigators: <a href=https://github.com/software-mansion/react-native-screens target=_blank rel="noopener noreferrer" class=""><code>react-native-screens</code></a> and <a href=https://github.com/th3rdwave/react-native-safe-area-context target=_blank rel="noopener noreferrer" class=""><code>react-native-safe-area-context</code></a>.</p>
22<div class="theme-tabs-container tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">Expo<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Community CLI</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><p>In your project directory, run:<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">
22npx expo </span><span class="token function" style="color:hsl(256, 54%, 50%)">install</span><span class="token plain"> react-native-screens react-native-safe-area-context</span><br/></div></code></pre></div></div><p>This will install versions of these libraries that are compatible with your Expo SDK version.</div><div role=tabpanel class=tabItem_Ymn6 hidden><p>In your project directory, run:<div class="theme-tabs-container tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/npm.svg alt="" width=16 height=16 />npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/yarn.svg alt="" width=16 height=16 />yarn<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/pnpm.svg alt="" width=16 height=16 />pnpm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP"><img decoding=async loading=lazy class="pm-icon img_ev3q" src=/assets/pm/bun.svg alt="" width=16 height=16 />bun</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token function" style="color:hsl(256, 54%, 50%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">install</span><span class="token plain"> react-native-screens react-native-safe-area-context</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token function" style="color:hsl(256, 54%, 50%)">yarn</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">add</span><span class="token plain"> react-native-screens react-native-safe-area-context</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token function" style="color:hsl(256, 54%, 50%)">pnpm</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">add</span><span class="token plain"> react-native-screens react-native-safe-area-context</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">bun </span><span class="token function" style="color:hsl(256, 54%, 50%)">add</span><span class="token plain"> react-native-screens react-native-safe-area-context</span><br/></div></code></pre></div></div></div></div></div><p>If you're on a Mac and developing for iOS, install the pods via <a href=https://cocoapods.org/ target=_blank rel="noopener noreferrer" class="">Cocoapods</a> to complete the linking:<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">
22npx pod-install ios</span><br/></div></code></pre></div></div><h4 class="anchor anchorTargetStickyNavbar_Vzrq" id=configuring-react-native-screens-on-android>Configuring <code>react-native-screens</code> on Android<a href=#configuring-react-native-screens-on-android class=hash-link aria-label="Direct link to configuring-react-native-screens-on-android" title="Direct link to configuring-react-native-screens-on-android" translate=no>​</a></h4><p><a href=https://github.com/software-mansion/react-native-screens target=_blank rel="noopener noreferrer" class=""><code>react-native-screens</code></a> requires one additional configuration to properly work on Android.<p>Edit <code>MainActivity.kt</code> or <code>MainActivity.java</code> under <code>android/app/src/main/java/&lt;your package name>/</code> and add the highlighted code:<div class="theme-tabs-container tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">Kotlin<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Java</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-kotlin codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-kotlin codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token keyword" style="color:hsl(356, 75%, 47%)">import</span><span class="token plain"> android</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">os</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">Bundle</span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(356, 75%, 47%)">import</span><span class="token plain"> com</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">swmansion</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">rnscreens</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">fragment</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">restoration</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">RNScreensFragmentFactory</span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">// ...</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(356, 75%, 47%)">class</span><span class="token plain"> MainActivity</span><span class="token operator" style="color:hsl(212, 92%, 35%)">:</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">ReactActivity</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">{</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">
22// ...</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">override</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">fun</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">onCreate</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token plain">savedInstanceState</span><span class="token operator" style="color:hsl(212, 92%, 35%)">:</span><span class="token plain"> Bundle</span><span class="token operator" style="color:hsl(212, 92%, 35%)">?</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">{</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">    supportFragmentManager</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token plain">fragmentFactory </span><span class="token operator" style="color:hsl(212, 92%, 35%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">RNScreensFragmentFactory</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">super</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token function" style="color:hsl(256, 54%, 50%)">onCreate</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token plain">savedInstanceState</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">}</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">// ...</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">}</span><br/></div></code></pre></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-java codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-java codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token keyword" style="color:hsl(356, 75%, 47%)">import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>android</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">.</span><span class="token import namespace" style=opacity:0.7>os</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">
22.</span><span class="token import class-name" style="color:hsl(26, 100%, 29%)">Bundle</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">;</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(356, 75%, 47%)">import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">.</span><span class="token import namespace" style=opacity:0.7>swmansion</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">.</span><span class="token import namespace" style=opacity:0.7>rnscreens</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">.</span><span class="token import namespace" style=opacity:0.7>fragment</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">.</span><span class="token import namespace" style=opacity:0.7>restoration</span><span class="token import namespace punctuation" style="opacity:0.7;color:hsl(212, 13%, 16%)">.</span><span class="token import class-name" style="color:hsl(26, 100%, 29%)">RNScreensFragmentFactory</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">;</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">// ...</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(356, 75%, 47%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(26, 100%, 29%)">MainActivity</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(26, 100%, 29%)">ReactActivity</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">{</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">// ...</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token annotation punctuation" style="color:hsl(212, 13%, 16%)">@Override</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">protected</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">void</span><span class="token plain"> </span><span class="token function" style="color:hsl(256, 54%, 50%)">onCreate</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token class-name" style="color:hsl(26, 100%, 29%)">Bundle</span><span class="token plain"> savedInstanceState</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">{</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">    </span><span class="token function" style="color:hsl(256, 54%, 50%)">getSupportFragmentManager</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">
22.</span><span class="token function" style="color:hsl(256, 54%, 50%)">setFragmentFactory</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token keyword" style="color:hsl(356, 75%, 47%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(26, 100%, 29%)">RNScreensFragmentFactory</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">;</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(356, 75%, 47%)">super</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">.</span><span class="token function" style="color:hsl(256, 54%, 50%)">onCreate</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">(</span><span class="token plain">savedInstanceState</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">)</span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">;</span><span class="token plain"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">}</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">// ...</span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(212, 13%, 16%)">}</span><br/></div></code></pre></div></div></div></div></div><p>This avoids crashes related to View state not being persisted across Activity restarts.<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id=opting-out-of-predictive-back-on-android>Opting-out of predictive back on Android<a href=#opting-out-of-predictive-back-on-android class=hash-link aria-label="Direct link to Opting-out of predictive back on Android" title="Direct link to Opting-out of predictive back on Android" translate=no>​</a></h4><p>React Navigation doesn't yet support Android's predictive back gesture, so you need to disable it for the system back gesture to work properly.<p>In <code>AndroidManifest.xml</code>, set <code>android:enableOnBackInvokedCallback</code> to <code>false</code> in the <code>&lt;application></code> tag (or <code>&lt;activity></code> tag to opt-out at activity level):<div class="language-xml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:hsl(212, 13%, 16%);--prism-background-color:hsl(256, 12%, 98%)"><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-xml codeBlock_bY9V thin-scrollbar" style="color:hsl(212, 13%, 16%);background-color:hsl(256, 12%, 98%)"><code class=codeBlockLines_e6Vv><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token tag punctuation" style="color:hsl(212, 13%, 16%)">&lt;</span><span class="token tag" style="color:hsl(212, 92%, 35%)">application</span><span class="token tag" style="color:hsl(212, 92%, 35%)"></span><br/></div><div class="token-line theme-code-block-highlighted-line" style="color:hsl(212, 13%, 16%)"><span class="token tag" style="color:hsl(212, 92%, 35%)">  </span><span class="token tag attr-name namespace" style="color:hsl(212, 92%, 35%);opacity:0.7">android:</span><span class="token tag attr-name" style="color:hsl(212, 92%, 35%)">enableOnBackInvokedCallback</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(212, 13%, 16%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(212, 13%, 16%)">"</span><span class="token tag attr-value" style="color:hsl(356, 75%, 47%)">
22false</span><span class="token tag attr-value punctuation" style="color:hsl(212, 13%, 16%)">"</span><span class="token tag" style="color:hsl(212, 92%, 35%)"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token tag" style="color:hsl(212, 92%, 35%)">  </span><span class="token tag punctuation" style="color:hsl(212, 13%, 16%)">></span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(212, 9%, 45%);font-style:italic">&lt;!-- ... --></span><span class="token plain"></span><br/></div><div class=token-line style="color:hsl(212, 13%, 16%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(212, 13%, 16%)">&lt;/</span><span class="token tag" style="color:hsl(212, 92%, 35%)">application</span><span class="token tag punctuation" style="color:hsl(212, 13%, 16%)">></span><br/></div></code></pre></div></div></div></div></div>
23<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=setting-up-react-navigation>Setting up React Navigation<a href=#setting-up-react-navigation class=hash-link aria-label="Direct link to Setting up React Navigation" title="Direct link to Setting up React Navigation" translate=no>​</a></h2>
24<p>The guides linked below cover the fundamentals of React Navigation, and give you the background to dive deeper into the more advanced topics.</p>
25<p>When using React Navigation, you configure <a class="" href=/docs/glossary-of-terms#navigator><strong>navigators</strong></a> in your app. Navigators handle transitions between screens and provide UI such as headers, tab bars, etc.</p>
26<p>There are 2 ways to configure navigators:</p>
27<div class=featured-actions><ul>
28<li class="">
29<p><strong><a class="" href="/docs/hello-react-navigation?config=static">Static configuration</a></strong> <span class=recommended-badge>Recommended</span></p>
30<p>Object-based configuration with automatic TypeScript types and deep linking. Supports static screen lists with dynamic navigator options.</p>
31</li>
32<li class="">
33<p><strong><a class="" href="/docs/hello-react-navigation?config=dynamic">Dynamic configuration</a></strong></p>
34<p>Component-based configuration with significantly more boilerplate for TypeScript and deep linking. Supports dynamic screen lists and navigator options.</p>
35</li>
36</ul></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href=https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/getting-started.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href=/docs/hello-react-navigation><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Hello React Navigation</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#starter-template class="table-of-contents__link toc-highlight">Starter template</a><li><a href=#installation class="table-of-contents__link toc-highlight">Installation</a><ul><li><a href=#installing-dependencies class="table-of-contents__link toc-highlight">Installing dependencies</a></ul><li><a href=#setting-up-react-navigation class="table-of-contents__link toc-highlight">Setting up React Navigation</a></ul></div></div></div></div></main></div></div></div></div>
36<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"a7eb0082d89943ecaa138882445901b9","r":1,"spa":2}' crossorigin="anonymous"></script>
36
37</body>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.