React-native-flash-carousel NPM

react-native-flash-carousel

Carousel component for React Native powered by FlashList

Animation

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

v0.2 Carousel component
v0.3 Auto scroll feature
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

react swiper carousel react-native react-native-swiper react-native-carousel react-native-snap-carousel react-native-flash-carousel react-native-flash-list flash-list android ios

@everything-registry/sub-chunk-2578

0.4.0

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago