or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdpager-view.mduse-pager-view.md
tile.json

tessl/npm-react-native-pager-view

React Native wrapper for Android and iOS ViewPager

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-pager-view@7.0.x

To install, run

npx @tessl/cli install tessl/npm-react-native-pager-view@7.0.0

index.mddocs/

React Native Pager View

React Native Pager View is a cross-platform wrapper component for native ViewPager implementations on Android (ViewPager2) and iOS (UIPageViewController). It enables developers to create swipeable page interfaces with smooth native performance, supporting both horizontal and vertical scrolling, programmatic navigation, and extensive customization options.

Package Information

  • Package Name: react-native-pager-view
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-pager-view

Core Imports

import PagerView from "react-native-pager-view";
import { usePagerView } from "react-native-pager-view";

For type imports:

import type { 
  PagerViewProps,
  PagerViewOnPageScrollEvent,
  PagerViewOnPageSelectedEvent,
  PageScrollStateChangedNativeEvent 
} from "react-native-pager-view";

Basic Usage

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';

export default function App() {
  return (
    <PagerView style={styles.pagerView} initialPage={0}>
      <View style={styles.page} key="1">
        <Text>First page</Text>
      </View>
      <View style={styles.page} key="2">
        <Text>Second page</Text>
      </View>
      <View style={styles.page} key="3">
        <Text>Third page</Text>
      </View>
    </PagerView>
  );
}

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
  page: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Architecture

React Native Pager View is built around several key components:

  • PagerView Component: Main container component that wraps native ViewPager implementations
  • Native Bridge: Connects to platform-specific ViewPager components (ViewPager2 on Android, UIPageViewController on iOS)
  • Event System: Provides callbacks for scroll events, page selection, and state changes
  • Imperative API: Methods for programmatic navigation and configuration
  • Hook Integration: usePagerView hook for managing state and animations with React Native Reanimated

Capabilities

PagerView Component

Core ViewPager component providing swipeable page navigation with native performance and extensive configuration options.

export default class PagerView extends React.Component<PagerViewProps> {
  setPage(selectedPage: number): void;
  setPageWithoutAnimation(selectedPage: number): void;
  setScrollEnabled(scrollEnabled: boolean): void;
}

PagerView Component

State Management Hook

React hook for managing PagerView state, animations, and programmatic control with React Native Reanimated integration.

function usePagerView(params?: UsePagerViewParams): UsePagerViewProps;

interface UsePagerViewParams {
  pagesAmount: number;
}

interface UsePagerViewProps {
  ref: React.MutableRefObject<PagerView | null>;
  activePage: number;
  isAnimated: boolean;
  pages: number[];
  scrollState: string;
  scrollEnabled: boolean;
  progress: { position: number; offset: number };
  overdragEnabled: boolean;
  setPage: (page: number) => void;
  addPage: () => void;
  removePage: () => void;
  toggleScroll: () => void;
  toggleAnimation: () => void;
  toggleOverdrag: () => void;
  onPageScroll: Animated.Event;
  onPageSelected: Animated.Event;
  onPageScrollStateChanged: (e: PageScrollStateChangedNativeEvent) => void;
  AnimatedPagerView: React.ComponentType<PagerViewProps>;
  PagerView: typeof PagerView;
}

State Management Hook

Types

Event Types

type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<{
  position: number;
  offset: number;
}>;

type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<{
  position: number;
}>;

type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<{
  pageScrollState: 'idle' | 'dragging' | 'settling';
}>;

Props Interface

interface PagerViewProps extends ViewProps {
  scrollEnabled?: boolean;
  layoutDirection?: 'ltr' | 'rtl';
  initialPage?: number;
  orientation?: 'horizontal' | 'vertical';
  offscreenPageLimit?: number;
  pageMargin?: number;
  overScrollMode?: 'auto' | 'always' | 'never';
  overdrag?: boolean;
  keyboardDismissMode?: 'none' | 'on-drag';
  onPageScroll?: (event: PagerViewOnPageScrollEvent) => void;
  onPageSelected?: (event: PagerViewOnPageSelectedEvent) => void;
  onPageScrollStateChanged?: (event: PageScrollStateChangedNativeEvent) => void;
}