react-native-pager-view

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the latest Release Notes.

@amazon-devices/react-native-pager-view provides support on Kepler for PagerView library 3P PagerView by Callstack using the Stable API.

The Pager View component makes it easy to handle paginaton with dynamic views. It allows user to swipe left and right through pages of data.

Installation

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.
- React Native 0.72
- React Native 0.83
Copied to clipboard.
"dependencies": { ... "@amazon-devices/react-native-pager-view": "~2.0.3" }
Copied to clipboard.
"dependencies": { ... "@amazon-devices/react-native-pager-view": "~2.0.3" }
Reinstall dependencies using npm install command.

Examples

Copied to clipboard.

import React, { useMemo } from 'react';
import { StyleSheet, View, Animated, Text } from 'react-native';
import PagerView from '@amazon-devices/react-native-pager-view';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export function App() {
  const pages = useMemo(
    () => [
      { key: 'page1', style: { backgroundColor: 'powderblue' } },
      { key: 'page2', style: { backgroundColor: 'skyblue' } },
      { key: 'page3', style: { backgroundColor: 'steelblue' } },
    ],
    []
  );

  return (
    <View style={styles.container}>
      <AnimatedPagerView
        style={styles.PagerView}
        initialPage={0}
        pageMargin={10}
      >
        {useMemo(
          () =>
            pages.map((page, index) => (
              <View
                testID="pager-view-content"
                key={page.key}
                style={page.style}
                collapsable={false}
              >
                <Text>{`page number ${index}`}</Text>
              </View>
            )),
          [pages]
        )}
      </AnimatedPagerView>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  PagerView: {
    flex: 1,
  },
});

API Supported on Vega

Component API

Prop	Description	Default
`initialPage`	Sets which page is shown when the component is first mounted.	`0`
`onPageScroll`	Callback triggered when the user scrolls between pages.	–
`onPageScrollStateChanged`	Callback triggered when scroll state changes (idle/dragging/settling).	–
`onPageSelected`	Callback triggered when a new page becomes selected.	–
`pageMargin`	Used to set page margin.	–
`keyboardDismissMode`	Determines when the keyboard is dismissed in response to a drag. No applicable for devices that have a fullscreen keyboard.	none
`orientation`	Sets the scrolling direction (`horizontal` or `vertical`).	`horizontal`
`overScrollMode`	Controls over-scroll animation. Has priority over `overdrag` if supplied; `auto` activates the animation if there are more than 1 pages, `always` activates it unconditionally and `never` disables it unconditionally; has no effect on D-Pad interactions.	`auto`
`offscreenPageLimit`	Number of pages to keep mounted around the current page as buffer pages on each side.	`3`
`overdrag`	Enables animation when scrolling past boundaries. Takes effect if `overScrollMode` is not supplied; has no effect on D-Pad interactions.	–
`layoutDirection`	Controls text and layout direction (LTR/RTL). The native component does not support this prop, instead the mode is handled fully in the native implementation.	–

Methods

Method	Description
`setPage(index: number)`	Scrolls to the specified page with animation.
`setPageWithoutAnimation(index: number)`	Scrolls to the specified page without animation.

Exceptions on Vega

scrollEnabled is not supported on Vega platform.
setScrollEnabled(scrollEnabled: boolean) is not supported on Vega platform.
overDrag is supported if overScrollMode is not supplied.
layoutDirection not supported by component, handled in native implementation in Vega.

When navigating with the D-Pad from a focused element inside a nested PagerView, pressing a direction perpendicular to the pager's scroll axis (for example, up/down on a horizontal PagerView) may cause focus to jump to an adjacent page of the outer PagerView instead of the nearest element outside it.

This behavior occurs specifically with nested PagerView configurations and does not affect single-level PagerView usage.

Supported versions

NPM package version	Vega SDK version	Vega OS version	React Native version
~2.0.3	0.24	`OS 1.2 (2101020054720)`	0.72, 0.83

Last updated: Jul 10, 2026