Carousel

Carousel presents horizontal swipeable slide cards featuring 3D scaling interpolation, ultra-smooth continuous Reanimated pagination dots, optional auto-play infinite loops, and side arrow controls.

Usage

CarouselExample.tsx

import React from 'react';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  Card,
  Box,
  Text,
  Badge,
  Button,
} from '@masumdev/rn-ui';
import { Sparkles, ArrowRight } from 'lucide-react-native';

export function CarouselExample() {
  return (
    <Box gap="lg">
      {/* Scaling Deck Carousel */}
      <Carousel loop itemWidth={260}>
        <CarouselContent>
          <CarouselItem>
            <Card outlined style={{ width: 250, padding: 16, borderRadius: 16 }}>
              <Box row center style={{ justifyContent: 'space-between' }}>
                <Sparkles color="#6366F1" size={22} />
                <Badge tone="primary">FEATURED</Badge>
              </Box>
              <Text weight="700" style={{ marginTop: 8 }}>AI Auto-Scaling</Text>
              <Text color="textMuted" variant="bodySmall">
                Dynamic layout adjustment for mobile.
              </Text>
              <Button size="xs" variant="outline" style={{ marginTop: 12 }}>
                Explore Feature
              </Button>
            </Card>
          </CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>

      {/* Auto-Play Carousel */}
      <Carousel autoPlay autoPlayInterval={3000} loop itemWidth={290}>
        <CarouselContent>
          <CarouselItem>
            <Box style={{ width: 280, padding: 18, borderRadius: 16, backgroundColor: '#EBF5FF' }}>
              <Text weight="700" color="primary">Version 2.4 Released</Text>
              <Text color="textMuted" variant="bodySmall">25+ mobile UI components added.</Text>
            </Box>
          </CarouselItem>
        </CarouselContent>
      </Carousel>
    </Box>
  );
}

Carousel Props

Prop	Type	Default	Description
itemWidth	number	—	Width of each individual slide card in pixels (defaults to 78% container width).
autoPlay	boolean	false	Enables automatic slide advance timer.
autoPlayInterval	number	3000	AutoPlay timer interval in milliseconds.
loop	boolean	true	Enables infinite looping from last slide back to slide 0.
showPagination	boolean	true	Shows continuous Reanimated interpolated pagination dots at bottom.
onIndexChange	(index: number) => void	—	Callback triggered when active slide index changes.
children	ReactNode	—	CarouselContent and navigation buttons.