Skip to main content
Version: 0.60

๐Ÿšง ViewPagerAndroid

Deprecated. Use react-native-community/react-native-viewpager instead.

Container that allows to flip left and right between child views. Each child view of the ViewPagerAndroid will be treated as a separate page and will be stretched to fill the ViewPagerAndroid.

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.

Example:

render() {
return (
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}>
<View style={styles.pageStyle} key="1">
<Text>First page</Text>
</View>
<View style={styles.pageStyle} key="2">
<Text>Second page</Text>
</View>
</ViewPagerAndroid>
);
}

...

const styles = {
...
viewPager: {
flex: 1
},
pageStyle: {
alignItems: 'center',
padding: 20,
}
}

Reference

Propsโ€‹

Inherits View Props.

initialPageโ€‹

Index of initial page that should be selected. Use setPage method to update the page, and onPageSelected to monitor page changes

TypeRequired
numberNo

keyboardDismissModeโ€‹

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.
TypeRequired
enum('none', 'on-drag')No

onPageScrollโ€‹

Executed when transitioning between pages (either 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.
TypeRequired
functionNo

onPageScrollStateChangedโ€‹

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 its closing or opening animation
TypeRequired
functionNo

onPageSelectedโ€‹

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
TypeRequired
functionNo

pageMarginโ€‹

Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge.

TypeRequired
numberNo

peekEnabledโ€‹

Whether enable showing peekFraction or not. If this is true, the preview of last and next page will show in current screen. Defaults to false.

TypeRequired
boolNo

scrollEnabledโ€‹

When false, the content does not scroll. The default value is true.

TypeRequired
boolNo

setPageโ€‹

A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated.

  • position - index of page that will be selected
TypeRequired
NumberYes

setPageWithoutAnimationโ€‹

A helper function to scroll to a specific page in the ViewPager. The transition between pages will not be animated.

  • position - index of page that will be selected
TypeRequired
NumberYes

Type Definitionsโ€‹

ViewPagerScrollStateโ€‹

Type
\$Enum

Constants:

ValueDescription
idle
dragging
settling