esthersweon / react-native-page-swiper

react-native-page-swiper-fork

Page Swiper component for React Native.

Getting Started

• Installation
• Basic Usage
• Properties
• Examples
• Development

Installation

$ npm i react-native-page-swiper-fork --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-fork')
// es6
// import Swiper from 'react-native-page-swiper-fork'

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.
pager	true	boolean	Show pager.
onPageChange		function	Callback when page changes.
inactiveDotColor	lightgray	string	CSS color of the inactive dots.
inactiveBorder	white	string	CSS color of the inactive dots' border.
activeDotColor	blue	string	CSS color of the dot for the current page.
dotsPosition	bottom	string	Can be top or bottom - positioning of dots on slide.

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.

Forked from fixt/react-native-page-swiper