Registry / web-framework / react-native-pager-view

react-native-pager-view

library8.0.1jsnpmunverified

react-native-pager-view is an actively maintained React Native library providing a performant, native-backed solution for implementing horizontal paging views, such as carousels or tab views. It leverages the AndroidX ViewPager2 on Android and a SwiftUI-based implementation on iOS (since v8.0.0), ensuring a smooth and idiomatic user experience. The current stable version is 8.0.1, with consistent releases addressing bug fixes and introducing new features. Maintained by Callstack, a prominent contributor to the React Native ecosystem, its key differentiators include reliance on native UI components for optimal performance, a consistent API across platforms, and the recent modernization of its iOS implementation to SwiftUI in v8, which subtly changes animation behavior for multi-page navigation. This library is ideal for scenarios requiring swipeable content sections within a React Native application.

web-framework

npm install react-native-pager-view

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-PAGER

react-native-pager-view

web-frameworkjavascriptv8.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PagerView

✓ import PagerView from 'react-native-pager-view';

✗ const PagerView = require('react-native-pager-view');

ESM import is standard for modern React Native. CommonJS `require` still works but is less idiomatic for newer projects.

PagerView

✓ import { default as PagerView } from 'react-native-pager-view';

Though `PagerView` is exported as a default, some TypeScript configurations might prefer the explicit `default as` syntax if issues arise with direct default imports.

PagerViewProps

✓ import type { PagerViewProps } from 'react-native-pager-view';

✗ import { PagerViewProps } from 'react-native-pager-view';

Use `import type` for type-only imports to ensure they are stripped out during compilation, preventing potential runtime issues and improving build performance.

A basic example demonstrating a `PagerView` with three simple, swipeable pages, showcasing fundamental usage and styling.

import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; import PagerView from 'react-native-pager-view'; const MyPagerView = () => { return ( <PagerView style={styles.pagerView} initialPage={0}> <View key="1" style={styles.page}> <Text style={styles.pageText}>First page</Text> </View> <View key="2" style={styles.page}> <Text style={styles.pageText}>Second page</Text> </View> <View key="3" style={styles.page}> <Text style={styles.pageText}>Third page</Text> </View> </PagerView> ); }; const styles = StyleSheet.create({ pagerView: { flex: 1, backgroundColor: '#ffffff', }, page: { justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', padding: 20, margin: 10, borderRadius: 8, }, pageText: { fontSize: 24, fontWeight: 'bold', color: '#333', textAlign: 'center' }, }); export default MyPagerView;

Debug

Known issues

breakingVersion 8.0.0 and later rewrites the iOS codebase to use SwiftUI. While the API surface remains largely the same, the animation behavior when navigating between multiple pages has changed to cycle through pages rather than swiping like the next one.

fix

Review any custom animations or visual tests on iOS to ensure the new behavior aligns with expectations. Open an issue if unexpected visual regressions occur beyond the intended animation change.

affects: >=8.0.0

breakingFrom version 7.x, `react-native-pager-view` officially drops support for React Native's legacy architecture. Applications must be configured to use the new architecture (TurboModules/Fabric) to utilize versions 7.x and above.

fix

Migrate your React Native project to the new architecture. Refer to the official React Native documentation for guidance on enabling TurboModules and Fabric.

affects: >=7.0.0

breakingThe `transitionStyle` property has been removed in versions 6.x and later. Attempting to use this prop will result in a TypeScript error and will not have any effect at runtime.

fix

Remove the `transitionStyle` prop from your `PagerView` components. Implement custom transition logic if specific animation styles are required, or rely on the default behavior.

affects: >=6.0.0

gotchaThis library is a successor to `@react-native-community/viewpager`. Migrating from the community package requires updating the package name in `package.json`, changing import statements, and potentially re-linking the native module if not using autolinking.

fix

Uninstall `@react-native-community/viewpager`, install `react-native-pager-view`, update all `import` statements from `@react-native-community/viewpager` to `react-native-pager-view`. For React Native < 0.60, manual linking might be required.

affects: All

Errors

Common errors & fixes

Invariant Violation: PagerView has been removed from the native module.

This error typically indicates that `react-native-pager-view` (v7.x or later) is being used in a React Native project that has not been migrated to the new architecture (TurboModules/Fabric).

fix

Migrate your React Native project to the new architecture as `react-native-pager-view` v7+ requires it. Alternatively, downgrade `react-native-pager-view` to a 6.x version if new architecture migration is not feasible.

Property 'transitionStyle' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PagerView> & Readonly<PagerViewProps> & Readonly<{ children?: ReactNode; }>.'

Attempting to use the `transitionStyle` prop on the `PagerView` component in versions where it has been removed (6.x and later).

fix

Remove the `transitionStyle` prop from your `PagerView` component. This prop is no longer supported and will cause a TypeScript error and has no runtime effect.

Upgrade

Version history

8.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required by React Native components.

react-nativerequiredCore dependency for any React Native application.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/callstack/react-native-pager-view ↗

packagehttps://www.npmjs.com/package/react-native-pager-view ↗

homepagehttps://callstack.com ↗