Syed Ahmad Abdullah Ali
1 min readOct 17, 2021
Tab Navigation in React Native

Tab Navigation is very hot and commonly used feature in any application build using React Native. It is a very common type of navigation in any application. It can either be on the top just below the header or at the bottom of the screen.

Dependencies:

To enable tab navigation in your mobile app, you need to look into some dependencies and then you have to install them. If you are working through npm you just have to type:

npm install @react-navigation/bottom-tabs and if we you are using through yarn then just replace the npm with yarn.

Implementation:

Furthermore, to implement tab navigation, you will have to import { NavigationContainer } and { createBottomTabNavigator } from react native libraries. If you are working with class components, make classes of the screens you want to add in your tab navigator bar and if you are working with function components then makes functions of your screens.

Then in the default App.js, you have to initialize your navigation container and tab container with tab components. By following the above steps, you will be able to use tab navigator in your applications.

You can also customize your tab bar with different icons or badges. For that you have to use tabBarBadge.