This is a basic React Native carousel which features a pagination.
npm install react-native-basic-carousel
yarn add react-native-basic-carousel
cd ios && pod install
npx react-native run-android
npx react-native run-ios
import { Carousel } from 'react-native-basic-carousel'
<Carousel
data={data}
renderItem={({item, index}) => <View>{...}</View>}
itemWidth={width}
onSnapItem={(item) => console.log(item)}
pagination
autoplay
/>
To create your own pagination, do this:
<Carousel
data={data}
renderItem={({item, index}) => <View>{...}</View>}
itemWidth={width}
customPagination={({ activeIndex }) => <View><Text>{activeIndex}<Text><View>}
/>
Props | Description | Type | Default | |
---|---|---|---|---|
data |
Array of items to loop on | Array | Required | |
renderItem |
Takes an item from data and renders it into the list. The function receives one argument {item, index} Array | Function | Required | |
autoplay |
When true, the carousel slides automatically | Boolean | false |
|
autoplayDelay |
When true, the carousel slides automatically | Number | 2500 |
|
itemWidth |
Width of carousel's item and carousel itself | Number | Required | |
onSnapToItem |
Callback fired after snapping to an item | Function | undefined |
|
bounces |
When true, the carousel bounces when it reaches the end (only available on ios ) |
Boolean | false |
|
pagination |
When true, pagination is displayed under the carousel item | Boolean | false |
|
paginationColor |
Takes a color code for the pagination dots | String | undefined |
|
paginationType |
Display pagination dots in either cirlce mode or default (Rectangle) | String (default , circle ) |
default |
|
paginationPosition |
Positions pagination to the top of the carousel or bottom | String | (Top , bottom ) |
bottom |
paginationBackgroundColor |
Background color for pagination wrapper | String | (Top , bottom ) |
bottom |
getCurrentIndex |
callback to get the current displayed item index | Function | undefined |
|
customPagination |
Allows for custom made pagination to be displaued | Function | undefined |
The component is built on top of the FlatList
component, meaning it inherits from FlatList
, VirtualizedList
, and ScrollView
.
You can use almost all props from this three components, but some of them can't be overriden because it would mess with our implementation's logic.
Here are a few useful props regarding carousel's style and "feeling": scrollEnabled
(if you want to disable user scrolling while still being able to use Carousel
's methods), showsHorizontalScrollIndicator
, overScrollMode
(android), decelerationRate
(ios), scrollEventThrottle
(ios).
And here are some useful ones for performance optimizations and rendering: initialNumToRender
, maxToRenderPerBatch
, windowSize
, updateCellsBatchingPeriod
, extraData
, removeClippedSubviews
(the latter may have bugs, as stated in RN's doc). The first three are already implemented with default parameters, but you can override them if they don't suit your needs.