How do we create a custom react native tabs view by using the animated module which comes along with react native? In this react native tabs tutorial, I am going to show how to can create react native tab bar and how we can do the tab bar navigation. So these react native custom tabs can be used in your react native project.
First, let’s see how we are going to create this react native tab view;
Create custom react native tabs view
List of packages that we need to implement react native top tab bar
I am assuming that you already set up your react native project. If not set up your environment check this for react native environment setup. After react native you have to install the @react-navigation/nativethen after that, you have to install the @react-navigation/material-top-tabs
yarn add @react-navigation/nativeyarn add react-native-screens react-native-safe-area-contextyarn add @react-navigation/material-top-tabs react-native-tab-viewyarn add react-native-pager-view
These are the packages you need to install and also for these installations, I have already attached the documentation related to these installations. You can check if you get any issues with installation or contact me. After all, these were completed successfully If you’re on a Mac and developing for iOS, you also need to install the pods to complete the linking. So navigate to your ios folder from the command line and install pods.
cd iospod install
Then let’s see what our code looks like. So I am going to show you the complete code from the beginning and after that, we will explain it in detail.
Here is my App.tsx file.
Here is the tab bar component which is created with the material top tabs navigator.
Custom react native tabs view code.
So as you can see above tabWidth depends on the length of the number of tabs. That means how many tabs we are going to add. So we are going to create tabs with material top tabs navigator. Then when we tap on the tabs we are going to move the tab bar to the selected tab.
App.tsx for react native tabbar
Let’s look at the App.tsx code now. We have wrapped the react native tab bar component with SafeAreaView and the NavigationContainer. The goal of SafeAreaView is to display content only inside a device’s safe area. Only IOS devices running IOS version 11 or later are presently eligible. if we are using react navigation we have to wrap our component with NavigationContainer. So it’s better to wrap it in App.tsx or index.tsx.
React native top tab bar declaration
So as you can see we have imported the createMaterialTopTabNavigator from @react-navigation/material-top-tabs. Then we have to create the tab screens that are wrapped in a TabNav.navigator. It accepts quite a number of parameters. So here I have added sceneContainerStyle, style and tabBar(which is the custom tab bar that we have created).
Then inside that navigator, we added the TabNav.Screen which we can give our component and name for the specific tab.
AnimatedTabs component
Let’s look into the react native tabs view component. So when we add our react native custom tabs component to the tabBar prop on TabNav.navigator it gives access to some props like state, navigation and descriptors. We can access these in the custom component.
As you can see we can get the routes that we are passing from the state. So when the custom tab bar is mounting then we are calling the onLayout function so that we can get the layout width. Then we are setting that layout width to the component state itself. The only thing that we are going to animate here is the bottom bar. So we have created a separate Animated.View and added the react native tab bar style there. Let’s see how we can move the custom tab bar to the X direction when the position changes. So from the custom tab bar props that pass from the, TabNav.navigator we can get the current position as props.position . Then we can use interpolate function that comes with the animated module.
So for the first time when the component loads the original position is 0 which means props.position is 0. Also, we have positioned that view with absolute positioning and have given the bottom to 0. So that the tab bar will be moved to the bottom of the text.
For interpolate we have to now give the input range and output range.
tabWidth = tabBarWidth / state.routes.length
input range: [0, 1, 2, ........]
output range: [0, 1 * tabWidth, 2 * tabWidth]
So in this example, you have two tabs only. Assume you press on the second tab, then ideally the tab bar should move tabWidth to the X direction. That’s what we have added to the output range.
Like this, you can add multiple tabs more than two to your TabNav.navigator.
TabBar Component
In the tab bar component itself, we have a couple of props that we need to get the active tab, tab name etc. So tabWidth, navigation, state, descriptors,index are the props that we are passing to the TabBar component.
const tab = state.routes[index]const activeTab = state.routes[state.index]const tabIsActive = tab.name === activeTab.nameconst tabName = descriptors[tab.key].options.title ?? tab.name(extracted from react native tabbaroptions)TabNav.Screen. tab.key is the tab index. useNavigation hook. But to navigate among tabs we can use navigation prop which is coming along with the props. From that, we can navigate to the tab.name which we have given in the TabNav.Screen. tabIsActive parameter so as to customize the react native tab bar style when the active tab is focused. We can change the colour of the text of the active tab. Initially, for the container styles, we set the tab bar height. And also like in the react native tab bar(bottom line) above we have to set the same tabWidth for the text container(TabBar component) as well. Then only the react native tabbar will start working as expected.
Leave A Comment