TabView in React Native – A Complete Overview for 2025

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.

Key Summary

This article from InApps Technology, authored by Phu Nguyen, provides a detailed guide on implementing a TabView component in React Native, a JavaScript framework for building native mobile applications for iOS and Android. It explains React Native’s core functionality, introduces the TabView component (built on react-native-pager-view), and offers a step-by-step tutorial on setting up a new project using Expo and integrating a TabView. The article emphasizes practical implementation with code examples, focusing on cross-platform tab navigation.

• Context:
  • React Native Overview:
    • Built on React, it uses JSX (JavaScript + XML-like markup) to create native mobile apps.
    • Leverages the React Native bridge to invoke native rendering APIs (Objective-C for iOS, Java for Android), ensuring apps use real mobile UI components (not webviews).
    • Exposes platform APIs (e.g., camera, location) for rich functionality.
  • TabView Definition: A cross-platform component for tabbed navigation, implemented using react-native-pager-view for iOS and Android.
  • Purpose: Guide developers on creating a new Expo project and implementing a TabView for seamless tab navigation in mobile apps.
• Tutorial: Creating a Project and Implementing TabView:
  • Prerequisites:
    • Install WebStorm or VSCode, Node.js, and Expo CLI.
    • Run npm install -g expo-cli to install Expo globally.
  • Create a New Project:
    • In terminal, navigate to desired directory and run:
      text
      CollapseWrap
      Copy

expo init newapp

• cd newapp
• This creates a folder named newapp for the project.

• Install Dependencies:
  • Install react-native-tab-view:
    text
    CollapseWrap
    Copy
  • yarn add react-native-tab-view
  • Install react-native-pager-view:
    text
    CollapseWrap
    Copy
  • yarn add react-native-pager-view
• Run the App:
  • Start the Expo server:
    text
    CollapseWrap
    Copy
  • expo start
  • Install the Expo app on your mobile device (from Play Store/App Store).
  • Scan the QR code from the Expo server to run the app on your device.
• Implement TabView:
  • TabView Component: Manages and renders tabs, following Material Design styles.
  • TabBar Component: Default tab bar implementation, customizable via props.
  • Key Props:
    • navigationState: Defines the active tab (index) and tab list (routes with key, title, etc.).
    • onIndexChange: Updates the active tab index.
    • renderScene: Renders the content for each tab using SceneMap.
    • renderTabBar: Customizes the tab bar (e.g., colors, styles).
    • initialLayout: Sets initial screen dimensions for performance.
  • Example Code:
    jsx
    CollapseWrap
    Copy

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 }}

   />

 );

• }
• Explanation:
  • Defines two tabs (FirstRoute, SecondRoute) with distinct styles and content.
  • Uses SceneMap to map routes to components.
  • Customizes TabBar with colors and margins.
  • Manages tab state with index and routes.
  • Optimizes rendering with initialLayout.

• Key Components:
  • TabView: Container for tab management, controlled via navigationState and onIndexChange.
  • TabBar: Renders the tab bar, customizable for styling (e.g., activeColor, inactiveColor).
  • SceneMap: Simplifies mapping of routes to components for efficient rendering.
  • Props Details:
    • navigationState: Requires index (active tab) and routes (array with key, title, etc.).
    • renderScene: Returns React elements for each tab’s content.
    • initialLayout: Enhances initial rendering performance by setting screen width.
• InApps Insight:
  • InApps Technology, ranked 1st in Vietnam and 5th in Southeast Asia for app and software development, specializes in React Native development for cross-platform mobile apps.
  • Leverages React Native, ReactJS, Node.js, Vue.js, Microsoft’s Power Platform, Azure, Power Fx (low-code), Azure Durable Functions, and GraphQL APIs (e.g., Apollo) to build robust mobile solutions.
  • Offers outsourcing services for startups and enterprises, delivering React Native apps with components like TabView at 30% of local vendor costs, supported by Vietnam’s 430,000 software developers and 1.03 million ICT professionals.
• Call to Action:
  • Contact InApps Technology at www.inapps.net or sales@inapps.net to develop React Native applications with advanced features like TabView or explore mobile development solutions.

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