How to create top tab bar in react native năm 2024

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/native`then after that, you have to install the @react-navigation/material-top-tabs`

1. yarn add @react-navigation/native
2. yarn add react-native-screens react-native-safe-area-context
3. yarn add @react-navigation/material-top-tabs react-native-tab-view
4. yarn 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 ios
• pod 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 @react-navigation/material-top-tabs`1. So it’s better to wrap it in `App.tsx or `@react-navigation/material-top-tabs`3.

React native top tab bar declaration

So as you can see we have imported the @react-navigation/material-top-tabs`4 from @react-navigation/material-top-tabs`. Then we have to create the tab screens that are wrapped in a @react-navigation/material-top-tabs`6. It accepts quite a number of parameters. So here I have added @react-navigation/material-top-tabs`7, @react-navigation/material-top-tabs`8 and @react-navigation/material-top-tabs`9(which is the custom tab bar that we have created).

Then inside that navigator, we added the `yarn add @react-navigation/native`0 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 @react-navigation/material-top-tabs`9 prop on @react-navigation/material-top-tabs`6 it gives access to some props like `yarn add @react-navigation/native`3, `yarn add @react-navigation/native`4 and `yarn add @react-navigation/native`5. 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 yarn add @react-navigation/native`6 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 `yarn add @react-navigation/native`7 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, @react-navigation/material-top-tabs`6 we can get the current position as `yarn add @react-navigation/native`9 . 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 `yarn add @react-navigation/native`9 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 `yarn add react-native-screens react-native-safe-area-context`1 we have to now give the input range and output range.

`yarn add react-native-screens react-native-safe-area-context`2

input range: `yarn add react-native-screens react-native-safe-area-context`3

output range: `yarn add react-native-screens react-native-safe-area-context`4

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 `yarn add react-native-screens react-native-safe-area-context`6

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 `yarn add react-native-screens react-native-safe-area-context`7 are the props that we are passing to the TabBar component.

`yarn add react-native-screens react-native-safe-area-context`8

`yarn add react-native-screens react-native-safe-area-context`9

`yarn add @react-navigation/material-top-tabs react-native-tab-view`0

`yarn add @react-navigation/material-top-tabs react-native-tab-view`1

Here we have extracted the tab name from the descriptors prop. We have added the options\={{title: ‘Sing Up’}} or options\={{title: ‘Sing In’}} in the `yarn add @react-navigation/material-top-tabs react-native-tab-view`2 `yarn add @react-navigation/material-top-tabs react-native-tab-view`3 is the tab index.

Here we can’t use `yarn add @react-navigation/material-top-tabs react-native-tab-view`4 hook. But to navigate among tabs we can use `yarn add @react-navigation/native`4 prop which is coming along with the props. From that, we can navigate to the `yarn add @react-navigation/material-top-tabs react-native-tab-view`6 which we have given in the `yarn add @react-navigation/material-top-tabs react-native-tab-view`2

We also declared the yarn add @react-navigation/material-top-tabs react-native-tab-view`8 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.

So that’s it pretty much for this react native top tab bar component. I hope you had a good understanding of this react native tab bar example.

If you have any questions or comments — feel free to comment here or reach out at [email protected]. Thank you.

How do I customize the top tab bar in react

Add icons to the tab bar For this example, let's use AntDesign based icons. import Icon from 'react-native-vector-icons/AntDesign'; Using the screenOptions object on Tab. Navigator, we can enable the configuration to display icons for each tab.

How do I use the tab bar in react

import { TabBar } from 'react-native-tab-view'; ... If this is not specified, the default tab bar is rendered. You pass this props to customize the default tab bar, provide your own tab bar, or disable the tab bar completely.

What is top tab style in react

React Native Top Tab Navigator. (createMaterialTopTabNavigator) The material style createMaterialTopTabNavigator is used to create tab navigator on the top of the screen. It provides functionality to create and display multiple screens routers.

How do I create a custom tab in react

Create custom react native tabs view.

yarn add @react-navigation/native..

yarn add react-native-screens react-native-safe-area-context..

yarn add @react-navigation/material-top-tabs react-native-tab-view..

yarn add react-native-pager-view..