react-native-flash-carousel

Carousel component for React Native powered by FlashList

!Animation

Installation

``sh
yarn add @shopify/flash-list
yarn add react-native-flash-carousel
`

Usage

Only 2 props are required: data and renderItem


`js
import { Carousel } from 'react-native-flash-carousel'

// ...

export const AwesomeApp = () => (
data={yourData}
renderItem={({ item }) => }
/>
)
`

Props


| 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

$3


`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 component
- [ ] Looping feature
- [ ] Analytics feature
- [ ] Different types of swiping feature
- [ ] ...

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library