1"use strict";(self.webpackChunkreact_navigation_website=self.webpackChunkreact_navigation_website||[]).push([["10784"],{88403(n,e,t){t.r(e),t.d(e,{metadata:()=>a,default:()=>m,frontMatter:()=>s,contentTitle:()=>l,toc:()=>p,assets:()=>u});var a=JSON.parse('{"id":"stack-actions","title":"StackActions reference","description":"StackActions is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in CommonActions.","source":"@site/versioned_docs/version-7.x/stack-actions.md","sourceDirName":".","slug":"/stack-actions","permalink":"/docs/stack-actions","draft":false,"unlisted":false,"editUrl":"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/stack-actions.md","tags":[],"version":"7.x","frontMatter":{"id":"stack-actions","title":"StackActions reference","sidebar_label":"StackActions"},"sidebar":"docs","previous":{"title":"CommonActions","permalink":"/docs/navigation-actions"},"next":{"title":"DrawerActions","permalink":"/docs/drawer-actions"}}'),o=t(74848),i=t(28453),c=t(50773),r=t(57250);let s={id:"stack-actions",title:"StackActions reference",sidebar_label:"StackActions"},l,u={},p=[{value:"replace",id:"replace",level:2},{value:"push",id:"push",level:2},{value:"pop",id:"pop",level:2},{value:"popTo",id:"popto",level:2},{value:"popToTop",id:"poptotop",level:2}];function d(n){let e={a:"a",code:"code",em:"em",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:"StackActions"}
1)," is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in ",(0,o.jsx)(e.a,{href:"/docs/navigation-actions",children:(0,o.jsx)(e.code,{children:"CommonActions"})}),"."]}),"\n",(0,o.jsxs)(e.p,{children:["For screens inside a ",(0,o.jsx)(e.a,{href:"/docs/stack-navigator",children:"Stack Navigator"})," or ",(0,o.jsx)(e.a,{href:"/docs/native-stack-navigator",children:"Native Stack Navigator"}),", all stack actions are available as methods on the ",(0,o.jsx)(e.code,{children:"navigation"})," object."]}),"\n",(0,o.jsx)(e.p,{children:"The following actions are supported:"}),"\n",(0,o.jsx)(e.h2,{id:"replace",children:"replace"}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.code,{children:"replace"})," action allows to replace a route in the ",(0,o.jsx)(e.a,{href:"/docs/navigation-state",children:"navigation state"}),". It takes the following arguments:"]}),"\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"name"})," - ",(0,o.jsx)(e.em,{children:"string"})," - A destination name of the route that has been registered somewhere."]}),"\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"params"})," - ",(0,o.jsx)(e.em,{children:"object"})," - Params to pass to the destination route."]}),"\n"]}),"\n",(0,o.jsxs)(c.A,{groupId:"config",queryString:"config",values:[{value:"static",label:"Static",default:!0},{value:"dynamic",label:"Dynamic"}],children:["\n",(0,o.jsx)(r.A,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(e.pre,{"data-name":"Stack actions replace","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions replace" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.replace('Profile', { user: 'Wojtek' });\n // codeblock-focus-end\n }}\n >\n Replace with Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen({ route }) {\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Text>{route.params.user}'s profile</Text>\n </View>\n );\n}\n\nconst RootStack = createStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return <Navigation />;\n}\n"})})}),"\n",(0,o.jsx)(r.A,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(e.pre,{"data-name":"Stack actions replace","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions replace" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport { useNavigation, NavigationContainer } from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.replace('Profile', { user: 'Wojtek' });\n // codeblock-focus-end\n }}\n >\n Replace with Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen({ route }) {\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Text>{route.params.user}'s profile</Text>\n </View>\n );\n}\n\nconst Stack = createStackNavigator();\n\nfunction RootStack() {\n return (\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n <Stack.Screen name=\"Profile\" component={ProfileScreen} />\n </Stack.Navigator>\n );\n}\n\nexport default function App() {\n return (\n <NavigationContainer>\n <RootStack />\n </NavigationContainer>\n );\n}\n"})})}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["It can also be used with ",(0,o.jsx)(e.code,{children:"navigation.dispatch"}),":"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"import { StackActions } from '@react-navigation/native';\n\nnavigation.dispatch(StackActions.replace('Profile', { user: 'Wojtek' }));\n"})}),"\n",(0,o.jsxs)(e.p,{children:["If you want to replace a particular route, you can add a ",(0,o.jsx)(e.code,{children:"source"})," property referring to the route key and ",(0,o.jsx)(e.code,{children:"target"})," property referring to the navigation state key:"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"import { StackActions } from '@react-navigation/native';\n\nnavigation.dispatch({\n ...StackActions.replace('Profile', {\n user: 'jane',\n }),\n source: route.key,\n target: navigation.getState().key,\n});\n"})}),"\n",(0,o.jsxs)(e.p,{children:["If the ",(0,o.jsx)(e.code,{children:"source"})," property is explicitly set to ",(0,o.jsx)(e.code,{children:"undefined"}),", it'll replace the focused route."]}),"\n",(0,o.jsx)(e.h2,{id:"push",children:"push"}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.code,{children:"push"})," action adds a route on top of the stack and navigates forward to it. This differs from ",(0,o.jsx)(e.code,{children:"navigate"})," in that ",(0,o.jsx)(e.code,{children:"navigate"})," will pop back to earlier in the stack if a route of the given name is already present there. ",(0,o.jsx)(e.code,{children:"push"})," will always add on top, so a route can be present multiple times."]}),"\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"name"})," - ",(0,o.jsx)(e.em,{children:"string"})," - Name of the route to push onto the stack."]}),"\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"params"})," - ",(0,o.jsx)(e.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,o.jsxs)(c.A,{groupId:"config",queryString:"config",values:[{value:"static",label:"Static",default:!0},{value:"dynamic",label:"Dynamic"}],children:["\n",(0,o.jsx)(r.A,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(e.pre,{"data-name":"Stack actions push","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions push" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.push('Profile', { user: 'Wojtek' });\n // codeblock-focus-end\n }}\n >\n Push Profile on the stack\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen({ route }) {\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Text>{route.params.user}'s profile</Text>\n </View>\n );\n}\n\nconst RootStack = createStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return <Navigation />;\n}\n"})})}),"\n",(0,o.jsx)(r.A,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(e.pre,{"data-name":"Stack actions push","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions push" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport { useNavigation, NavigationContainer } from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.push('Profile', { user: 'Wojtek' });\n // codeblock-focus-end\n }}\n >\n Push Profile on the stack\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen({ route }) {\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Text>{route.params.user}'s profile</Text>\n </View>\n );\n}\n\nconst Stack = createStackNavigator();\n\nfunction RootStack() {\n return (\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n <Stack.Screen name=\"Profile\" component={ProfileScreen} />\n </Stack.Navigator>\n );\n}\n\nexport default function App() {\n return (\n <NavigationContainer>\n <RootStack />\n </NavigationContainer>\n );\n}\n"})})}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["It can also be used with ",(0,o.jsx)(e.code,{children:"navigation.dispatch"}),":"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"import { StackActions } from '@react-navigation/native';\n\nnavigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }));\n"})}),"\n",(0,o.jsx)(e.h2,{id:"pop",children:"pop"}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.code,{children:"pop"})," action takes you back to a previous screen in the stack. It takes one optional argument (",(0,o.jsx)(e.code,{children:"count"}),"), which allows you to specify how many screens to pop back by."]}),"\n",(0,o.jsxs)(c.A,{groupId:"config",queryString:"config",values:[{value:"static",label:"Static",default:!0},{value:"dynamic",label:"Dynamic"}],children:["\n",(0,o.jsx)(r.A,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(e.pre,{"data-name":"Stack actions pop","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions pop" snack',children:"import * as React from 'react';\nimport { Button } from '@react-navigation/elements';\nimport { View, Text } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n navigation.navigate('Profile');\n }}\n >\n Go to Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.pop(1);\n // codeblock-focus-end\n }}\n >\n Pop one screen from stack\n </Button>\n </View>\n );\n}\n\nconst RootStack = createStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return <Navigation />;\n}\n"})})}),"\n",(0,o.jsx)(r.A,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(e.pre,{"data-name":"Stack actions pop","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions pop" snack',children:"import * as React from 'react';\nimport { Button } from '@react-navigation/elements';\nimport { View, Text } from 'react-native';\nimport { useNavigation, NavigationContainer } from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n navigation.navigate('Profile');\n }}\n >\n Go to Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.pop(1);\n // codeblock-focus-end\n }}\n >\n Pop one screen from stack\n </Button>\n </View>\n );\n}\n\nconst Stack = createStackNavigator();\n\nfunction RootStack() {\n return (\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n <Stack.Screen name=\"Profile\" component={ProfileScreen} />\n </Stack.Navigator>\n );\n}\n\nexport default function App() {\n return (\n <NavigationContainer>\n <RootStack />\n </NavigationContainer>\n );\n}\n"})})}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["It can also be used with ",(0,o.jsx)(e.code,{children:"navigation.dispatch"}),":"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"import { StackActions } from '@react-navigation/native';\n\nnavigation.dispatch(StackActions.pop(1));\n"})}),"\n",(0,o.jsx)(e.h2,{id:"popto",children:"popTo"}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.code,{children:"popTo"})," action takes you back to a previous screen in the stack by the name. It also allows you to pass params to the route."]}),"\n",(0,o.jsxs)(e.p,{children:["If a matching screen is not found in the stack, this will pop the current screen and add a new screen with the specified name and params - essentially behaving like a ",(0,o.jsx)(e.a,{href:"#replace",children:(0,o.jsx)(e.code,{children:"replace"})}),". This ensures that the app doesn't break if a previous screen with the name did not exist - which can happen when the screen was opened from a deep link or push notification, or when used on the web etc."]}),"\n",(0,o.jsx)(e.p,{children:"The method accepts the following arguments:"}),"\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"name"})," - ",(0,o.jsx)(e.em,{children:"string"})," - Name of the route to navigate to."]}),"\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"params"})," - ",(0,o.jsx)(e.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"options"}
1)," - Options object containing the following properties:","\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"merge"})," - ",(0,o.jsx)(e.em,{children:"boolean"})," - Whether params should be merged with the existing route params, or replace them (when navigating to an existing screen). Defaults to ",(0,o.jsx)(e.code,{children:"false"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(c.A,{groupId:"config",queryString:"config",values:[{value:"static",label:"Static",default:!0},{value:"dynamic",label:"Dynamic"}],children:["\n",(0,o.jsx)(r.A,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(e.pre,{"data-name":"Stack actions popTo","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions popTo" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n navigation.navigate('Profile', { user: 'Wojtek' });\n }}\n >\n Go to Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen({ route }) {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Text>{route?.params?.user || 'Guest'}'s profile</Text>\n <Button\n onPress={() => {\n navigation.navigate('Settings');\n }}\n >\n Go to Settings\n </Button>\n </View>\n );\n}\n\nfunction SettingsScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Settings!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.popTo('Profile', { user: 'jane' });\n // codeblock-focus-end\n }}\n >\n Pop to Profile with params\n </Button>\n </View>\n );\n}\n\nconst RootStack = createStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n Settings: SettingsScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return <Navigation />;\n}\n"})})}),"\n",(0,o.jsx)(r.A,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(e.pre,{"data-name":"Stack actions popTo","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions popTo" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport { useNavigation, NavigationContainer } from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n navigation.navigate('Profile', { user: 'Wojtek' });\n }}\n >\n Go to Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen({ route }) {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Text>{route?.params?.user || 'Guest'}'s profile</Text>\n <Button\n onPress={() => {\n navigation.navigate('Settings');\n }}\n >\n Go to Settings\n </Button>\n </View>\n );\n}\n\nfunction SettingsScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Settings!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.popTo('Profile', { user: 'jane' });\n // codeblock-focus-end\n }}\n >\n Pop to Profile with params\n </Button>\n </View>\n );\n}\n\nconst Stack = createStackNavigator();\n\nfunction RootStack() {\n return (\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n <Stack.Screen name=\"Profile\" component={ProfileScreen} />\n <Stack.Screen name=\"Settings\" component={SettingsScreen} />\n </Stack.Navigator>\n );\n}\n\nexport default function App() {\n return (\n <NavigationContainer>\n <RootStack />\n </NavigationContainer>\n );\n}\n"})})}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["It can also be used with ",(0,o.jsx)(e.code,{children:"navigation.dispatch"}),":"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"import { StackActions } from '@react-navigation/native';\n\nnavigation.dispatch(StackActions.popTo('Profile', { user: 'jane' }));\n"})}),"\n",(0,o.jsx)(e.h2,{id:"poptotop",children:"popToTop"}),"\n",(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.code,{children:"popToTop"})," action takes you back to the first screen in the stack, dismissing all the others."]}),"\n",(0,o.jsxs)(c.A,{groupId:"config",queryString:"config",values:[{value:"static",label:"Static",default:!0},{value:"dynamic",label:"Dynamic"}],children:["\n",(0,o.jsx)(r.A,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(e.pre,{"data-name":"Stack actions popToTop","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions popToTop" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n navigation.navigate('Profile');\n }}\n >\n Go to Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.popToTop();\n // codeblock-focus-end\n }}\n >\n Pop to top\n </Button>\n </View>\n );\n}\n\nconst RootStack = createStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return <Navigation />;\n}\n"})})}),"\n",(0,o.jsx)(r.A,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(e.pre,{"data-name":"Stack actions popToTop","data-snack":"true",children:(0,o.jsx)(e.code,{className:"language-js",metastring:'name="Stack actions popToTop" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { Button } from '@react-navigation/elements';\nimport { useNavigation, NavigationContainer } from '@react-navigation/native';\nimport { createStackNavigator } from '@react-navigation/stack';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Home!</Text>\n <Button\n onPress={() => {\n navigation.navigate('Profile');\n }}\n >\n Go to Profile\n </Button>\n </View>\n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Text>Profile!</Text>\n <Button\n onPress={() => {\n // codeblock-focus-start\n navigation.popToTop();\n // codeblock-focus-end\n }}\n >\n Pop to top\n </Button>\n </View>\n );\n}\n\nconst Stack = createStackNavigator();\n\nfunction RootStack() {\n return (\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n <Stack.Screen name=\"Profile\" component={ProfileScreen} />\n </Stack.Navigator>\n );\n}\n\nexport default function App() {\n return (\n <NavigationContainer>\n <RootStack />\n </NavigationContainer>\n );\n}\n"})})}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["It can also be used with ",(0,o.jsx)(e.code,{children:"navigation.dispatch"}),":"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"import { StackActions } from '@react-navigation/native';\n\nnavigation.dispatch(StackActions.popToTop());\n"})})]})}function m(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(d,{...n})}):d(n)}}}]);
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.