react-native-flash-carousel

Carousel component for React Native powered by FlashList

Installation

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

Usage

Only 2 props are required: data and renderItem

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

// ...

export const AwesomeApp = () => (
  <Carousel
    data={yourData}
    renderItem={({ item }) => <Card item={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

Types

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