react-native-pager-view

For React Native versions older than 0.60, you may need to link the library manually.

iOS Manual Linking

Add the following to your Podfile:

pod 'react-native-pager-view', :path => '../node_modules/react-native-pager-view'

Android Manual Linking

1. android/settings.gradle:

include ':react-native-pager-view'
project(':react-native-pager-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pager-view/android')

2. android/app/build.gradle:

dependencies {
   ...
   implementation project(':react-native-pager-view')
}

3. android/app/src/main/.../MainApplication.java: Add the import and include PagerViewPackage in your list of exported packages:

import com.reactnativepagerview.PagerViewPackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new PagerViewPackage()
  );
}

To use onPageScroll with react-native-reanimated, you must create an animated component and use a custom handler that utilizes useEvent and the 'worklet' directive. This allows scroll events to be processed directly on the UI thread.

1. Define a custom hook (e.g., usePageScrollHandler) that uses useEvent to subscribe to onPageScroll events.
2. Wrap PagerView using Animated.createAnimatedComponent(PagerView).
3. Pass the generated handler to the onPageScroll prop of the AnimatedPagerView component.

// 1. Define the handler
function usePageScrollHandler(handlers, dependencies) {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
  const subscribeForEvents = ['onPageScroll'];

  return useEvent(
    (event) => {
      'worklet';
      const { onPageScroll } = handlers;
      if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
        onPageScroll(event, context);
      }
    },
    subscribeForEvents,
    doDependenciesDiffer
  );
}

// 2. Attach the event handler
import PagerView from 'react-native-pager-view';
import Animated from 'react-native-reanimated';
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

const pageScrollHandler = usePageScrollHandler({
  onPageScroll: (e) => {
    'worklet';
    offset.value = e.offset;
    console.log(e.offset, e.position);
  },
});

<AnimatedPagerView onPageScroll={pageScrollHandler} />;

The usePagerView hook is a utility for managing the state and control of the <PagerView /> component. It provides a set of props and a ref to interact with the pager, such as navigating between pages, enabling/disabling scrolling, and handling page selection events.

Key features provided by the hook:

• AnimatedPagerView: A component wrapped in Animated.createAnimatedComponent.
• ref: A ref to control the pager instance.
• rest props: Includes overdragEnabled, scrollEnabled, onPageScroll, onPageSelected, onPageScrollStateChanged, and a pages array for dynamic rendering.

export function PagerHookExample() {
  const { AnimatedPagerView, ref, ...rest } = usePagerView({ pagesAmount: 10 });
  
  return (
    <SafeAreaView style={styles.container}>
      <AnimatedPagerView
        testID="pager-view"
        ref={ref}
        style={styles.PagerView}
        initialPage={0}
        layoutDirection="ltr"
        overdrag={rest.overdragEnabled}
        scrollEnabled={rest.scrollEnabled}
        onPageScroll={rest.onPageScroll}
        onPageSelected={rest.onPageSelected}
        onPageScrollStateChanged={rest.onPageScrollStateChanged}
        pageMargin={10}
        orientation="horizontal"
      >
        {useMemo(
          () =>
            rest.pages.map((_, index) => (
              <View
                testID="pager-view-content"
                key={index}
                style={{
                  flex: 1,
                  backgroundColor: '#fdc08e',
                  alignItems: 'center',
                  padding: 20,
                }}
                collapsable={false}
              >
                <LikeCount />
                <Text testID={`pageNumber${index}`}>
                  {`page number ${index}`}
                </Text>
              </View>
            )),
          [rest.pages]
        )}
      </AnimatedPagerView>
      <NavigationPanel {...rest} />
    </SafeAreaView>
  );
}

The following props are available on the PagerView component:

The PagerView component is a container that allows flipping between child views. Each child is treated as a separate page and stretched to fill the PagerView.

Requirements:

• All children must be <View> components (not composite components).
• Each child must have a unique key prop.
• You can set style properties like padding or backgroundColor on individual children.

Layout Direction: If layoutDirection is not provided or is set to 'locale', the component automatically detects the direction using I18nManager.isRTL ('rtl' or 'ltr').

<PagerView
  style={styles.PagerView}
  initialPage={0}>
  <View style={styles.pageStyle} key="1">
    <Text>First page</Text>
  </View>
  <View style={styles.pageStyle} key="2">
    <Text>Second page</Text>
  </View>
</PagerView>

// Styles example
const styles = {
  PagerView: {
    flex: 1
  },
  pageStyle: {
    alignItems: 'center',
    padding: 20,
  }
}

The PagerView component accepts several props to control its behavior, orientation, and event handling.

Configuration Props:

• scrollEnabled: Enables or disables user scrolling. Defaults to true.
• layoutDirection: Sets the layout direction ('ltr' or 'rtl'). Defaults to 'ltr'.
• initialPage: The index of the page to display initially.
• orientation: Sets the paging direction ('horizontal' or 'vertical'). Defaults to 'horizontal'.
• offscreenPageLimit: Number of pages to render off-screen.
• pageMargin: Margin between pages.
• overScrollMode: Controls overscroll behavior ('auto', 'always', or 'never'). Defaults to 'auto'.
• overdrag: Enables or disables overdrag behavior. Defaults to false.
• keyboardDismissMode: Determines how the keyboard behaves during paging ('none' or 'on-drag'). Defaults to 'none'.

Event Props:

• onPageScroll: Triggered during scrolling. Provides position and offset.
• onPageSelected: Triggered when a new page is selected. Provides position.
• onPageScrollStateChanged: Triggered when the scroll state changes. Provides pageScrollState ('idle', 'dragging', or 'settling').