Crafting Bottom Tabs in React Native: A Quick Guide
Vitalii Bazyvoliak
Senior Software Engineer
September 6, 2023 7 min read
Quick summary

Welcome to our new technical rubric! Here, our tech-savvy innovecsers pull back the curtain on the digital world. Join us on a journey through the realms of coding, innovation, and all things tech. Get ready to explore the minds behind the magic, as we share our technical expertise and unveil the secrets of sleek digital solutions. Our first article in this section was prepared by Vitalii Bazyvoliak, Senior Software Engineer at Innovecs. Read, save to shortcuts, and use this guide whenever you need 😉

Hey, everyone! Today I will tell you how to create bottom tab navigation with your own icons. Icons and text will change color when active.

First, we need to add a @react-navigation/native library with navigation to our project as well as @react-navigation/bottom-tabs  and two more dependencies — react-native-screens, react-native-safe-area-context

Afterward, you must go to the ios folder and execute the pod install command.

In order to start using navigation, you need to create at least two screens (components) to which the user will be able to go, in my case, it will be “HomeScreen” and “SettingsScreen”.

After creating them, I can start creating the navigation between them using the bottom tabs. To do this, we must:

  • wrap our code in a NavigationContainer
  • create a Tab.Navigator using the createBottomTabNavigator function
  • put it in the NavigationContainer and initialize a Tab.Screen inside it for each component that needs to be navigated to.

This is how I did it:

That’s all you need to write a basic navigation with buttons.

This is what the app will look like on a mobile device:

As we can see, the standard icons on the buttons are unattractive, so we will replace them now. I will use a svg image, which allows you to correctly fit it to any size. To do this, I need to add it to our project.

To use svg, we need to download a react-native-svg library:

After that, I uploaded two svg images. Now, I need to take their code and turn them into JSX elements.

Pictures from svg can be transformed into a JSX element on a separate site, for example, https://react-svgr.com/playground/?native=true.

After this was done, I placed them along the path src/assets/svg/icons, and I got these two files.

After that, we need to import them in the file with our navigation and add tabBarButton with onPress and accessibilityState props, which are necessary in order to understand which tab is selected in the Tab.Screen options.

In it, you need to create a TouchableOpacity, where we place our svg, specifying its size and the “fill” value to change the color, this is exactly what we do for the text under the icon. If the tab is selected, the color of our icons will be red, all others will be black.

I also apply styles.iconWithText:

  iconWithText: {
            alignItems: ‘center’,
            justifyContent: ‘center’,
            flexGrow: 1,
}
Copied
show more show less

This is the code we get at the end for each of the buttons:

And I have attached a display of the finished work on a mobile device:

So, as you can see from this guide, it doesn’t take much effort to replace icons and manipulate them. By doing it yourself, you will be convinced of the ease of using the navigation and custom elements for it, and if you have difficulties, you can always review this guide and do everything right.

Get in touch

    Thank you for your interest in Innovecs. If you're a client or a job seeker, the perfect way to connect with us awaits you below.
    Your CV has landed in our inbox, and we couldn't be happier! If your skills and experiences match the position requirements, we will be sure to get in touch with you.

    We appreciate your patience and your interest in being a part of our team.