• Version 5.0.11
  • Published
  • 229 kB
  • No dependencies
  • MIT license


npm i @react-native-community/viewpager
yarn add @react-native-community/viewpager
pnpm add @react-native-community/viewpager


React Native wrapper for Android and iOS ViewPager



class ViewPager

class ViewPager extends React.Component<ViewPagerProps> {}
  • Container that allows to flip left and right between child views. Each child view of the ViewPager will be treated as a separate page and will be stretched to fill the ViewPager.

    It is important all children are <View>s and not composite components. You can set style properties like padding or backgroundColor for each child. It is also important that each child have a key prop.


    render: function() {
    return (
    <View style={styles.pageStyle} key="1">
    <Text>First page</Text>
    <View style={styles.pageStyle} key="2">
    <Text>Second page</Text>
    var styles = {
    viewPager: {
    flex: 1
    pageStyle: {
    alignItems: 'center',
    padding: 20,

property getInnerViewNode

getInnerViewNode: () => ReactElement;

    property setPage

    setPage: (selectedPage: number) => void;
    • A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated.

    property setPageWithoutAnimation

    setPageWithoutAnimation: (selectedPage: number) => void;
    • A helper function to scroll to a specific page in the ViewPager. The transition between pages will *not* be animated.

    property setScrollEnabled

    setScrollEnabled: (scrollEnabled: boolean) => 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)

    method componentDidMount

    componentDidMount: () => void;

      method render

      render: () => JSX.Element;


        interface PageScrollStateChangedEvent

        interface PageScrollStateChangedEvent {}

          property pageScrollState

          pageScrollState: PageScrollState;

            interface ViewPagerOnPageScrollEventData

            interface ViewPagerOnPageScrollEventData {}

              property offset

              offset: number;

                property position

                position: number;

                  interface ViewPagerOnPageSelectedEventData

                  interface ViewPagerOnPageSelectedEventData {}

                    property position

                    position: number;

                      interface ViewPagerProps

                      interface ViewPagerProps {}

                        property children

                        children: ReactNode;

                          property initialPage

                          initialPage?: number;
                          • Index of initial page that should be selected. Use setPage method to update the page, and onPageSelected to monitor page changes

                          property keyboardDismissMode

                          keyboardDismissMode?: 'none' | 'on-drag';
                          • Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default), drags do not dismiss the keyboard. - 'on-drag', the keyboard is dismissed when a drag begins.

                          property offscreenPageLimit

                          offscreenPageLimit?: number;
                          • Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0.

                          property onMoveShouldSetResponderCapture

                          onMoveShouldSetResponderCapture?: (
                          event: ReactNative.GestureResponderEvent
                          ) => boolean;
                          • If a parent View wants to prevent a child View from becoming responder on a move, it should have this handler which returns true.

                            View.props.onMoveShouldSetResponderCapture: (event) => [true | false], where event is a synthetic touch event as described above.

                            See http://facebook.github.io/react-native/docs/view.html#onMoveShouldsetrespondercapture

                          property onPageScroll

                          onPageScroll?: (event: ViewPagerOnPageScrollEvent) => void;
                          • Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The event.nativeEvent object for this callback will carry following data: - position - index of first page from the left that is currently visible - offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible.

                          property onPageScrollStateChanged

                          onPageScrollStateChanged?: (event: PageScrollStateChangedNativeEvent) => void;
                          • Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - idle, meaning there is no interaction with the page scroller happening at the time - dragging, meaning there is currently an interaction with the page scroller - settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing it's closing or opening animation

                          property onPageSelected

                          onPageSelected?: (event: ViewPagerOnPageSelectedEvent) => void;
                          • This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The event.nativeEvent object passed to this callback will have following fields: - position - index of page that has been selected

                          property orientation

                          orientation?: Orientation;
                          • iOS only

                          property overdrag

                          overdrag?: boolean;
                          • Determines whether it's possible to overscroll a bit after reaching end or very beginning of pages.

                          property overScrollMode

                          overScrollMode?: OverScrollMode;
                          • Android only

                          property pageMargin

                          pageMargin?: number;
                          • Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge.

                          property scrollEnabled

                          scrollEnabled?: boolean;
                          • When false, the content does not scroll. The default value is true.

                          property showPageIndicator

                          showPageIndicator?: boolean;

                            property style

                            style?: ReactNative.StyleProp<ReactNative.ViewStyle>;

                              property transitionStyle

                              transitionStyle?: TransitionStyle;

                                Type Aliases

                                type Orientation

                                type Orientation = 'horizontal' | 'vertical';

                                  type OverScrollMode

                                  type OverScrollMode = 'auto' | 'always' | 'never';

                                    type PageScrollState

                                    type PageScrollState = 'idle' | 'dragging' | 'settling';

                                      type PageScrollStateChangedNativeEvent

                                      type PageScrollStateChangedNativeEvent =

                                        type TransitionStyle

                                        type TransitionStyle = 'scroll' | 'curl';

                                          type ViewPagerOnPageScrollEvent

                                          type ViewPagerOnPageScrollEvent =

                                            type ViewPagerOnPageSelectedEvent

                                            type ViewPagerOnPageSelectedEvent =

                                              Package Files (3)

                                              Dependencies (0)

                                              No dependencies.

                                              Dev Dependencies (19)

                                              Peer Dependencies (2)


                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-native-community/viewpager.

                                              • Markdown
                                              • HTML
                                                <a href="https://www.jsdocs.io/package/@react-native-community/viewpager"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>