README.md

Looped carousel for React Native

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
style	style	null	style for the carousel
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
bulletStyle	style	null	style for each bullet
bulletsContainerStyle	style	null	style for the bullets container
chosenBulletStyle	stlye	null	style for the selected bullet
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

• React Native Buyscreen

See also

• React Native Grid Component

---

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