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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 | '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 = [];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); } this.setState({page}); }, 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; |
