@chainplatform/pager

🧠 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 🚀