Carousel component for React Native powered by FlashList
npm install react-native-flash-carouselCarousel component for React Native powered by FlashList
``sh`
yarn add @shopify/flash-list
yarn add react-native-flash-carousel
Only 2 props are required: data and renderItem
`js
import { Carousel } from 'react-native-flash-carousel'
// ...
export const AwesomeApp = () => (
renderItem={({ item }) =>
/>
)
`
| Prop | Description | Type | Default |
|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|------------------------------|
| data | Required | FlashList doc | |
| renderItem | Required | FlashList doc | |
| autoScroll | Enables auto scrolling of the carousel | boolean | false |
| autoScrollInterval | Only works when auto scroll is enabled.
Scroll interval in seconds. | number | 5 |
| autoScrollPause | Only works when auto scroll is enabled.
The interval after which auto scroll starts working again after the user has interacted with the carousel | number | 5 |
| pagination | Displays the pagination component below the carousel | boolean | false |
| paginationDotStyle | Styles for dots in the pagination component | PaginationDotStyle | PaginationDotStyle |
Supports FlashList's props for horizontal list FlashList docs
ts
interface PaginationDotStyle {
dotColor?: string // default 'lightgray'
activeDotColor?: string // default 'darkgray'
dotSize?: number // default 8
activeDotSize?: number // default 9
}
`Roadmap
Will be dynamically updated
- [x]
v0.2 Carousel component
- [x] v0.3 Auto scroll feature
- [x] v0.4` Pagination componentSee the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library