@react-native-community/viewpager

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;

property pageScrollState

pageScrollState: PageScrollState;

property offset

offset: number;

property position

position: number;

property position

position: number;

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;