https://reactnative.dev/assets/js/3be02c4e.536fb514.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["1564"],{21307(e,n,a){a.r(n),a.d(n,{metadata:()=>t,default:()=>h,frontMatter:()=>r,contentTitle:()=>s,toc:()=>l,assets:()=>c});var t=JSON.parse('{"id":"navigation","title":"Navigating Between Screens","description":"Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.","source":"@site/versioned_docs/version-0.78/navigation.md","sourceDirName":".","slug":"/navigation","permalink":"/docs/0.78/navigation","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/navigation.md\\"},{\\"label\\":\\"Edit page for 0.78 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.78/navigation.md\\"}]","tags":[],"version":"0.78","lastUpdatedAt":1754574009000,"frontMatter":{"id":"navigation","title":"Navigating Between Screens"},"sidebar":"docs","previous":{"title":"Handling Touches","permalink":"/docs/0.78/handling-touches"},"next":{"title":"Animations","permalink":"/docs/0.78/animations"}}'),i=a(62540),o=a(43023);let r={id:"navigation",title:"Navigating Between Screens"},s,c={},l=[{value:"React Navigation",id:"react-navigation",level:2},{value:"Starter template",id:"starter-template",level:3},{value:"Installation and setup",id:"installation-and-setup",level:3},{value:"Usage",id:"usage",level:3}];function d(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator."}),"\n",(0,i.jsxs)(n.p,{children:["This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use ",(0,i.jsx)(n.a,{href:"/docs/0.78/navigation#react-navigation",children:"React Navigation"}),". React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS."]}),"\n",(0,i.jsxs)(n.p,{children:["If you're integrating React Native into an app that already manages navigation natively, or looking for an alternative to React Navigation, the following library provides native navigation on both platforms: ",(0,i.jsx)(n.a,{href:"https://github.com/wix/react-native-navigation",children:"react-native-navigation"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"react-navigation",children:"React Navigation"}),"\n",(0,i.jsx)(n.p,{children:"The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code."}),"\n",(0,i.jsx)(n.h3,{id:"starter-template",children:"Starter template"}),"\n",(0,i.jsxs)(n.p,{children:["If you're starting a new project, you can use the React Navigation template to quickly set up a new project with ",(0,i.jsx)(n.a,{href:"https://expo.dev/",children:"Expo"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx create-expo-app@latest --template react-navigation/template\n"})}),"\n",(0,i.jsxs)(n.p,{children:["See the project's ",(0,i.jsx)(n.code,{children:"README.md"})," for more information on how to get started."]}),"\n",(0,i.jsx)(n.h3,{id:"installation-and-setup",children:"Installation and setup"}),"\n",(0,i.jsx)(n.p,{children:"First, you need to install them in your project:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npm install @react-navigation/native @react-navigation/native-stack\n"})}),"\n",(0,i.jsx)(n.p,{children:"Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["If you have an Expo managed project, install the dependencies with ",(0,i.jsx)(n.code,{children:"expo"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npx expo install react-native-screens react-native-safe-area-context\n"})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["If you have a bare React Native project, install the dependencies with ",(0,i.jsx)(n.code,{children:"npm"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"npm install react-native-screens react-native-safe-area-context\n"})}),"\n",(0,i.jsxs)(n.p,{children:["For iOS with bare React Native project, make sure you have ",(0,i.jsx)(n.a,{href:"https://cocoapods.org/",children:"CocoaPods"})," installed. Then install the pods to complete the installation:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"cd ios\npod install\ncd ..\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation."}),"\n",(0,i.jsxs)(n.p,{children:["When using React Navigation, you configure ",(0,i.jsx)(n.a,{href:"https://reactnavigation.org/docs/glossary-of-terms#navigator",children:"navigators"})," in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc."]}),"\n",(0,i.jsx)(n.p,{children:"Now you are ready to build and run your app on the device/simulator."}),"\n",(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.p,{children:"Now you can create an app with a home screen and a profile screen:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",metastring:'title="React TSX"',children:"import * as React from 'react';\nimport {createStaticNavigation} from '@react-navigation/native';\nimport {createNativeStackNavigator} from '@react-navigation/native-stack';\n\nconst RootStack = createNativeStackNavigator({\n  screens: {\n    Home: {\n      screen: HomeScreen,\n      options: {title: 'Welcome'},\n    }

1,\n    Profile: {\n      screen: ProfileScreen,\n    },\n  },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n  return <Navigation />;\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["In this example, ",(0,i.jsx)(n.code,{children:"RootStack"})," is a navigator with 2 screens (",(0,i.jsx)(n.code,{children:"Home"})," and ",(0,i.jsx)(n.code,{children:"Profile"}),"), defined in the ",(0,i.jsx)(n.code,{children:"screens"})," property in ",(0,i.jsx)(n.code,{children:"createNativeStackNavigator"}),". Similarly, you can define as many screens as you like."]}),"\n",(0,i.jsxs)(n.p,{children:["You can specify options such as the screen title for each screen in the ",(0,i.jsx)(n.code,{children:"options"})," property of each screen. Each screen definition also needs a ",(0,i.jsx)(n.code,{children:"screen"})," property that is a React component or another navigator."]}),"\n",(0,i.jsxs)(n.p,{children:["Inside each screen component, you can use the ",(0,i.jsx)(n.code,{children:"useNavigation"})," hook to get the ",(0,i.jsx)(n.code,{children:"navigation"})," object, which has various methods to link to other screens. For example, you can use ",(0,i.jsx)(n.code,{children:"navigation.navigate"})," to go to the ",(0,i.jsx)(n.code,{children:"Profile"})," screen:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",metastring:'title="React TSX"',children:"import {useNavigation} from '@react-navigation/native';\n\nfunction HomeScreen() {\n  const navigation = useNavigation();\n\n  return (\n    <Button\n      title=\"Go to Jane's profile\"\n      onPress={() =>\n        navigation.navigate('Profile', {name: 'Jane'})\n      }\n    />\n  );\n}\n\nfunction ProfileScreen({route}) {\n  return <Text>This is {route.params.name}'s profile</Text>;\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["This ",(0,i.jsx)(n.code,{children:"native-stack"})," navigator uses the native APIs: ",(0,i.jsx)(n.code,{children:"UINavigationController"})," on iOS and ",(0,i.jsx)(n.code,{children:"Fragment"})," on Android so that navigation built with ",(0,i.jsx)(n.code,{children:"createNativeStackNavigator"})," will behave the same and have the similar performance characteristics as apps built natively on top of those APIs."]}),"\n",(0,i.jsx)(n.p,{children:"React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app."}),"\n",(0,i.jsxs)(n.p,{children:["For a complete intro to React Navigation, follow the ",(0,i.jsx)(n.a,{href:"https://reactnavigation.org/docs/getting-started",children:"React Navigation Getting Started Guide"}),"."]})]})}function h(e={}){let{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},43023(e,n,a){a.d(n,{R:()=>r,x:()=>s});var t=a(63696);let i={},o=t.createContext(i);function r(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);