react-native-carousel

Getting started

$ yarn add @r0b0t3d/react-native-carousel

Note: Currently, I am using react-native-reanimated for animation. So you should install it as well

$ yarn add react-native-reanimated

Breaking changes

v3.4.0

Added:

• You have to wrap your component inside withCarouselContext
• useCarouselContext hook

Removed:

• Remove component's ref

Changed:

• Methods goNext, goPrev, snapToItem now accessible via useCarouselContext

const {
    goNext,
    goPrev,
    snapToItem
  } = useCarouselContext();

renderItem: (
  data: { item: T; index?: number },
  animatedData?: { scrollPosition?: Animated.SharedValue<number>, offset?: number }
) => React.ReactNode

Show cases

Loop	Scale	Alignment

Loop

<Carousel
  loop={true}
  autoPlay={true}
  duration={3000}
  animation="parallax"
/>

Scale

<Carousel
  itemWidth={width - 100}
  inactiveOpacity={0.5}
  inactiveScale={0.9}
/>

Alignment

<Carousel
  itemWidth={width - 100}
  inactiveOpacity={0.5}
  inactiveScale={0.9}
  firstItemAlignment="start"
/>

Usage

import Carousel, {
  withCarouselContext,
  useCarouselContext,
} from '@r0b0t3d/react-native-carousel';

function MyCarousel() {
  const {
    goNext,
    goPrev,
    snapToItem
  } = useCarouselContext(); // <- use this instead of passing ref to Carousel

  return (
    <View>
      <Carousel
        style={{ height: 200 }}
        data={data}
        loop={false}
        autoPlay={true}
        duration={3000}
        itemWidth={width - 100}
        inactiveOpacity={0.5}
        inactiveScale={0.9}
        firstItemAlignment="start"
        spaceBetween={20}
        animatedPage={currentPage}
        renderItem={({item}) => {
          return (
            <Image
              style={{
                flex: 1,
                backgroundColor: 'red',
              }}
              source={{ uri: item.url }}
            />
          );
        }}
      />
      <View>
        <PaginationIndicator
          containerStyle={{ marginTop: 20 }}
          activeIndicatorStyle={{
            height: 10,
            borderRadius: 5,
          }}
          indicatorConfigs={{
            spaceBetween: 10,
            indicatorWidth: 10,
            indicatorSelectedWidth: 20,
          }}
        />
      </View>
    </View>
  );
}

export default withCarouselContext(MyCarousel) // <-- To use carousel context, you need wrap your component with withCarouselContext

Carousel

Properties

Methods

withCarouselContext

This HOC provides easy way to wrap your component with CarouselContext.Provider. So if you'd like to use useCarouselContext, you need to wrap your component with this.

PaginationIndicator

Easy way to define the indicator for your carousel.

Please note that, this component only works with withCarouselContext. So please make sure that it is rendered under the component that you wrap with withCarouselContext

Check example above for more info

Contributing

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

License

MIT