react-native-looped-wxcarousel

1.0.1 • Public • Published

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
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
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 'Left' label for left navigation arrow
rightArrowText string 'Right' label 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

Package Sidebar

Install

npm i react-native-looped-wxcarousel

Weekly Downloads

0

Version

1.0.1

License

MIT

Last publish

Collaborators

  • mamie42