izhangyr / react-native-carousel-pager

React Native carousel pager.

react-native-carousel-pager

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