App with multiple pages to not appear on bottom navigation

I am trying to create a bottom navigation that has only three buttons (home, me and navigation), but I’m going to have additional pages that will be navigated to from the home page. If I put those screens under that bottom navigation, they appear in the bottom navigation. If I remove them from the bottom navigation, there is no bottom navigation on those pages. Is it possible to have the home page navigate to pages that don’t fall under the bottom navigation where the bottom navigation can still appear so they can navigate back to home easily?

Have you tried putting buttons on the home screen that you could click to take you to a new screen, and then just have the bottom navigator stay with you on the new screen?

1 Like

I’ve put the buttons on the home screen and it takes me to the new screen, but I don’t know how to keep the bottom navigator stay with me on the new screen. How is that accomplished?

Well I was about to thunk some code but I think the sever crashed? I will try to get some to you soon

But have you tried on your new using “when screen opens” and then essentially just mimicking what you did in your home screen on that screen?

1 Like

I’m pretty new to all of this. If you could provide some code, it would be amazing.

I haven’t tried “when screen opens” block yet. The home screen has the Bottom Tab Navigator component on it, but if there is a way to make it appear on the other screens through blocks, that would be amazing!

@leah.marie.glick599p Hey! I’m thinking that you added a navigator but didn’t add the new screens to the navigator. Check out my video on how to do that.

Thank you for that Jared! The problem is, there are screens that I don’t want the bottom navigation to have listed (way too many pages for that). I have a home screen with 9 different links, and only three of them will be listed in the bottom navigation. Is there a way to have the bottom navigation show up on all of those pages even though they’re not listed in the bottom navigation?

1 Like

ahha!

not at this time. There is a workaround only. Instead, you will make a column/row with absolute positioning with an 0px bottom offset and then add the buttons you want to navigate to different pages. you can style it to look like that actual tab navigator.

see what i did here

and instead of the buttons contorlling dynamic content on the screen, you could add a similar feature to each screen that works as a navigator.

1 Like

@leah.marie.glick599p

Here’s a demo with 4 screens, 3 of which are in the drawer navigator (but the concept is the same for a tab navigator)

https://thunk.app/w/YJ6m24PnR

The motivation here was that user has to go through a PIN challenge first, before being able to get to Screen3.

The trick to making this work is to use the component tree, in the top left of the design screen.

Screenshot 2020-04-03 at 19.56.05

Notice here that Screen3 is actually “outside” the navigator, while Screen1, Screen2 and Pin Challenge are all part of, and displayed in, the navigator.

Apologies the sample app is so rough and ready, this was an example I prepared for a user yesterday. I’ll tidy it up and prepare a short tutorial next week. (Hopefully!)

2 Likes

That sounds great, thank you domhnallohanlon!

1 Like