react-native-tab-view-viewpager-adapter

React Native Tab View ViewPager Adapter

This library is an adapter that allows for utilizing React Native ViewPager in React Native Tab View. With this package, you can replace existing pager responsible for scrolling experience with a purely native one.

Motivation

React Native ViewPager under the hood uses native UIViewPagerController on iOS and ViewPager on Android. Although it's not that customizable as React Native Tab View's Pager built with Reanimated and Gesture Handler, it can deliver a bit better native feeling and expose some options not available in TabView by default.

Usage

import React, { useState } from 'react';
import { TabView, SceneMap } from 'react-native-tab-view';
import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter';

<TabView
  renderScene={() => {/* render */}}
  renderTabBar={() => null}
  renderPager={props => (
    <ViewPagerAdapter {...props} transition="curl" showPageIndicator />
  )}
/>

Props

ViewPagerAdapter accepts a set of props needed for adapting to Internal API of React Native Tab View and are not described here neither supposed to be used.

However, there are few more additional props:

Prop	Description	Platform
style: Style	Style to apply to ViewPager	both
pageMargin: number	Blank space to be shown between pages	both
orientation: Orientation	Set horizontal or vertical scrolling orientation (it does not work dynamically)	both
transition: string	Use scroll or curl to change transition style (it does not work dynamically)	iOS
showPageIndicator: boolean	Shows the dots indicator at the bottom of the view	iOS
overdrag: boolean	Allows for overscrolling after reaching the end or very beginning of pages	iOS
overScrollMode: OverScollMode	Used to override default value of overScroll mode. Can be auto, always or never. Defaults to auto	Android

You can find more resources in React Native ViewPager documentation

Usage with React Navigation < 5

const SwipeStack = createMaterialTopTabNavigator(
  {
    A: {
      name: 'A screen',
      screen: ScreenA,
    },
    B: {
      name: 'B screen',
      screen: ScreenB,
    },
  },
  {
    pagerComponent: ViewPagerAdapter
  }
);

Usage with React Navigation 5

const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();

export default function MaterialTopTabsScreen() {
  return (
    <MaterialTopTabs.Navigator
      pager={props => <ViewPagerAdapter {...props} />}
    >
      <MaterialTopTabs.Screen
        name="A"
        component={ScreenA}
        options={{ title: 'Chat' }}
      />
      <MaterialTopTabs.Screen
        name="contacts"
        component={ScreenB}
        options={{ title: 'Contacts' }}
      />
    </MaterialTopTabs.Navigator>
  );
}

Installation

yarn add react-native-tab-view-viewpager-adapter

Also, you need to set up React Native View Pager

Note

renderPager prop in React Native Tab View is available only from version 2.11.0

Example

We created a React Native example which can be run with following commands:

cd example
react-native run-android

or

cd example
cd ios
pod install
cd ..
react-native run-ios