Components
Carousel

Carousel Component

Installation

The Carousel component provides a flexible way to showcase content in a scrollable container.

Installation Command
npx @nativecn/cli add carousel

Basic Usage

Basic Carousel

Vertical Orientation

Vertical Carousel

With Custom Content

Product Showcase Carousel

Usage Examples

Image Gallery with Loop
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@nativecn/ui';
import { View, Image, StyleSheet, useColorScheme } from 'react-native';

export function ImageGallery({ images }) {
  const colorScheme = useColorScheme();
  
  return (
    <Carousel 
      loop 
      mode={colorScheme}
      className="w-full"
    >
      <CarouselContent>
        {images.map((image, index) => (
          <CarouselItem key={index}>
            <Image
              source={{ uri: image.url }}
              style={styles.image}
              resizeMode="cover"
            />
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious variant="default" />
      <CarouselNext variant="default" />
    </Carousel>
  );
}

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: 400,
    borderRadius: 8,
  },
});
Onboarding Screens
import { Carousel, CarouselContent, CarouselItem } from '@nativecn/ui';
import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';

export function OnboardingScreens() {
  const { width } = useWindowDimensions();
  
  const screens = [
    {
      title: 'Welcome',
      description: 'Get started with our amazing app',
      icon: '👋',
    },
    {
      title: 'Features',
      description: 'Discover all the powerful features',
      icon: '⚡',
    },
    {
      title: 'Get Started',
      description: 'Create your account and jump right in',
      icon: '🚀',
    },
  ];

  return (
    <Carousel className="w-full h-[500px]">
      <CarouselContent>
        {screens.map((screen, index) => (
          <CarouselItem key={index}>
            <View style={[styles.screen, { width }]}>
              <Text style={styles.icon}>{screen.icon}</Text>
              <Text style={styles.title}>{screen.title}</Text>
              <Text style={styles.description}>{screen.description}</Text>
            </View>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  icon: {
    fontSize: 64,
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    color: '#666',
  },
});

Reference

Carousel Props
interface CarouselProps extends ViewProps {
  // Orientation of the carousel
  orientation?: 'horizontal' | 'vertical';
  
  // Enable infinite loop
  loop?: boolean;
  
  // Number of items (optional, automatically calculated)
  itemCount?: number;
  
  // Light/dark mode
  mode?: 'light' | 'dark';
  
  // Optional className for styling
  className?: string;
}

interface CarouselNavigationProps extends ViewProps {
  // Navigation button variant
  variant?: 'default' | 'outline' | 'ghost';
  
  // Button size
  size?: 'default' | 'sm' | 'lg' | 'icon';
  
  // Optional className for styling
  className?: string;
}
CardOTP Input