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.
Related
I have a StackNavigator, and I have a screen for creating new content on my app. Once the content is created I push to the screen for the content. At this point I can still create new content from that screen, so it's possible to push a new create content screen. But if the user does a GO_BACK, or swipes i.e. POPs back, I want them to skip the previous create content screen.
I think it's fairly common behaviour where you want to selectively skip screens on the way back. I've looked at the docs to try and figure this out. The easiest looking fix was the auth-flow. That skips the screen going back, but it also stops you pushing the screen if you take it out of the navigator.
The current best approach I have is to use a custom stack router, and in getStateForAction remove the create content screen from the routes whenever the user is pushing away from it. The downside on this is that there's a janky animation on iOS pushes from the create content screen, as the create content screen is sliding out it's also sliding up (I guess because it's being removed).
Is there a recommended best way to do this?
On the previous create screen use navigation.replace("ScreenName", {params})
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've created a Snack for this: https://snack.expo.io/HJebCIoiM
The problem is really simple, but most issues I've found on GH and SO are about the opposite behaviour: resetting the StackNavigator to its initial route when switching between items in the DrawerNavigator.
App structure
Drawer
Router
First screen
Second screen
Other screen
The initial route is Router, which by default shows the first screen.
Current behaviour
I go from the first screen to the second screen
I toggle the drawer
I go to the other screen in the drawer
I go back to the Router
It shows the first screen
Expected behaviour:
In step 5. it should show the second screen, because that's the last route I was on when I toggled the DrawerNavigator.
I don't understand why it doesn't preserve the state of the stack, and just takes me back to the screen I was on before, but instead resets the stack to its initial route.
What confuses me even more is that many people are reporting that this is the default behaviour of their app, but they do want to reset the stack and are struggling with this:
Resetting the navigation stack for the home screen (React Navigation and React Native)
Clear stack being navigated to React-Navigation
How to reset the state of a StackNavigator nested in a DrawerNavigatior?
I don't understand why it does reset it all the time in my case. (and as you should be able to reproduce with the Snack I posted above.
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 wish to trigger navigation to a details screen from a redux action - how do i do that with exponent ex-navigation? Should I use navigation.performAction ? Where's the documentation for that method? This would be a route with a fresh stack since they would be coming from a create screen and they shouldn't press back to the create form. This would also be a route that exists outside the tab navigation.