Skip to content

fixt/react-native-page-swiper

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published