🎠 Looped carousel for React Native
JavaScript
Latest commit a7f1559 Nov 7, 2016 @phil-r phil-r Travis fix

README.md

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

Install

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

Props

Name propType default value description
autoplay boolean true enables auto animations
delay number 4000 number in milliseconds between auto animations
currentPage number 0 allows you to set initial page
pageStyle style null style for pages
contentContainerStyle style null contentContainerStyle for the scrollView
pageInfo boolean false shows {currentPage} / {totalNumberOfPages} pill at the bottom
pageInfoBackgroundColor string 'rgba(0, 0, 0, 0.25)' background color for pageInfo
pageInfoTextStyle style null style for text in pageInfo
pageInfoTextSeparator string ' / ' separator for {currentPage} and {totalNumberOfPages}
bullets bool false wether to show "bullets" at the bottom of the carousel
onAnimateNextPage func null callback that is called with 0-based Id of the current page

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>
    );
  }
}

Full example code

Used in

See also


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