Skip to main content

Carousel

Carousel for scrolling pages
(code example)

info

This component extends ScrollView props.

tip

This component support **** modifiers.

Usage#

<Carousel onChangePage={() => console.log('page changed')}> {_.map(items, item => (  return renderItem(item, index); ))}</Carousel>

API#

allowAccessibleLayout#

Whether to layout Carousel for accessibility
boolean

animated#

Should the container be animated (send the animation style via containerStyle)
boolean

animatedScrollOffset#

Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY())
Animated.ValueXY

autoplay#

Enable to switch automatically between the pages
boolean

autoplayInterval#

Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled)
number

containerMarginHorizontal#

Horizontal margin for the carousel container
number

containerPaddingVertical#

Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android).
number

containerStyle#

The carousel container style
ViewStyle

counterTextStyle#

The counter's text style
ViewStyle

horizontal#

Whether pages will be rendered horizontally or vertically
boolean

initialPage#

The initial page to start at
number

itemSpacings#

The spacing between the pages
number

loop#

If true, will have infinite scroll (works only for horizontal carousel)
boolean

onChangePage#

Callback for page change event
(pageIndex, oldPageIndex, info) => void

onScroll#

Attach a callback for onScroll event of the internal ScrollView
function

pageControlPosition#

The position of the PageControl component ['over', 'under'], otherwise it won't display
PageControlPosition

pageControlProps#

PageControl component props
PageControlProps

pageHeight#

The page height (all pages should have the same height).
number

pageWidth#

The page width (all pages should have the same width). Does not work if passing 'loop' prop
number

pagingEnabled#

Will block multiple pages scroll (will not work with 'pageWidth' prop)
boolean

showCounter#

Whether to show a page counter (will not work with 'pageWidth' prop)
boolean