PagerView Component

/**
 * Container that allows to flip left and right between child views. Each
 * child view of the PagerView will be treated as a separate page
 * and will be stretched to fill the PagerView.
 */
export default class PagerView extends React.Component<PagerViewProps> {
  /**
   * A helper function to scroll to a specific page in the PagerView.
   * The transition between pages will be animated.
   */
  setPage(selectedPage: number): void;
  
  /**
   * A helper function to scroll to a specific page in the PagerView.
   * The transition between pages will *not* be animated.
   */
  setPageWithoutAnimation(selectedPage: number): void;
  
  /**
   * A helper function to enable/disable scroll imperatively
   * The recommended way is using the scrollEnabled prop, however, there might be a case where a
   * imperative solution is more useful (e.g. for not blocking an animation)
   */
  setScrollEnabled(scrollEnabled: boolean): void;
}

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

export default function PagerViewExample() {
  const pagerRef = useRef<PagerView>(null);

  const goToPage = (page: number) => {
    pagerRef.current?.setPage(page);
  };

  const goToPageWithoutAnimation = (page: number) => {
    pagerRef.current?.setPageWithoutAnimation(page);
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="Go to page 1" onPress={() => goToPage(1)} />
        <Button title="Jump to page 2" onPress={() => goToPageWithoutAnimation(2)} />
      </View>
      
      <PagerView
        ref={pagerRef}
        style={styles.pagerView}
        initialPage={0}
        onPageSelected={(e) => console.log('Page selected:', e.nativeEvent.position)}
      >
        <View style={[styles.page, { backgroundColor: '#ff6b6b' }]} key="1">
          <Text style={styles.text}>Page 1</Text>
        </View>
        <View style={[styles.page, { backgroundColor: '#4ecdc4' }]} key="2">
          <Text style={styles.text}>Page 2</Text>
        </View>
        <View style={[styles.page, { backgroundColor: '#45b7d1' }]} key="3">
          <Text style={styles.text}>Page 3</Text>
        </View>
      </PagerView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  buttonContainer: { 
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    padding: 20 
  },
  pagerView: { flex: 1 },
  page: { 
    justifyContent: 'center', 
    alignItems: 'center' 
  },
  text: { 
    fontSize: 24, 
    fontWeight: 'bold', 
    color: 'white' 
  },
});

interface PagerViewProps extends ViewProps {
  /** Enable or disable scrolling. Default: true */
  scrollEnabled?: boolean;
  
  /** Layout direction for the pager. Default: 'ltr' */
  layoutDirection?: 'ltr' | 'rtl';
  
  /** Index of the initially selected page. Default: 0 */
  initialPage?: number;
  
  /** Orientation of the pager. Default: 'horizontal' */
  orientation?: 'horizontal' | 'vertical';
  
  /** Number of pages to render and keep in memory on each side of the current page */
  offscreenPageLimit?: number;
  
  /** Margin between pages in density-independent pixels */
  pageMargin?: number;
  
  /** Overscroll behavior when reaching the end of pages. Default: 'auto' */
  overScrollMode?: 'auto' | 'always' | 'never';
  
  /** Enable overdrag effect (iOS). Default: false */
  overdrag?: boolean;
  
  /** Keyboard dismiss mode when dragging. Default: 'none' */
  keyboardDismissMode?: 'none' | 'on-drag';
  
  /** Callback fired when the page is being scrolled */
  onPageScroll?: (event: PagerViewOnPageScrollEvent) => void;
  
  /** Callback fired when a new page is selected */
  onPageSelected?: (event: PagerViewOnPageSelectedEvent) => void;
  
  /** Callback fired when the scroll state changes */
  onPageScrollStateChanged?: (event: PageScrollStateChangedNativeEvent) => void;
}

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

export default function AdvancedPagerView() {
  const handlePageScroll = (event: PagerViewOnPageScrollEvent) => {
    const { position, offset } = event.nativeEvent;
    console.log(`Scroll progress: page ${position}, offset ${offset}`);
  };

  const handlePageSelected = (event: PagerViewOnPageSelectedEvent) => {
    console.log('Selected page:', event.nativeEvent.position);
  };

  const handleScrollStateChanged = (event: PageScrollStateChangedNativeEvent) => {
    console.log('Scroll state:', event.nativeEvent.pageScrollState);
  };

  return (
    <PagerView
      style={styles.pagerView}
      initialPage={1}
      orientation="horizontal"
      layoutDirection="ltr"
      scrollEnabled={true}
      pageMargin={20}
      offscreenPageLimit={2}
      overScrollMode="auto"
      overdrag={true}
      keyboardDismissMode="on-drag"
      onPageScroll={handlePageScroll}
      onPageSelected={handlePageSelected}
      onPageScrollStateChanged={handleScrollStateChanged}
    >
      <View style={styles.page} key="1">
        <Text>Configured Page 1</Text>
      </View>
      <View style={styles.page} key="2">
        <Text>Configured Page 2</Text>
      </View>
      <View style={styles.page} key="3">
        <Text>Configured Page 3</Text>
      </View>
    </PagerView>
  );
}

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

/** Event fired during page scrolling with position and offset information */
type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<{
  /** Current page index (can be fractional during scroll) */
  position: number;
  /** Scroll offset within the current page (0.0 to 1.0) */
  offset: number;
}>;

/** Event fired when a page is fully selected */
type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<{
  /** Index of the selected page */
  position: number;
}>;

/** Event fired when scroll state changes */
type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<{
  /** Current scroll state */
  pageScrollState: 'idle' | 'dragging' | 'settling';
}>;

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

export default function EventHandlingExample() {
  const [currentPage, setCurrentPage] = useState(0);
  const [scrollProgress, setScrollProgress] = useState({ position: 0, offset: 0 });
  const [scrollState, setScrollState] = useState('idle');

  return (
    <View style={styles.container}>
      <Text style={styles.info}>
        Current Page: {currentPage} | 
        Scroll: {scrollProgress.position.toFixed(1)} + {scrollProgress.offset.toFixed(2)} |
        State: {scrollState}
      </Text>
      
      <PagerView
        style={styles.pagerView}
        initialPage={0}
        onPageScroll={(e) => setScrollProgress(e.nativeEvent)}
        onPageSelected={(e) => setCurrentPage(e.nativeEvent.position)}
        onPageScrollStateChanged={(e) => setScrollState(e.nativeEvent.pageScrollState)}
      >
        <View style={styles.page} key="1">
          <Text>Page 1</Text>
        </View>
        <View style={styles.page} key="2">
          <Text>Page 2</Text>
        </View>
        <View style={styles.page} key="3">
          <Text>Page 3</Text>
        </View>
      </PagerView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  info: { padding: 16, backgroundColor: '#f0f0f0', textAlign: 'center' },
  pagerView: { flex: 1 },
  page: { justifyContent: 'center', alignItems: 'center' },
});