Skip to main content

React Native Tab View

React Native Tab View is a cross-platform Tab View component for React Native implemented using react-native-pager-view on Android & iOS, and PanResponder on Web, macOS, and Windows.

It follows material design guidelines by default, but you can also use your own custom tab bar or position the tab bar at the bottom.

If you need React Navigation integration, e.g. show screens in the tab bar and be able to navigate between them using navigation.navigate etc, use Material Top Tab Navigator instead.

Installation​

To use this package, open a Terminal in the project root and run:

npm install react-native-tab-view

The library depends on react-native-pager-view for rendering the pages.

If you have a Expo managed project, in your project directory, run:

npx expo install react-native-pager-view

If you're on a Mac and developing for iOS, you also need to install pods to complete the linking.

npx pod-install ios

Quick start​

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

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

const routes = [
  { key: