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')
Related
I'm in a situation that user needs to navigate for a moment to group of other screens to add some data and then go back to the first screen.
The first screen has data that was passed to it through navigate params. I need this data to remain after changing screens.
This works when user in order to get back there is using couple times
navigation.goBack()
but when I try to go back to specific screen using
navigation.navigate({key: 'edit'})
then it pops
Render error
undefined is not an object (evaluating '_route$params.payment')
Use popToTop or pop to go back multiple screens.
import { StackActions } from '#react-navigation/native';
navigation.dispatch(StackActions.popToTop());
// or
navigation.dispatch(StackActions.pop(2));
I have a Parent SwitchNavigator which has two screens:
1. HomeScreen
2. DashBoard
Also my dashboard screen is actually a drawer Navigator that consists of other screens like:
1. Ongoing News
2. Profile Edit
3. Logout
Now in Logout If i write this.props.navigation.navigate("Home") it takes me to the Ongoing News screen which the home in this current child drawer navigator route... But I want to jump to the higher route i.e. the parent route of switch navigator and I want to go to the HomeScreen there instead of being in this route how can I achieve this??
I am beginner so please if you can explain in as simple words as possible that would be great... :)
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?
I don't know if I am the one getting it wrong. I am working on a project, I use react navigation, and I am using drawer and stack navigator. But when I click on any menu on the drawer 1. The drawer will remain open until the next page appear 2. The menu that I click will remain active until the next screen appear.
I try to check other application performance, they don't perform like that. Is that how react navigation works or am I the one getting it wrong?
Please help because I am new to react native and react navigation.
i came across a post on Fixing common performance problems in React Navigation
i just change the code in componentdidmount method like this
componentDidMount(){
InteractionManager.runAfterInteractions(() => {
// Component is done animating
// Start making any request
});
};
with that my problem is solved but i dont know if is the right way of doing it.
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.