react-native/website/versioned_docs/0.28/viewpagerandroid.md

id, title, original_id

id	title	original_id
version-0.28-viewpagerandroid	viewpagerandroid	viewpagerandroid

ViewPagerAndroid #

Edit on GitHub

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.

Example:

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

...

var styles = { ... pageStyle: { alignItems: 'center', padding: 20, } }

Props #

View props... #

initialPage number #

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

keyboardDismissMode enum('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.

onPageScroll function #

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.

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

pageMargin number #

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

scrollEnabled bool #

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

Methods #

setPage(selectedPage: number) #

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

setPageWithoutAnimation(selectedPage: number) #

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

Examples #

Edit on GitHub

'use strict';

var React = require('react'); var ReactNative = require('react-native'); var { Image, StyleSheet, Text, TouchableWithoutFeedback, TouchableOpacity, View, ViewPagerAndroid, } = ReactNative;

import type { ViewPagerScrollState } from 'ViewPagerAndroid';

var PAGES = 5; var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273']; var IMAGE_URIS = [ 'http://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg', 'http://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg', 'http://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg', 'http://apod.nasa.gov/apod/image/1409/PupAmulti_rot0.jpg', 'http://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg', ];

var LikeCount = React.createClass({ getInitialState: function() { return { likes: 7, }; }, onClick: function() { this.setState({likes: this.state.likes + 1}); }, render: function() { var thumbsUp = '\uD83D\uDC4D'; return ( <View style={styles.likeContainer}> <TouchableOpacity onPress={this.onClick} style={styles.likeButton}> <Text style={styles.likesText}> {thumbsUp + ' Like'} </Text> </TouchableOpacity> <Text style={styles.likesText}> {this.state.likes + ' likes'} </Text> </View> ); }, });

var Button = React.createClass({ _handlePress: function() { if (this.props.enabled && this.props.onPress) { this.props.onPress(); } }, render: function() { return ( <TouchableWithoutFeedback onPress={this._handlePress}> <View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}> <Text style={styles.buttonText}>{this.props.text}</Text> </View> </TouchableWithoutFeedback> ); } });

var ProgressBar = React.createClass({ render: function() { var fractionalPosition = (this.props.progress.position + this.props.progress.offset); var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size; return ( <View style={[styles.progressBarContainer, {width: this.props.size}]}> <View style={[styles.progressBar, {width: progressBarSize}]}/> </View> ); } });

var ViewPagerAndroidExample = React.createClass({ statics: { title: '<ViewPagerAndroid>', description: 'Container that allows to flip left and right between child views.' }, getInitialState: function() { return { page: 0, animationsAreEnabled: true, scrollEnabled: true, progress: { position: 0, offset: 0, }, }; },

onPageSelected: function(e) { this.setState({page: e.nativeEvent.position}); },

onPageScroll: function(e) { 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); },

go: function(page) { if (this.state.animationsAreEnabled) { this.viewPager.setPage(page); } else { this.viewPager.setPageWithoutAnimation(page); }

<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>page<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

},

render: function() { var pages = []; for (var i = 0; i < PAGES; i++) { var pageStyle = { backgroundColor: BGCOLOR[i % BGCOLOR.length], alignItems: 'center', padding: 20, }; pages.push( <View key={i} style={pageStyle} collapsable={false}> <Image style={styles.image} source={{uri: IMAGE_URIS[i % BGCOLOR.length]}} /> <LikeCount /> </View> ); } var { page, animationsAreEnabled } = this.state; return ( <View style={styles.container}> <ViewPagerAndroid style={styles.viewPager} initialPage={0} scrollEnabled={this.state.scrollEnabled} onPageScroll={this.onPageScroll} onPageSelected={this.onPageSelected} onPageScrollStateChanged={this.onPageScrollStateChanged} pageMargin={10} ref={viewPager => { this.viewPager = viewPager; }}> {pages} </ViewPagerAndroid> <View style={styles.buttons}> <Button enabled={true} text={this.state.scrollEnabled ? 'Scroll Enabled' : 'Scroll Disabled'} onPress={() => this.setState({scrollEnabled: !this.state.scrollEnabled})} /> </View> <View style={styles.buttons}> { animationsAreEnabled ? <Button text="Turn off animations" enabled={true} onPress={() => this.setState({animationsAreEnabled: false})} /> : <Button text="Turn animations back on" 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)}/> <Button text="Prev" enabled={page > 0} onPress={() => this.move(-1)}/> <Text style={styles.buttonText}>Page {page + 1} / {PAGES}</Text> <ProgressBar size={100} progress={this.state.progress}/> <Button text="Next" enabled={page < PAGES - 1} onPress={() => this.move(1)}/> <Button text="Last" enabled={page < PAGES - 1} onPress={() => this.go(PAGES - 1)}/> </View> </View> ); }, });

var styles = StyleSheet.create({ buttons: { flexDirection: 'row', height: 30, backgroundColor: 'black', alignItems: 'center', justifyContent: 'space-between', }, button: { flex: 1, width: 0, margin: 5, borderColor: 'gray', borderWidth: 1, backgroundColor: 'gray', }, buttonDisabled: { backgroundColor: 'black', opacity: 0.5, }, buttonText: { color: 'white', }, scrollStateText: { color: '#99d1b7', }, container: { flex: 1, backgroundColor: 'white', }, image: { width: 300, height: 200, padding: 20, }, likeButton: { backgroundColor: 'rgba(0, 0, 0, 0.1)', borderColor: '#333333', borderWidth: 1, borderRadius: 5, flex: 1, margin: 8, padding: 8, }, likeContainer: { flexDirection: 'row', }, likesText: { flex: 1, fontSize: 18, alignSelf: 'center', }, progressBarContainer: { height: 10, margin: 10, borderColor: '#eeeeee', borderWidth: 2, }, progressBar: { alignSelf: 'flex-start', flex: 1, backgroundColor: '#eeeeee', }, viewPager: { flex: 1, }, });

module.exports = ViewPagerAndroidExample;

Next →