My app has two tabs and one of the tabs has a stack navigator inside. How can I dispatch a poptotop action for this stack from the other tab.
I've tried:
navigation.dispatch(StackActions.popToTop());
From the other tab, but I get this error:
The action 'POP_TO_TOP' was not handled by any navigator.
Is there any screen to go back to?
Which is logical because the tab I'm dispatching it from has no stacks. I've been searching the net to find a way to link this command to its relative tab, but no success.
Related
I am using react-navigation (v6.x) in a react-native app.
I have a drawer navigator setup which holds different stack navigators.
If I hide the drawer's header, the drawer button gets hidden and it won't be obvious to the app users that the drawer is there.
If I hide the stack screen's header (inside the stack navigator) it hides the back button and the users won't be able to go back unless they're using the hardware button(Android)/gestures (iOS).
How can I achieve the following:
1- Hide the Stack screen's header, and show the drawer's header on the first screen of the stack (reveal the drawer button, since the back button is not needed at this stage).
2- Hide the drawer's header and show the stack screens header on the second screen of the stack (hide the drawer button, reveal the back button so the user can go to the previous screen in the stack)
or is there a cleaner approach?
Thanks!
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'm making an app, and in the app there is a home screen. On the home screen, I want to add a bottom navigator with various logos, which when clicked on, navigate the user to a different screen. I only want the bottom navigator to be on the screens that can be accessed from the bottom navigator in home. How would I do this? Would I need different types of navigators in my app.js since I'm using a stack navigator as well? Thanks for any help, I sincerely appreciate it.
Use tab-based-navigation provided by react-navigation. Make tab navigator with the screens that you want to be displayed with tab and wrap that in Stack. Any other screen that you want to display without tab navigation, just add as another stack and wrap all the stacks in Stack.Navigator. Here's the docs they are pretty well explained
https://reactnavigation.org/docs/tab-based-navigation
I'm trying to make an app that has a series of nested navigators. The main navigator is a stack navigator that goes to jobs, job details, and chats. Within the jobs page, there is a top tab navigator that shows open jobs, almost due jobs, and completed jobs. There is also a bottom tab that has jobs (same page), add, and profile. So the jobs page is the home page. Each job entry can be clicked and it will go to the job details . I'm having trouble figuring how to nest and logic these.
Stack (Main)
Job Details
Chat
Jobs (Top tab Navigator)
Open
On Press to job details and other pages
Almost due
On Press to to job details and other pages
Done
On Press to to job details and other pages
Jobs (Bottom tab)
Jobs
Add
Profile
So far, I feel like the top navigator will point to the same jobs page but with different params, and the main bottom tab navigator will point to a stack navigator that includes the top tab navigator. But I'm not sure if that is good, and it gets messy. Any advice appreciated.
It is hard to answer without knowing what you want to achieve, but if I wanted to develop an app with those navigators, I will try to keep it as simplified as I can
Stack (Main)
Job Details
Chat
Jobs (Bottom Tab Navigator)
Add
Profile
Jobs (Top Tab Navigator)
Open -> onPress navigate to job details
Almost Due -> onPress navigate to job details
Done -> onPress navigate to job details
I would further point out that Each screen in a navigator has its own params
Further, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored, which I think you were pointing out. you can disable the behaviour of using the specified screen as the initial screen by setting initial: false
You can further read about this here.
I would also strongly recommend going through the Navigation Docs for Nesting Navigators
I have an app that uses the tab navigator. So I have a bottom tab with the different options. On my Home tab I a "widget list" if you click on a specific widget, it should send you to that tab. Is this possible to do? you click on widget and it switches tabs, instead of having to click down on the tab navigator? if so any ideas on how to do this?
A little more background:
The home screen is in a tab navigator, but that screen contains a stack navigation. So I am trying to access the tab navigator from within the stack navigator.
in the following diagram I want to be able to go to Explore from Setting (when inside Home)
TabBarNavigation:
Home
Explore
Home (StackNavigation):
Main
Settings
Thank you
You can use
onPressWidget = () => {
this.props.navigate('widget list name')
}
reference: https://reactnavigation.org/docs/navigation-prop/