TabView in React Native – A Complete Overview for 2022

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It is based on React, Facebook’s JavaScript library for building user interfaces and it targets mobile platforms.

React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in or Java (for Android) and Objective-C (for iOS). Thus, your application will be rendered using real mobile UI components, not webviews, and it will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

What is TabView in react native?

It is a cross-platform Tab View component for React Native. It is implemented using react–native–pager-view on Android & iOS.

What you will learn in this article?

1. How to create a new Project using expo.
2.  How to implement TabView in React Native.

Before you start you should have WebStorm or VSCode, expo and Node.js installed in your computer.

Open your terminal and follow along

1. To install expo you need to follow the following step:

npm install -g expo-cli

This will install expo-cli in your system globally.

2. To create a new Project:

Open command prompt in the location where you want to create your project.

In the command prompt write following commands:

expo init newapp

3. To navigate to the folder: newapp is the folder name which will be created.

cd newapp

You will find a folder named ‘newapp’ in your directory where you created the project. Open that in WebStorm/ VSCode.

Open a Terminal in the project root and run:

yarn add react-native-tab-view

Now we need to install react-native-pager-view.

yarn add react-native-pager-view

Now we have to run the app using the following command:

expo start

To run the app on your device:

Install expo from playstore.

Scan the QR code from the Expo Server started in your browser.

This will start the application in your device

The package – react-native-tab-view exports a TabView component which is the one you’d use to render the tab view, and a TabBar component which is the default tab bar implementation used in this package.

Lets try to understand the components at an individual level:

TabView

It is a container component responsible for managing and rendering tabs. It follows material design styles by default.

Its usage is as follows:

Basic usage look like this:

<TabView

navigationState={{ index, routes }}

renderScene={renderScene}

renderTabBar={renderTabBar}

onIndexChange={setIndex}

initialLayout={{ width: layout.width }}

/>

 There are various props used in TabView. Some of them are stated below:

navigationState (required)

It represents the state for the tab view. The state should contain the following properties:

• index: a number representing the index of the active route in the routes array
• routes: an array containing a list of route objects used for rendering the tabs

Each route object should contain the following properties:

• key: a unique key to identify the route (required)
• title: title for the route to display in the tab bar
• icon: icon for the route to display in the tab bar
• accessibilityLabel: accessibility label for the tab button
• testID: test id for the tab button

Example:

const [index, setIndex] = React.useState(0);

const [routes] = React.useState([

  { key: 'first', title: 'First' },

  { key: 'second', title: 'Second' },

]);

TabView is a controlled component, which means the index needs to be updated via the onIndexChange callback.

onIndexChange (required)

It is a callback which is called on tab change, it receives the index of the new tab as argument. The navigation state needs to be updated when it’s called, otherwise the change is dropped.

renderScene (required)

It is a callback which returns a react element to render as the page for the tab. It receives an object containing the route as the argument.

You need to make sure that your individual routes implement a shouldComponentUpdate to improve the performance. To make it easier to specify the components, you can use the SceneMap helper.

SceneMap takes an object with the mapping of route.key to React components and returns a function to use with renderScene prop.

const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: 'grey'}}>
  <Text>Tab One</Text>
</View>
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: 'darkgrey'}} >
  <Text>Tab Two</Text>
</View>
);

const renderScene = SceneMap({

  first: FirstRoute,

  second: SecondRoute,

});

renderTabBar

It is a callback which returns a custom React Element to use as the tab bar:

const renderTabBar = props => (
<TabBar
    {...props}
    activeColor={'white'}
    inactiveColor={'black'}
        style={{marginTop:25,backgroundColor:'red'}}
/>
);

If this is not specified, the default tab bar is rendered. You pass these props to customize the default tab bar, provide your own tab bar, or disable the tab bar completely.

initialLayout

It is the object containing the initial height and width of the screens. This will improve the initial rendering performance. For most apps, this is a good default:

<TabView
initialLayout={{ width: layout.width }}
/>

There are various other properties which can be implemented in TabView for various other purpose such as styling the component etc.

The entire code can be summed up as:

import * as React from 'react';
import { View, useWindowDimensions, Text} from 'react-native';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: 'grey'}}>
  <Text>Tab One</Text>
</View>
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: 'darkgrey'}} >
  <Text>Tab Two</Text>
</View>
);
 
export default function TabViewExample() {
  const layout = useWindowDimensions();
 
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
  ]);
 
  const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
  });
 
  const renderTabBar = props => (
  <TabBar
      {...props}
      activeColor={'white'}
      inactiveColor={'black'}
          style={{marginTop:25,backgroundColor:'red'}}
  />
  );
 
  return (
  <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
  />
  );
}