CODEWITHSUNDEEP
react-nativereact-navigation
Clemens Philipse
Clemens Philipse

Reputation: 75

How to have a top nav and bottom nav on first tab page of bottom nav which is a page on it's own?

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.

  1. 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.
  2. 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.

Upvotes: 0

Views: 161

Answers (1)

Dhivakar Ragupathy
Dhivakar Ragupathy

Reputation: 86

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 enter image description here

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.

Upvotes: 1

Related Questions