Skip to content
React Native carousel pager.
JavaScript Objective-C Python Java
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example
.gitignore
CarouselPager.js
LICENSE
README.md
index.js
package.json Bumped version to 1.5.0 May 1, 2018
react-native-carousel-pager.gif

README.md

react-native-carousel-pager

Version npm license

Installation

npm install react-native-carousel-pager --save

or

yarn add react-native-carousel-pager

Usage

import {View} from 'react-native';
import React, {Component} from 'react';
import CarouselPager from 'react-native-carousel-pager';

export default class Pager extends Component {
  onClickSomething() {
    this.carousel.goToPage(2);
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <CarouselPager ref={ref => this.carousel = ref} initialPage={2} pageStyle={{backgroundColor: '#fff'}}>
          <View key={'page0'}></View>
          <View key={'page1'}></View>
          <View key={'page2'}></View>
          <View key={'page3'}></View>
        </CarouselPager>
      </View>
    );
  }
}

Properties

Name propType default value description
initialPage number 0 Initial page to display on render
vertical boolean false Set to true if carousel should be vertical
blurredZoom number 0.8 Zoom (number between 0 and 1) to apply to blurred pages
blurredOpacity number 0.8 Opacity (number between 0 and 1) to apply to blurred pages
animationDuration number 150 Animation duration between page changes
containerPadding number 30 Container padding (used to display part of preceding and following pages)
pageSpacing number 10 Space between pages
pageStyle object null Style to apply to each page
onPageChange function (page) => {} When current page changes, call onPageChange with parameter

Methods

Name propType description
goToPage number Scrolls to the given page
You can’t perform that action at this time.