rnl

react-native-looped-carousel

🎠 Looped carousel for React Native

Showing:

Popularity

Downloads/wk

2K

GitHub Stars

1.4K

Maintenance

Last Commit

3yrs ago

Contributors

39

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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 :

  • Go to a specific page
  • Go to the next page
  • Go to the previous page
// 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial