Package Exports

react-native-basic-carousel
react-native-basic-carousel/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-basic-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-simple-carouse

This is a simple React Native carousel which features a pagination.

alt-tag

Installation

Download package with npm or yarn

npm install react-native-simple-carousel

yarn add react-native-simple-carousel

Install pods

cd ios && pod install

Rebuild the project

npx react-native run-android
npx react-native run-ios

Example

import Carousel from 'react-native-simple-carousel'

<Carousel 
  data={data} 
  renderItem={({item, index}) => <View>{...}</View>}
  onSnapItem={(item) => console.log(item)}
/>

Props

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
`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`

Inherited props

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.