Skip to main content

Carousel

Carousel for scrolling pages
(code example)

info

This component extends ScrollView props.

tip

This component support **** modifiers.

Usage​

Live Editor
function Example(props) {
  const BACKGROUND_COLORS = [
    Colors.red50,
    Colors.yellow20,
    Colors.purple50,
    Colors.green50,
    Colors.cyan50,
    Colors.purple20,
    Colors.blue60,
    Colors.red10,
    Colors.green20,
    Colors.purple60
  ];

  const Page = ({children, style, ...others}) => {
    return (
      <View {...others} style={[{flex: 1, borderWidth: 1, borderRadius: 8}, style]}>
        {children}
      </View>
    );
  };

  return (
    <div>
      <View style={{width: 800}}>
        <Carousel
          autoplay
          // onChangePage={onChangePage}
          pageWidth={800 - Spacings.s5 * 2}
          itemSpacings={Spacings.s3}
          containerMarginHorizontal={Spacings.s2}
          initialPage={2}
          containerStyle={{height: 160}}
          pageControlPosition={Carousel.pageControlPositions.UNDER}
          // allowAccessibleLayout
        >
          {_.map([...Array(10)], (_item, index) => (
            <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>
              <Text margin-15>CARD {index}</Text>
            </Page>
          ))}
        </Carousel>
      </View>
    </div>
  );
}
Result
Loading...

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