0
# State Management Hook
1

2
React hook for managing PagerView state, animations, and programmatic control with React Native Reanimated integration. Provides a comprehensive interface for building interactive pager experiences with smooth animations.
3

4
## Capabilities
5

6
### usePagerView Hook
7

8
Main hook providing stateful management of PagerView with animation support and programmatic controls.
9

10
```typescript { .api }
11
/**
12
 * Hook for managing PagerView state, animations, and programmatic control
13
 * @param params - Configuration object with pagesAmount
14
 * @returns Complete interface for PagerView management
15
 */
16
function usePagerView(params?: UsePagerViewParams): UsePagerViewProps;
17

18
interface UsePagerViewParams {
19
  /** Initial number of pages to create. Default: 0 */
20
  pagesAmount: number;
21
}
22

23
interface UsePagerViewProps {
24
  /** Ref object for the PagerView component */
25
  ref: React.MutableRefObject<PagerView | null>;
26
  
27
  /** Current active page index */
28
  activePage: number;
29
  
30
  /** Whether page transitions are animated */
31
  isAnimated: boolean;
32
  
33
  /** Array of page indices */
34
  pages: number[];
35
  
36
  /** Current scroll state */
37
  scrollState: 'idle' | 'dragging' | 'settling';
38
  
39
  /** Whether scrolling is enabled */
40
  scrollEnabled: boolean;
41
  
42
  /** Current scroll progress with position and offset */
43
  progress: { position: number; offset: number };
44
  
45
  /** Whether overdrag is enabled */
46
  overdragEnabled: boolean;
47
  
48
  /** Navigate to specific page (respects animation setting) */
49
  setPage: (page: number) => void;
50
  
51
  /** Add a new page to the end */
52
  addPage: () => void;
53
  
54
  /** Remove the last page */
55
  removePage: () => void;
56
  
57
  /** Toggle scroll enabled state */
58
  toggleScroll: () => void;
59
  
60
  /** Toggle animation enabled state */
61
  toggleAnimation: () => void;
62
  
63
  /** Toggle overdrag enabled state */
64
  toggleOverdrag: () => void;
65
  
66
  /** Set progress state manually */
67
  setProgress: React.Dispatch<React.SetStateAction<{ position: number; offset: number }>>;
68
  
69
  /** Animated event handler for page scroll */
70
  onPageScroll: Animated.Event<PagerViewOnPageScrollEventData>;
71
  
72
  /** Animated event handler for page selection */
73
  onPageSelected: Animated.Event<PagerViewOnPageSelectedEventData>;
74
  
75
  /** Scroll state change handler */
76
  onPageScrollStateChanged: (e: PageScrollStateChangedNativeEvent) => void;
77
  
78
  /** Animated version of PagerView component */
79
  AnimatedPagerView: React.ComponentType<PagerViewProps>;
80
  
81
  /** Reference to PagerView component class */
82
  PagerView: typeof PagerView;
83
}
84
```
85

86
**Basic Usage Example:**
87

88
```typescript
89
import React from 'react';
90
import { View, Text, Button, StyleSheet } from 'react-native';
91
import { usePagerView } from 'react-native-pager-view';
92

93
export default function BasicHookExample() {
94
  const {
95
    ref,
96
    activePage,
97
    pages,
98
    setPage,
99
    addPage,
100
    removePage,
101
    PagerView,
102
  } = usePagerView({ pagesAmount: 3 });
103

104
  return (
105
    <View style={styles.container}>
106
      <View style={styles.controls}>
107
        <Text>Active Page: {activePage}</Text>
108
        <View style={styles.buttonRow}>
109
          <Button title="Previous" onPress={() => setPage(Math.max(0, activePage - 1))} />
110
          <Button title="Next" onPress={() => setPage(Math.min(pages.length - 1, activePage + 1))} />
111
        </View>
112
        <View style={styles.buttonRow}>
113
          <Button title="Add Page" onPress={addPage} />
114
          <Button title="Remove Page" onPress={removePage} />
115
        </View>
116
      </View>
117
      
118
      <PagerView ref={ref} style={styles.pagerView} initialPage={0}>
119
        {pages.map((pageIndex) => (
120
          <View style={styles.page} key={pageIndex}>
121
            <Text style={styles.text}>Page {pageIndex + 1}</Text>
122
          </View>
123
        ))}
124
      </PagerView>
125
    </View>
126
  );
127
}
128

129
const styles = StyleSheet.create({
130
  container: { flex: 1 },
131
  controls: { padding: 20, backgroundColor: '#f0f0f0' },
132
  buttonRow: { 
133
    flexDirection: 'row', 
134
    justifyContent: 'space-around', 
135
    marginVertical: 10 
136
  },
137
  pagerView: { flex: 1 },
138
  page: { 
139
    justifyContent: 'center', 
140
    alignItems: 'center',
141
    backgroundColor: '#e0e0e0',
142
  },
143
  text: { fontSize: 24, fontWeight: 'bold' },
144
});
145
```
146

147
### Animation Integration
148

149
Advanced animation features with React Native Reanimated integration for smooth, native-feeling transitions.
150

151
```typescript { .api }
152
/** Animated version of PagerView with Reanimated support */
153
const AnimatedPagerView: React.ComponentType<PagerViewProps>;
154

155
/** Animated event handler for scroll events */
156
const onPageScroll: Animated.Event<{
157
  nativeEvent: {
158
    offset: Animated.Value;
159
    position: Animated.Value;
160
  };
161
}>;
162

163
/** Animated event handler for page selection events */
164
const onPageSelected: Animated.Event<{
165
  nativeEvent: {
166
    position: Animated.Value;
167
  };
168
}>;
169
```
170

171
**Animation Usage Example:**
172

173
```typescript
174
import React from 'react';
175
import { View, Text, StyleSheet, Dimensions } from 'react-native';
176
import Animated, { 
177
  useAnimatedStyle, 
178
  interpolate, 
179
  Extrapolate 
180
} from 'react-native-reanimated';
181
import { usePagerView } from 'react-native-pager-view';
182

183
const { width } = Dimensions.get('window');
184

185
export default function AnimatedExample() {
186
  const {
187
    ref,
188
    pages,
189
    progress,
190
    onPageScroll,
191
    onPageSelected,
192
    AnimatedPagerView,
193
  } = usePagerView({ pagesAmount: 4 });
194

195
  // Animated style for page indicator
196
  const indicatorStyle = useAnimatedStyle(() => {
197
    const translateX = interpolate(
198
      progress.position + progress.offset,
199
      [0, pages.length - 1],
200
      [0, (pages.length - 1) * 30],
201
      Extrapolate.CLAMP
202
    );
203
    
204
    return {
205
      transform: [{ translateX }],
206
    };
207
  });
208

209
  return (
210
    <View style={styles.container}>
211
      {/* Page indicator */}
212
      <View style={styles.indicatorContainer}>
213
        {pages.map((_, index) => (
214
          <View key={index} style={styles.dot} />
215
        ))}
216
        <Animated.View style={[styles.activeDot, indicatorStyle]} />
217
      </View>
218
      
219
      <AnimatedPagerView
220
        ref={ref}
221
        style={styles.pagerView}
222
        initialPage={0}
223
        onPageScroll={onPageScroll}
224
        onPageSelected={onPageSelected}
225
      >
226
        {pages.map((pageIndex) => (
227
          <AnimatedPage key={pageIndex} pageIndex={pageIndex} progress={progress} />
228
        ))}
229
      </AnimatedPagerView>
230
    </View>
231
  );
232
}
233

234
function AnimatedPage({ pageIndex, progress }: { pageIndex: number; progress: any }) {
235
  const animatedStyle = useAnimatedStyle(() => {
236
    const scale = interpolate(
237
      Math.abs(progress.position - pageIndex) + progress.offset,
238
      [0, 1],
239
      [1, 0.8],
240
      Extrapolate.CLAMP
241
    );
242
    
243
    const opacity = interpolate(
244
      Math.abs(progress.position - pageIndex) + progress.offset,
245
      [0, 1],
246
      [1, 0.5],
247
      Extrapolate.CLAMP
248
    );
249
    
250
    return {
251
      transform: [{ scale }],
252
      opacity,
253
    };
254
  });
255

256
  return (
257
    <Animated.View style={[styles.page, animatedStyle]}>
258
      <Text style={styles.text}>Animated Page {pageIndex + 1}</Text>
259
    </Animated.View>
260
  );
261
}
262

263
const styles = StyleSheet.create({
264
  container: { flex: 1 },
265
  indicatorContainer: {
266
    flexDirection: 'row',
267
    justifyContent: 'center',
268
    paddingVertical: 20,
269
    position: 'relative',
270
  },
271
  dot: {
272
    width: 20,
273
    height: 20,
274
    borderRadius: 10,
275
    backgroundColor: '#ddd',
276
    marginHorizontal: 5,
277
  },
278
  activeDot: {
279
    position: 'absolute',
280
    width: 20,
281
    height: 20,
282
    borderRadius: 10,
283
    backgroundColor: '#007AFF',
284
  },
285
  pagerView: { flex: 1 },
286
  page: {
287
    justifyContent: 'center',
288
    alignItems: 'center',
289
    backgroundColor: '#f9f9f9',
290
    margin: 20,
291
    borderRadius: 10,
292
  },
293
  text: { fontSize: 24, fontWeight: 'bold' },
294
});
295
```
296

297
### State Management
298

299
Comprehensive state management features for dynamic page control and configuration.
300

301
```typescript { .api }
302
/** State management methods */
303
interface StateManagement {
304
  /** Current active page index */
305
  activePage: number;
306
  
307
  /** Array of page indices */
308
  pages: number[];
309
  
310
  /** Whether page transitions are animated */
311
  isAnimated: boolean;
312
  
313
  /** Whether scrolling is enabled */
314
  scrollEnabled: boolean;
315
  
316
  /** Whether overdrag is enabled */
317
  overdragEnabled: boolean;
318
  
319
  /** Current scroll state */
320
  scrollState: 'idle' | 'dragging' | 'settling';
321
  
322
  /** Current scroll progress */
323
  progress: { position: number; offset: number };
324
}
325

326
/** State control methods */
327
interface StateControls {
328
  /** Navigate to specific page (respects animation setting) */
329
  setPage: (page: number) => void;
330
  
331
  /** Add a new page to the end */
332
  addPage: () => void;
333
  
334
  /** Remove the last page (minimum 1 page) */
335
  removePage: () => void;
336
  
337
  /** Toggle scroll enabled state */
338
  toggleScroll: () => void;
339
  
340
  /** Toggle animation enabled state */
341
  toggleAnimation: () => void;
342
  
343
  /** Toggle overdrag enabled state */
344
  toggleOverdrag: () => void;
345
}
346
```
347

348
**State Management Example:**
349

350
```typescript
351
import React from 'react';
352
import { View, Text, Button, Switch, StyleSheet } from 'react-native';
353
import { usePagerView } from 'react-native-pager-view';
354

355
export default function StateManagementExample() {
356
  const {
357
    ref,
358
    activePage,
359
    pages,
360
    scrollState,
361
    scrollEnabled,
362
    isAnimated,
363
    overdragEnabled,
364
    progress,
365
    setPage,
366
    addPage,
367
    removePage,
368
    toggleScroll,
369
    toggleAnimation,
370
    toggleOverdrag,
371
    onPageScrollStateChanged,
372
    PagerView,
373
  } = usePagerView({ pagesAmount: 3 });
374

375
  return (
376
    <View style={styles.container}>
377
      <View style={styles.controls}>
378
        <Text style={styles.info}>
379
          Active: {activePage} | Pages: {pages.length} | State: {scrollState}
380
        </Text>
381
        <Text style={styles.info}>
382
          Progress: {progress.position.toFixed(1)} + {progress.offset.toFixed(2)}
383
        </Text>
384
        
385
        <View style={styles.switchRow}>
386
          <Text>Scroll Enabled:</Text>
387
          <Switch value={scrollEnabled} onValueChange={toggleScroll} />
388
        </View>
389
        
390
        <View style={styles.switchRow}>
391
          <Text>Animated:</Text>
392
          <Switch value={isAnimated} onValueChange={toggleAnimation} />
393
        </View>
394
        
395
        <View style={styles.switchRow}>
396
          <Text>Overdrag:</Text>
397
          <Switch value={overdragEnabled} onValueChange={toggleOverdrag} />
398
        </View>
399
        
400
        <View style={styles.buttonRow}>
401
          <Button title="Add Page" onPress={addPage} />
402
          <Button title="Remove Page" onPress={removePage} />
403
        </View>
404
        
405
        <View style={styles.buttonRow}>
406
          {pages.map((pageIndex) => (
407
            <Button
408
              key={pageIndex}
409
              title={`Page ${pageIndex + 1}`}
410
              onPress={() => setPage(pageIndex)}
411
            />
412
          ))}
413
        </View>
414
      </View>
415
      
416
      <PagerView
417
        ref={ref}
418
        style={styles.pagerView}
419
        initialPage={0}
420
        scrollEnabled={scrollEnabled}
421
        overdrag={overdragEnabled}
422
        onPageScrollStateChanged={onPageScrollStateChanged}
423
      >
424
        {pages.map((pageIndex) => (
425
          <View 
426
            style={[
427
              styles.page, 
428
              { backgroundColor: pageIndex % 2 === 0 ? '#e3f2fd' : '#f3e5f5' }
429
            ]} 
430
            key={pageIndex}
431
          >
432
            <Text style={styles.text}>Page {pageIndex + 1}</Text>
433
            <Text style={styles.subtext}>
434
              {isAnimated ? 'Animated Navigation' : 'Instant Navigation'}
435
            </Text>
436
          </View>
437
        ))}
438
      </PagerView>
439
    </View>
440
  );
441
}
442

443
const styles = StyleSheet.create({
444
  container: { flex: 1 },
445
  controls: { padding: 16, backgroundColor: '#f5f5f5' },
446
  info: { textAlign: 'center', marginBottom: 8, fontSize: 14 },
447
  switchRow: {
448
    flexDirection: 'row',
449
    justifyContent: 'space-between',
450
    alignItems: 'center',
451
    marginVertical: 8,
452
  },
453
  buttonRow: {
454
    flexDirection: 'row',
455
    justifyContent: 'space-around',
456
    marginVertical: 10,
457
  },
458
  pagerView: { flex: 1 },
459
  page: {
460
    justifyContent: 'center',
461
    alignItems: 'center',
462
    padding: 20,
463
  },
464
  text: { fontSize: 24, fontWeight: 'bold', marginBottom: 8 },
465
  subtext: { fontSize: 16, color: '#666' },
466
});
467
```