Carousel component for react-native

Installation

npm install react-native-carousel

Properties

hideIndicators={false}// Set to true to hide the indicatorsindicatorColor="#FFFFFF"// Active indicator colorindicatorSize={20}// Indicator bullet sizeindicatorSpace={15}// space between each indicatorinactiveIndicatorColor="#999999"// Inactive indicator colorindicatorAtBottom={true}// Set to false to show the indicators at the topindicatorOffset={250}// Indicator relative position from top or bottomonPageChange={callback}// Called when the active page changesinactiveIndicatorText='•'// Inactive indicator content ( You can customize to use any Unicode character )indicatorText='•'// Active indicator content ( You can customize to use any Unicode character )animate={true}// Enable carousel autoplaydelay={1000}// Set Animation delay between slidesloop={true}// Allow infinite looped animation. Depends on Prop {...animate} set to true.

Usage example

Assuming you have npm install -g react-native-cli, first generate an app:

react-native init RNCarousel
cd RNCarousel
npm install react-native-carousel --save

Then paste the following into RNCarousel/index.ios.js:

'use strict';varReact=require('react-native');var{
AppRegistry,
StyleSheet,
Text,
View,}=React;varCarousel=require('react-native-carousel');varRNCarousel=React.createClass({render: function(){return(<Carouselwidth={375}><Viewstyle={styles.container}><Text>Page 1</Text></View><Viewstyle={styles.container}><Text>Page 2</Text></View><Viewstyle={styles.container}><Text>Page 3</Text></View></Carousel>);}});varstyles=StyleSheet.create({container: {width: 375,flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'transparent',},});AppRegistry.registerComponent('RNCarousel',()=>RNCarousel);