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:
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,
},
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.