Skip to content
🎠 Looped carousel for React Native
Branch: master
Clone or download
Pull request Compare This branch is 7 commits ahead, 97 commits behind phil-r:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Examples
__tests__
.babelrc
.eslintrc.js
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json
yarn.lock

README.md

Why is this forked?

We need to upgrade React Native for https://github.com/NerdWallet/mobile-creditcards This PR needs to be merged: https://github.com/appintheair/react-native-looped-carousel/pull/109 And this issue needs to be resolved: https://github.com/appintheair/react-native-looped-carousel/issues/88 I believe the best option however is to remove dependency on this library, as it does not appear to have enough activity and maintainers.

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
onAnimateNextPage func null callback that is called with 0-based Id of the current page
swipe bool true motion control for Swipe
Pagination --- --- ---
pageInfo boolean false shows {currentPage} / {totalNumberOfPages} pill at the bottom
pageInfoBackgroundColor string 'rgba(0, 0, 0, 0.25)' background color for pageInfo
pageInfoBottomContainerStyle style null style for the pageInfo container
pageInfoTextStyle style null style for text in pageInfo
pageInfoTextSeparator string ' / ' separator for {currentPage} and {totalNumberOfPages}
Bullets --- --- ---
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
Arrows --- --- ---
arrows bool false wether to show navigation arrows for the carousel
arrowsStyle style null style for navigation arrows
arrowsContainerStyle style null style for the navigation arrows container
leftArrowText string / element 'Left' label / icon for left navigation arrow
rightArrowText string / element 'Right' label / icon for right navigation arrow

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

You can’t perform that action at this time.