A simple way to use and display carousels in your React Native application. This comes with support for autoscrolling, stepped-scrolling and rendering a pager indicator below the carousel.
Run the following command.
npm install react-native-custom-carousel
This package is a simple way to create a custom carousel that also allows auto scrolling along with traditional scrolling. You can use the
renderItem prop to pass a function that renders individual items, you can also pass a function to render the pager icon at the bottom of the carousel using the renderPagerButton prop.
<Carousel
data={ data }
renderItem={ this.renderItem }
keyExtractor={ ( item ) => item.title }
containerStyle={ styles.carouselContainerStyle }
autoScrollEnabled
userScrollEnabled={ false }
autoScrollInterval={ 5000 }
showPagerIndicator
renderPagerButton={ ( index, currentIndex ) => {
const opacity = index === currentIndex ? 1 : 0.5;
return (
<View
style={ [{
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'red',
marginHorizontal: 2,
}, { opacity }] }
/>
);
} }
getItemLayout={ ( dataset, index ) => {
return { length: width, offset: width * index, index };
} }
/>This renders the sample displayed above ( The full example can be found in App.js ).
- data - An array of Objects to be used to render individual cards in the carousel.
- renderItem - A Function that accepts an Object as a parameter. This Object contains the item and index of the current card ( Similar to how render item works in a FlatList ).
- keyExtractor - A Function to extract the keys from the data items.
- getItemLayout - Exactly the same as getItemLayout for FlatList.
- userScrollEnabled - Boolean used to switch off/on the user's ability to manually scroll the carousel. ( DEFAULT: true ).
- showPagerIndicator - Boolean used to decide whether or not the pager below the carousel is to be shown. ( DEFAULT: false ).
- renderPagerButton - Function used to display individual pager icons. The function recieves two parameters - its own index and the index of the current card. If no function is passed for this prop the pager is by default the red circles shown in the demo.
- containerStyle - An Object that is appended to the style of the carousel container, which can be used to adjust the styling of the overall container only not the individual cards. ( DEFAULT: {} ).
- autoScrollEnabled - Boolean used to decide whether to auto scroll the carousel or not. ( DEFAULT: false ).
- showsHorizontalScrollIndicator - Boolean passed to the scroll container as the
showsHorizontalScrollIndicatorprop. ( DEFAULT: true ). - autoScrollInterval - Number ( in milliseconds ) to be used as the delay between each auto scroll. ( DEFAULT: 3000 ).
- initialScrollIndex - Number to be used as the starting index for auto scroll. ( DEFAULT: 0 ).
NOTE: By default paging is enabled on the carousel for a smooth experience, there is no way to turn it off for now.
- The view pager icon selection jumps between current and previous values during multiple renders.