0
# React Native Pager View
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: react-native-pager-view
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-native-pager-view`
10

11
## Core Imports
12

13
```typescript
14
import PagerView from "react-native-pager-view";
15
import { usePagerView } from "react-native-pager-view";
16
```
17

18
For type imports:
19

20
```typescript
21
import type { 
22
  PagerViewProps,
23
  PagerViewOnPageScrollEvent,
24
  PagerViewOnPageSelectedEvent,
25
  PageScrollStateChangedNativeEvent 
26
} from "react-native-pager-view";
27
```
28

29
## Basic Usage
30

31
```typescript
32
import React from 'react';
33
import { View, Text, StyleSheet } from 'react-native';
34
import PagerView from 'react-native-pager-view';
35

36
export default function App() {
37
  return (
38
    <PagerView style={styles.pagerView} initialPage={0}>
39
      <View style={styles.page} key="1">
40
        <Text>First page</Text>
41
      </View>
42
      <View style={styles.page} key="2">
43
        <Text>Second page</Text>
44
      </View>
45
      <View style={styles.page} key="3">
46
        <Text>Third page</Text>
47
      </View>
48
    </PagerView>
49
  );
50
}
51

52
const styles = StyleSheet.create({
53
  pagerView: {
54
    flex: 1,
55
  },
56
  page: {
57
    justifyContent: 'center',
58
    alignItems: 'center',
59
  },
60
});
61
```
62

63
## Architecture
64

65
React Native Pager View is built around several key components:
66

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

73
## Capabilities
74

75
### PagerView Component
76

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

79
```typescript { .api }
80
export default class PagerView extends React.Component<PagerViewProps> {
81
  setPage(selectedPage: number): void;
82
  setPageWithoutAnimation(selectedPage: number): void;
83
  setScrollEnabled(scrollEnabled: boolean): void;
84
}
85
```
86

87
[PagerView Component](./pager-view.md)
88

89
### State Management Hook
90

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

93
```typescript { .api }
94
function usePagerView(params?: UsePagerViewParams): UsePagerViewProps;
95

96
interface UsePagerViewParams {
97
  pagesAmount: number;
98
}
99

100
interface UsePagerViewProps {
101
  ref: React.MutableRefObject<PagerView | null>;
102
  activePage: number;
103
  isAnimated: boolean;
104
  pages: number[];
105
  scrollState: string;
106
  scrollEnabled: boolean;
107
  progress: { position: number; offset: number };
108
  overdragEnabled: boolean;
109
  setPage: (page: number) => void;
110
  addPage: () => void;
111
  removePage: () => void;
112
  toggleScroll: () => void;
113
  toggleAnimation: () => void;
114
  toggleOverdrag: () => void;
115
  onPageScroll: Animated.Event;
116
  onPageSelected: Animated.Event;
117
  onPageScrollStateChanged: (e: PageScrollStateChangedNativeEvent) => void;
118
  AnimatedPagerView: React.ComponentType<PagerViewProps>;
119
  PagerView: typeof PagerView;
120
}
121
```
122

123
[State Management Hook](./use-pager-view.md)
124

125
## Types
126

127
### Event Types
128

129
```typescript { .api }
130
type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<{
131
  position: number;
132
  offset: number;
133
}>;
134

135
type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<{
136
  position: number;
137
}>;
138

139
type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<{
140
  pageScrollState: 'idle' | 'dragging' | 'settling';
141
}>;
142
```
143

144
### Props Interface
145

146
```typescript { .api }
147
interface PagerViewProps extends ViewProps {
148
  scrollEnabled?: boolean;
149
  layoutDirection?: 'ltr' | 'rtl';
150
  initialPage?: number;
151
  orientation?: 'horizontal' | 'vertical';
152
  offscreenPageLimit?: number;
153
  pageMargin?: number;
154
  overScrollMode?: 'auto' | 'always' | 'never';
155
  overdrag?: boolean;
156
  keyboardDismissMode?: 'none' | 'on-drag';
157
  onPageScroll?: (event: PagerViewOnPageScrollEvent) => void;
158
  onPageSelected?: (event: PagerViewOnPageSelectedEvent) => void;
159
  onPageScrollStateChanged?: (event: PageScrollStateChangedNativeEvent) => void;
160
}
161
```