diff --git a/docs/viewpagerandroid.html b/docs/viewpagerandroid.html index 667ac472136..e0bd529dcc9 100644 --- a/docs/viewpagerandroid.html +++ b/docs/viewpagerandroid.html @@ -34,7 +34,12 @@ The event.nativeEvent object for this callback will carry following - 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.

onPageSelected function #

This callback will be called once ViewPager finish navigating to selected page + visible, and x fraction of the next page is visible.

onPageScrollStateChanged function #

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

onPageSelected function #

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

Edit on GitHubExamples #

'use strict'; @@ -50,6 +55,8 @@ callback will have following fields: ViewPagerAndroid, } = React; +import type { ViewPagerScrollState } from 'ViewPagerAndroid'; + var PAGES = 5; var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273']; var IMAGE_URIS = [ @@ -139,6 +146,10 @@ callback will have following fields: this.setState({progress: e.nativeEvent}); }, + onPageScrollStateChanged: function(state : ViewPagerScrollState) { + this.setState({scrollState: state}); + }, + move: function(delta) { var page = this.state.page + delta; this.go(page); @@ -180,6 +191,7 @@ callback will have following fields: initialPage={0} onPageScroll={this.onPageScroll} onPageSelected={this.onPageSelected} + onPageScrollStateChanged={this.onPageScrollStateChanged} ref={viewPager => { this.viewPager = viewPager; }}> {pages} </ViewPagerAndroid> @@ -195,6 +207,7 @@ callback will have following fields: enabled={true} onPress={() => this.setState({animationsAreEnabled: true})} /> } + <Text style={styles.scrollStateText}>ScrollState[ {this.state.scrollState} ]</Text> </View> <View style={styles.buttons}> <Button text="Start" enabled={page > 0} onPress={() => this.go(0)}/> @@ -232,6 +245,9 @@ callback will have following fields: buttonText: { color: 'white', }, + scrollStateText: { + color: '#99d1b7', + }, container: { flex: 1, backgroundColor: 'white',