How Do I Use Tabview in React Native?

React native is one of the most prominent app development open-source platforms for mobile and web for Android and iOS. It can be implemented with JavaScript, Java, C++, Python, and Objective C. React Native offers a pretty decent range of tools for creating visually alluring applications. For this article, we shall take a look at the Tabview feature of React Native, and how it can be used.

What is Tabview?

Tabview in React Native provides tabbed navigation for content in the application. The application users can scroll the tabs, move them vertically and horizontally for a smoother user interface. This cross-platform component can be implemented by using react-native-pager-view for Android and iOS, and by using PanResponder for the web. Tabview offers smooth animations and gestures in the application and supports both top and bottom tab bars.

It is fully customizable and can be typed fully with TypeScript. Smooth swipeable content is a popular feature in several applications. The Tabview component follows the Material Design spec by default and utilizes a stateful API. There can be multiple options for Tabview display like coverflow swipe, or text-only top bars as shown in the above image.

Installation Process

Upon opening a terminal in the project root, run:

yarn add react-native-tab-view

The next step would be to install

react-native-pager-view

If Expo is being used, then it is advisable to get the compatible versions of libraries and run:

expo install react-native-pager-view

In case of Expo not being used,

yarn add react-native-pager-view

Once this process is complete, the user can start to build and run the application on the device.

Quick Start

import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

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,
  });

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  );
}

Tabview

This is the container component that facilitates the rendering and management of tabs. By default, it follows the material design styles. Following below is an instance of basic usage:

<TabView
  navigationState={{ index, routes }}
  onIndexChange={setIndex}
  renderScene={SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  })}
/>

Props of Tabview

Following below are some of the props used in Tabview:
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
Following below is an example:

{
  index: 1,
  routes: [
    { key: 'music', title: 'Music' },
    { key: 'albums', title: 'Albums' },
    { key: 'recents', title: 'Recents' },
    { key: 'purchased', title: 'Purchased' },
  ]
}

onIndexChange (required)

Callback which is called on tab change receives the index of the new tab as an argument. The navigation state needs to be updated when it's called, otherwise, the change is dropped.

renderScene (required)

Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:
To boost efficiency, make sure that your individual routes implement a shouldComponentUpdate. You can use the SceneMap helper to make specifying the components easier.
SceneMap takes a route.key to React component mapping object and produces a method to use with the renderScene attribute.

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's a callback that returns a custom React Element that may be used as a tab bar:

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

The default tab bar is rendered if this is not provided. These props can be used to tweak the default tab bar, offer your own tab bar, or altogether eliminate the tab bar.

initalLayout

It's the object that holds the displays' original height and width. The initial rendering performance will be improved as a result of this. This is a nice default for most apps:

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

TabView has a number of different characteristics that can be used for a variety of purposes, such as styling the component.
The whole code can be summarised as follows:

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 }}
  	/>
  );
}