diff --git a/Examples/UIExplorer/UIExplorerList.android.js b/Examples/UIExplorer/UIExplorerList.android.js index d102d3de8..d04c80c6e 100644 --- a/Examples/UIExplorer/UIExplorerList.android.js +++ b/Examples/UIExplorer/UIExplorerList.android.js @@ -32,6 +32,7 @@ var COMPONENTS = [ require('./ToolbarAndroidExample'), require('./TouchableExample'), require('./ViewExample'), + require('./ViewPagerAndroidExample.android'), ]; var APIS = [ diff --git a/Examples/UIExplorer/ViewPagerAndroidExample.android.js b/Examples/UIExplorer/ViewPagerAndroidExample.android.js new file mode 100644 index 000000000..8dcbbb06e --- /dev/null +++ b/Examples/UIExplorer/ViewPagerAndroidExample.android.js @@ -0,0 +1,223 @@ +/** + * The examples provided by Facebook are for non-commercial testing and + * evaluation purposes only. + * + * Facebook reserves all rights not expressly granted. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS + * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL + * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN + * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + * + */ +'use strict'; + +var React = require('react-native'); +var { + Image, + StyleSheet, + Text, + TouchableWithoutFeedback, + TouchableOpacity, + View, + ViewPagerAndroid, +} = React; + +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 ( + + + + {thumbsUp + ' Like'} + + + + {this.state.likes + ' likes'} + + + ); + }, +}); + +var Button = React.createClass({ + _handlePress: function() { + if (this.props.enabled && this.props.onPress) { + this.props.onPress(); + } + }, + render: function() { + return ( + + + {this.props.text} + + + ); + } +}); + +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 ( + + + + ); + } +}); + +var ViewPagerAndroidExample = React.createClass({ + statics: { + title: '', + description: 'Container that allows to flip left and right between child views.' + }, + getInitialState: function() { + return {page: 0, progress: {position: 0, offset: 0}}; + }, + onPageSelected: function(e) { + this.setState({page: e.nativeEvent.position}); + }, + onPageScroll: function(e) { + this.setState({progress: e.nativeEvent}); + }, + move: function(delta) { + var page = this.state.page + delta; + this.viewPager && this.viewPager.setPage(page); + this.setState({page}); + }, + go: function(page) { + this.viewPager && this.viewPager.setPage(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( + + + + + ); + } + var page = this.state.page; + return ( + + { this.viewPager = viewPager; }}> + {pages} + + +