One of the purposes of ‘the Rabbit Hole’ was to journal some of my thought processes when I’m trying to tackle a problem. This was one of them: Adding a route to my react-native app without having the need for a tab to be displayed.
This came up in the development of my personal budget tracking tool. I wanted 4 main tabs:
- A daily summary to show how I’m performing against budget for that day
- A monthly ledger of all my purchases for that calendar month
- A categorised summary of my spending for that month including a pie chart
- A settings tab
I also wanted to include an ‘Add Entry’ button, but I didn’t want this to have it’s own tab. It should be a button that is displayed in the main summary screen and will bring up the ability to add a new purchase entry.
I had set up the app with create-react-native-app which came with React-Navigation as the chosen routing option. From reading many blog posts this seems to be the defacto choice for react-native routing options so I’m glad this came as standard!
So, I want a route that doesn’t show up as it’s own tab. How do I do that? Here’s some of the problems I encountered along with my solution below:
Problem 1) Knowing where to start?!
Of course, reading the documentation would be an obvious starting point, however it can get confusing, particularly if you have no exposure to the tech in the first place.
I read the docs with reference to the boilerplate routing provided with create-react-native-app:
It was in these two files where my confusion grew. I didn’t want to add a new element to the Tab Navigator as this suggested a new tab icon would be created for my add entry screen. But how would it fit in the main Navigator? I’m sure that reading more documentation will help me improve my understanding of them, but right now I’m still struggling to decrypt it! This led me to problem 2:
Problem 2) Adding routing but tab footer hidden for all tabs
I created a new constant called ‘AddEntry’, set it equal to a createStackNavigator function calling AddEntry fields (in the same manner as the tab navigator example) and exported that constant to be imported into the Main Navigation branch. So now I would have an AddEntry screen being handled by it’s own routing.
But because this was separated, it meant that whenever I did manage to navigate to the AddEntry screen, I would lose the tabs that I did want from the bottom of my screen. This is annoying as I had no way to navigate back to the other screens I had set up.
Solution: Nesting the routing option
Sometimes you need to be told the same thing in a few different ways before you start to understand what’s going on. I watched this video walkthough and read this blog post which, along with the documentation, lead me to my answer.
Under my main navigation code I would need to add an additional route to one of the screens where I wanted it to be accessible from.
As can be seen above, this was needed to be inserted in the ‘createStackNavigator’ function, the more web-like version of react-native’s routing options. Allowing for this meant that I could now access the AddEntry screen without losing the tab navigation at the footer of the app, as displayed below.
Note that to go to the screen we wish to route to we called the code below from within one main summary screen:
That’s it. This is a very basic react-navigation issue and the docs and other blog posts do a great job at explaining the do’s/do nots of react-native routing, but I hope this post may be able to help others who had the same basic issue when setting up their first react-native app.
Resources:
Routing in React Native apps and how to configure your project with React-Navigation library — 2×01
Getting Started with React Navigation, the Navigation Solution for React Native