I have a DrawerNavigator with a list of screens. The problem is that if I go to another screen and come back, the first screen re-initializes completely. How to prevent this re-initialization so that whatever the state of the first screen was, is preserved on coming back?
Related
I have a Stack Navigator where screen A pushes to screen B.
I would like to preload screen B so there is no lag when pushing from screen A. How can I do that?
I've seen there is a lazy: false option for bottom tab navigators, is there something similar for Stack Navigators?
There isn't a way to do this in a Stack Navigator from what I understood by the Github Issue #6010.
In drawer/tabs, there are a fixed number of all screens, so all of
them can be rendered and you just navigate to an existing screen. The
order in which the screens are rendered is also fixed.
It doesn't make sense for stack. There's no limit to how many screens
that can be rendered and there's no guarantee about order of screens
or what is the next screen. There can also be multiple instances of
the same screen.
The navigation state for stack is populated you push a new screen as
opposed to drawer it tabs where there state already includes all
screens.
I found the above after I read the Github Issue "How to mount all screens on App load".
I made a screen component in my project with react native. And I'm using react navigation's material top tab navigator as a swiper. It's a questionable decision but whatever :)
Just imagine you making a screen and, at top you have a image and at bottom you have the top tab navigator as a swiper. It's actually working fine but, everytime when i switch the tabs in the component it's re-rendering the entire component.
And of course this is fires the componentDidMounts for the child components, which causes to make requests over and over.
Is there a way to avoid this?
I have several nested navigator with above structure:
StackNavigator
authNav
homeNav
main(default)
create
subCreate1(default)
subCreate2
subCreate3
list
subList1(default)
subList2
Actually I play to navigate it. It's work as I expected.
But when I stay on subCreate3 screen, I want to navigate to subList1 screen, then when back or dismiss from subList1 it should go to main screen not go to subCreate3 again.
any idea with this ?. thank react-native user :D
Navigation has stack of all the pushed screen, So when we will try to dismiss or goBack then it will navigate to top stack screen.
In your case, subCreate3 is top most screen when you are on subList1. So it will move there.
If you need to move to particular screen, then below is the logic:
this.props.navigation.navigate(YOUR_SCREEN_NAME)
For more information, checkout navigation
when you navigate to screens using navigate screens are pushed to stack and when you go back it goes back to the previous screen in the stack. In your case subCreate3 is the previous screen in stack.
If you want to go main screen you have to use navigate function again.
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.
Using stacknavigator, whenever user navigates to a new screen everything on the screen flashes out, then back in even if the elements are the same on both starting and ending screen. For example, I have a searchbar at the top of every page and sticky footer at the bottom. Is there any way to keep those elements on the screen during the navigation?
Ideal result is like with Tabnavigator, the tabs stay on screen during navigation.