Learn React Native — Custom Bottom Tab Navigation

I ended up using react navigation for the nav lib on Wasabi Mobile. Here’s how I customized it to get a custom look and how I used it to display the Player component when music is playing.

Here’s what the bottom navigation bar looks like with the player off

Here’s what the bottom navigation bar looks like with the player on

The code for this is straight forward (says the dude that spent a whole Saturday figuring this out). All you have to do is use createBottomTabNavigator() to create the bottom navigator like this

Bottom tab navigator for Wasabi Mobile

Where MAIN_SCREENS_ARRAY looks like

Array of screens for the tab navigator

And BottomTabBar being the component that is displayed on the screen, looking like this

If you want to read the full code make sure to check out the GitHub

If you are looking for mobile developers for your next mobile app or want to read more about mobile app development visit our website.

Digital art dealers

Making mobile development easier one line of code at a time

follow us on