Need help with react-native-carousel?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

418 Stars 114 Forks MIT License 93 Commits 44 Opened issues


Carousel component for react-native

Services available


Need anything else?

Contributors list

Carousel component for react-native


npm install react-native-carousel


hideIndicators={false} // Set to true to hide the indicators
indicatorColor="#FFFFFF" // Active indicator color
indicatorSize={20} // Indicator bullet size
indicatorSpace={15} // space between each indicator
inactiveIndicatorColor="#999999" // Inactive indicator color
indicatorAtBottom={true} // Set to false to show the indicators at the top
indicatorOffset={250} // Indicator relative position from top or bottom
onPageChange={callback} // Called when the active page changes
inactiveIndicatorText= '•' // 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 autoplay delay={1000} // Set Animation delay between slides loop={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

'use strict';

var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React;

var Carousel = require('react-native-carousel');

var RNCarousel = React.createClass({ render: function() { return ( Page 1 Page 2 Page 3 ); } });

var styles = StyleSheet.create({ container: { width: 375, flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', }, });

AppRegistry.registerComponent('RNCarousel', () => RNCarousel);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.