Home

Awesome

Looped carousel for React Native

NPM version Build Status Dependency Status devDependency Status

Full-fledged "infinite" carousel for your next react-native project. Supports iOS and Android.

Based on react-native framework by Facebook.

Demo

demo gif

Install

npm install react-native-looped-carousel --save

Examples

Props

NamepropTypedefault valuedescription
autoplaybooleantrueenables auto animations
delaynumber4000number in milliseconds between auto animations
currentPagenumber0allows you to set initial page
pageStylestylenullstyle for pages
contentContainerStylestylenullcontentContainerStyle for the scrollView
onAnimateNextPagefuncnullcallback that is called with 0-based Id of the current page
onPageBeingChangedfuncnullcallback that is called when scroll start with 0-based Id of the next page
swipebooltruemotion control for Swipe
isLoopedbooltrueif it's possible to scroll infinitely
Pagination---------
pageInfobooleanfalseshows {currentPage} / {totalNumberOfPages} pill at the bottom
pageInfoBackgroundColorstring'rgba(0, 0, 0, 0.25)'background color for pageInfo
pageInfoBottomContainerStylestylenullstyle for the pageInfo container
pageInfoTextStylestylenullstyle for text in pageInfo
pageInfoTextSeparatorstring' / 'separator for {currentPage} and {totalNumberOfPages}
Bullets---------
bulletsboolfalsewether to show "bullets" at the bottom of the carousel
bulletStylestylenullstyle for each bullet
bulletsContainerStylestylenullstyle for the bullets container
chosenBulletStylestylenullstyle for the selected bullet
Arrows---------
arrowsboolfalsewether to show navigation arrows for the carousel
arrowStylestylenullstyle for navigation arrows
leftArrowStylestylenullstyle for left navigation arrow
rightArrowStylestylenullstyle for right navigation arrow
arrowsContainerStylestylenullstyle for the navigation arrows container
leftArrowTextstring'Left'label for left navigation arrow
rightArrowTextstring'Right'label for right navigation arrow

Change the page

Three options :

// assuming ref is set up on the carousel as (ref) => this._carousel = ref
onPress={() => {this._carousel.animateToPage(page)}}
onPress={() => {this._carousel._animateNextPage()}}
onPress={() => {this._carousel._animatePreviousPage()}}

Usage

import React, { Component } from 'react';
import {
  Text,
  View,
  Dimensions,
} from 'react-native';
import Carousel from 'react-native-looped-carousel';

const { width, height } = Dimensions.get('window');

export default class CarouselExample extends Component {

  constructor(props) {
    super(props);

    this.state = {
      size: { width, height },
    };
  }

  _onLayoutDidChange = (e) => {
    const layout = e.nativeEvent.layout;
    this.setState({ size: { width: layout.width, height: layout.height } });
  }

  render() {
    return (
      <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
        <Carousel
          delay={2000}
          style={this.state.size}
          autoplay
          pageInfo
          onAnimateNextPage={(p) => console.log(p)}
        >
          <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View>
          <View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View>
          <View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View>
        </Carousel>
      </View>
    );
  }
}

Used in

See also


More on react-native here: https://facebook.github.io/react-native/docs/getting-started.html