react-native-page-swiper
v0.4.0
Published
Page Swiper component for React Native.
Downloads
62
Readme
react-native-page-swiper
Page Swiper component for React Native.
Getting Started
Installation
$ npm i react-native-page-swiper --save
Basic Usage
- Install
react-native
first
$ npm i react-native -g
- Initialization of a react-native project
$ react-native init myproject
- Then, edit
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)
Properties
| 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 |
Examples
See code in examples.
Questions
Feel free to contact us or create an issue
Inspired by leecade/react-native-swiper & brentvatne/react-native-scrollable-tab-view.