Page Swiper component for React Native.
$ npm i react-native-page-swiper --save- Install
react-nativefirst
$ 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)| Prop | Default | Type | Description |
|---|---|---|---|
| index | 0 | number | Index number of initial slide. |
| 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.