From reading the documentation it would seem so, but I suppose I'm confused as to why it isn't called out that they're interchangeable when pop() is called without arguments, or why there would even be two different functions with such similar behavior (and why goBack() wouldn't also take an argument for the number of screens to go back)?
pop - go back in the stack
The difference is:
pop is specific to stack navigator, accepts arguments like the number of screens to pop which is relevant for the stack navigator
goBack is more general, it works in any navigator: stack, tabs drawer
It's not exactly interchangable since it depends on which navigator are you in. For example, if your screen is in a tab navigator nested in stack navigator, if you use pop(), it'll go back in the parent stack navigator, but if you call goBack(), it'll go back in the tab navigator (depending on if there are any screens to go back in both cases).
So generally you probably want to use goBack() which will do the appropriate behavior in most cases, and use pop() only if you have specific requirements and want the specific behaviour it provides.
With the help of pop you can go back a few screens back in a stack
goBack takes you back to the last screen
see here
The pop action takes you back to a previous screen in the stack. It takes one optional argument (count), which allows you to specify how many screens to pop back by.
import { StackActions } from '#react-navigation/native';
StackActions.pop(2);
Related
From the react-navigation/native V6 documentation
navigation.replace replaces the current route with a new one
whereas navigation.navigate goes to another screen and figures out the action it needs to take to do it
Can you please explain me what's the difference between the two?
Navigate
navigate - go to another screen, figures out the action it needs to
take to do it
Navigate will go to the screen, but the action it takes to go there will depend on the type of navigator.
For bottom Tab it will simply replace the route with the new one to
navigate and pressing back in android at least will by default
navigate to first screen in navigator.
For Stack, navigate will push the new route into the current stack. The previous components in the route will still be mounted. Only popping them will unmount them. In a stack, going back will simply pop.
Replace
replace - replace the current route with a new one
Replace will simply replace the current route with a new one. What this means in a stack navigator is, that the current component will be unmounted and the component from new route will be mounted. Which is a different behaviour from what navigate would've done (push)
TLDR: Navigate takes best course of action, Replace only works in some navigators, with specifically unmounting current and mounting new.
I would like to realise an infinite stack with react navigation, that means I would need a dynamic stacknavigator where I can push in a unlimited number of screens (a maximum of 20 screens would be enough). You can imagine this like in the amazon app where you can click on a related product in the product details and it shows you another product details screen where you can do the same thing.
Does anyone of you has an idea how to do that ?
This can be done with react-navigation
Instead of using this.props.navigation.navigate('ScreenName') you can use this.props.navigation.push('ScreenName')
You would probably want to pass some sort of description to the screen so that it knows what to render you can do that by passing params
this.props.navigation.push('ScreenName', { key: productId })
You would just have to set up a few template screens that could then be populated by the parameters that you pass to them.
You can see more about the different functions that react-navigation has here
https://reactnavigation.org/docs/en/navigation-prop.html#navigator-dependent-functions
Here is a snack showing it working https://snack.expo.io/#andypandy/infinite-navigation
In the snack I pass a position and date, you can see these update as each screen is pushed onto the stack. Pressing Go Back goes back one place on the stack.
I have come across a problem where I basically don't really have ideas on how to move on.
I have a StackNavigator with two screens, one is called "HomeScreen", the other one is called "SettingsScreen". When I click on a button, I get to "SettingsScreen".
I also have a DrawerNavigator, with which I can navigate to one of the four screens and Screen 4 is the StackNavigator.
DrawerNavigator:
Screen1
Screen2
Screen3
Screen4
- HomeScreen
- SettingsScreen
(Hopefully it is somehow understandable)
So let's come to the problem...
My problem is that my "SettingsScreen" has the function to add items to an AsyncStorage key (it pushes it to the array so at the end I have a list which I render on my "HomeScreen"), but when I have added the item and return to my "HomeScreen", it won't reload the page. How can I make it so it will reload the page when some condition is met or even simpler - how do I reload the page every time I leave "SettingsScreen"?
It would help to see your code and also to know what version of React Navigation you are using. Most likely you can "push" to the navigation stack which will do a fresh reload of whatever screen you are going to. You would have something like this in your function:
this.props.navigation.push('HomeScreen')
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.
I am trying to find StackNavigator's to UINavigationContoller's popToViewController(_ viewController: UIViewController, animated: Bool).
According to the docs goBack() only ever goes back one position, the argument you pass in is where you are going back from rather than where you want to go back to.
There are no tabs or nesting of navigators just a simple A->B->C->D->E with the ability to go back to any of the previous screens from E.
You could actually make use of the navigation.navigate function
Another common requirement is to be able to go back multiple screens
-- for example, if you are several screens deep in a stack and want to dismiss all of them to go back to the first screen. In this case, we
know that we want to go back to Home so we can use navigate('Home')
https://reactnavigation.org/docs/en/navigating.html
As per docs react navigation doesn't provide a way to pop to a desired screen. For that you can refere this hack
https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb