Page Swiper component for React Native.
$ npm i react-native-page-swiper --save
react-native
first$ npm i react-native -g
$ react-native init myproject
myproject/index.ios.js
, like this:var Swiper = require('react-native-page-swiper')
// es6
// import Swiper from 'react-native-page-swiper'
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var styles = StyleSheet.create({
wrapper: {
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5',
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9',
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
}
})
var swiper = React.createClass({
render: function() {
return (
<Swiper style={styles.wrapper}>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
)
}
})
AppRegistry.registerComponent('swiper', () => swiper)
Prop | Default | Type | Description |
---|---|---|---|
index | 0 |
number |
Index number of initial slide. Changing this number after the component loads will cause the slide to change. |
pager | true |
boolean |
Show pager. |
onPageChange | function |
Callback when page changes. | |
activeDotColor | blue |
string |
CSS color of the dot for the current page. |
threshold | 25 |
number |
Threshold before the swiper captures the pan responder |
See code in examples.
Feel free to contact us or create an issue
Inspired by leecade/react-native-swiper & brentvatne/react-native-scrollable-tab-view.