🧠 react-native-pager-view

A powerful, cross-platform view pager component supporting Android, iOS, and Web — built for smooth, native-like swiping experiences.
This is a lightweight, dependency-free pager that integrates perfectly with React Native and React Native Web, supporting gestures, animated transitions, and full control of pages.

✨ Features

• 🚀 High-performance native ViewPager on Android and iOS
• 🌐 Web implementation compatible with React Native Web
• 🎯 Controlled or uncontrolled mode
• 🔁 Supports horizontal and vertical paging
• 🧭 Page events: onPageScroll, onPageSelected, onPageScrollStateChanged
• 🔄 Imperative methods: setPage(), setPageWithoutAnimation(), setScrollEnabled()
• 💡 Customizable page margins and layout direction
• 🧱 Lightweight, dependency-free — no React Native Gesture Handler required

🚀 Installation

npm install @chainplatform/pager react-native-pager-view

or

yarn add @chainplatform/pager react-native-pager-view

🧩 Web Integration

Alias the package in your webpack config:

resolve: {
    alias: {
        'react-native$': 'react-native-web',
        'react-native-pager-view$': '@chainplatform/pager',
        ... others alias
    }
}

📦 Basic Usage

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

export default function MyPager() {
  return (
    <PagerView style={styles.pager} initialPage={0}>
      <View key="1" style={[styles.page, { backgroundColor: '#BFEFFF' }]}>
        <Text>First page</Text>
      </View>
      <View key="2" style={[styles.page, { backgroundColor: '#FFDAB9' }]}>
        <Text>Second page</Text>
      </View>
      <View key="3" style={[styles.page, { backgroundColor: '#98FB98' }]}>
        <Text>Third page</Text>
      </View>
    </PagerView>
  );
}

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

🔧 Props Reference

| Prop | Type | Default | Description | |------|------|----------|-------------| | initialPage | number | 0 | Index of initial page | | orientation | "horizontal" \| "vertical" | "horizontal" | Page orientation | | scrollEnabled | boolean | true | Enables or disables user scrolling | | onPageSelected | function | — | Called when a page becomes selected | | onPageScroll | function | — | Called during scroll | | onPageScrollStateChanged | function | — | Called when scroll state changes | | pageMargin | number | 0 | Space between pages |

🔄 Imperative Methods

| Method | Description | |--------|-------------| | setPage(index) | Scrolls to specified page with animation | | setPageWithoutAnimation(index) | Scrolls instantly | | setScrollEnabled(enabled) | Toggles scroll interaction |

🧪 Testing Example (Jest)

import React from 'react';
import renderer from 'react-test-renderer';
import PagerView from 'react-native-pager-view';

it('renders pages correctly', () => {
  const tree = renderer
    .create(
      <PagerView initialPage={0}>
        <View key="1" />
        <View key="2" />
      </PagerView>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

📜 License

MIT © 2025 Chain Platform

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Cryptocurrency | Address | |----------------|----------| | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀