I have a bottomTabNavigator and a topTabNavigator, if I click on the first tab of my bottom nav it loads the first tab of my top nav. What I want is for the first tab of my bottom nav to have it's own page loaded when being clicked on and still have the top nav being there. But how do I make this possible?
I've tried several things that came to my mind.
Render the top nav like a component on the first tab page of the bottom nav. I get this to work not quite the way I want it, but it still loads the first tab of the top nav then. Which is what I don't want, I want the first tab of the bottom nav (Home) to have it's own page.
Load the bottom and top nav on the first tab of the bottom nav which redirects to the first tab of the top nav. But then have Home (which is the first tab of the bottom nav) go in the top nav and then just have this home tab not visible. Though I've seen some work arounds for this, I haven't gotten any of them to work with my code.
// This is my code, what I want is for Home in the bottom nav to go to the home page
// and on the home page still have the bottom nav and top nav visible.
// How does the menu structure need to look like to make this happen?
export const HomeTop = createMaterialTopTabNavigator({
Introductie:{
screen: Introduction
},
Blog:{
screen: () => <NoAuth/>
},
{...}
});
export const MiddleScreens = createBottomTabNavigator({
Home:{
screen: HomeTop
},
{...}
});
I haven't been able to make it happen what I want to achieve. Also since I'm quite clueless at the moment as to what else to try.
I'm using react navigation V3. Is there a simpler way to make it happen? Or are there any workarounds that work with this version?
In short: I want a top nav and bottom nav on first tab page of bottom nav which is a page on it's own.
I Guess Tabs wont work in the case of yours. Since Tabs will be defaulted to 1st Page of TabList.
One work around will be have two Buttons and a View on the 1st Page of your Top Nav.
Just Like This
Initially load home page on your view, Once user presses Button 1, load your 1st Tab details, if he presses Button 2 load second Tab details.
You can handle this with a flag in state.
Hope it helps. Feel free to clarify if you have any doubts.
Related
I'm currently building an app that has a bottom tab bar with a navigation stack in each tab. Now I want to create an image screen where the tab bar is hidden. I've followed the docs at https://reactnavigation.org/docs/hiding-tabbar-in-screens, which works fine if you only want the user to able to navigate to the screen and then navigate back to the tab stack.
The problem is that I want it to feel like the image screen is part of the tab stack so the user can navigate from the image screen to another screen (i.e. push another screen on top of the stack). This doesn't work for me using the method mentioned above...
I've also tried using the option tabBarVisible: false, but it makes the "hide animation" glitchy (which the docs also warns for: https://reactnavigation.org/docs/bottom-tab-navigator).
I'm new to react-native and I'm trying to add a feature to my navigation. Basically I would like it when you click on a drawer item it would stack a new page accompanied by a back button.
I've searched everywhere to try and figure it out but couldn't find an answer.
The feature is used in an app in the images below.
The arrow next to 'Dublin Bikes' is used for closing drawer menu (not a stack arrow).
After the drawer is opened and you pick either "Settings" or "My Account" a single page is stacked.
It's pretty much using the drawer item as a button to call a stack.
Is there a good way to do this? All I have found is to rebuild the drawer and add them as buttons. That didn't seem right.
Any help would be great. Thanks a lot.
when you click on a drawer item it would stack a new page accompanied by a back button,
what i understood is when you click on drawer button on home screen it should navigate to new screen with back button and not the one currently showing,
i feel for this feature, instead for drawer you can have a custom drawer open button on the header and when you click on that it will navigate ( navigation.navigate("newpage") ) to you new page accompanied by a back button
I need help in React Navigation when I create a tab bar like I have button home and I want to access another screen in the Home with show tab bar inside it to keep selected on the Home icon.
First Screen
Second Screen
I want show tabBar with continue select Home button.
This solved my problem by A stack navigator for each tab.
https://reactnavigation.org/docs/tab-based-navigation/?fbclid=IwAR071_HAYPP9NYGbVHq88j1ZssyBn8226Qnne_PzUdGdIM56XrVD5shU10c#a-stack-navigator-for-each-tab
I think you should have a variable that would keep track of the home page and when you are on it and thus provide the styling you need on the homepage icon....and when you are in the second screen it should be still be set to true so nothing changes
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/
Is it possible to have a tab with BottomTabNavigator that is a "fake" tab that just runs a "onPress" on the current tab that it's on and also marks it as "active"
I would have 3 tabs: Home, Chat, More.
Home is a WebView
When I click the "More" tab, i want to append to the url of the WebView and also mark the "More" tab active.
When I click "Home", I want to remove the appended url from the WebView, and mark the "Home" tab as active
Yes it is possible, just forget doing it with react navigation if you don't want to navigate, and use TouchableOpacity onPress={() => this.setState({activeTab: 'home'})}
Structure it like this.
1 Dashboard component that renders 3 different types of content depending on what this.state.activeTab is. This will always show all three tabs, but the active one can be highlighted.
3 child components that are the content you want to see depending on the active tab.
Should be pretty straightforward but leave a comment if something isn't clear and I'll try to help out.