Suppose I have 4 tab screens. The tab is created with a custom footer component with layout concept and all the navigational screens are listed in the stack navigator route section and used goBack() method to navigate the previous screen. now For a situation, my navigation route as follows started with
Home->Testimonial->offerings, then again from offerings->Testimonial->about here I stopped in this screen then pressed the back button with goBack() function. but this time goBack() routes me to
about->testimonial->offerings->home. Like the unique screens are listed in stack navigators routes, not the duplicate screens.
I want to know is it an issue? if yes, then how can I manage it?
Use a unique key for your screen.
https://reactnavigation.org/docs/navigation-actions/
navigation.navigate({
name: 'offerings',
key: 'offerings' + someUniqueId,
})
Related
I have the following React Native navigation architecture:
Im trying to set the styling on a button in my TabHeader component (see blue arrow) based on which Screen I am on. However in the props passed into it by TabNavigator, I am only seeing the Stack directly beneath it, in this scenario the HomeStack.
Is it possible to get the current Screen (Home) in TabNavigator even when it is 2 levels deep? (Core -> HomeStack -> Home)
Source
You can only modify navigation options for a navigator from one of its screen components. This applies equally to navigators that are nested as screens.
On the same page there is a title Setting parent screen options based on child navigator's state
Is there a way to hide a route in the drawer but still be able to navigate to it?
Example: I want get rid of Post in the drawer but I want be able to navigate to a <Post> component.
There are 2 options:
Put the Post screen inside a stack with another screen and use that stack nested in drawer.
Use a custom component for drawer to manually specify which items to show: https://reactnavigation.org/docs/en/next/drawer-navigator.html#drawercontent
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 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'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.