Carousel

Beta

Horizontal item browser with animated transitions and layouts.

Installation

npm install @xaui/native

Import

import { Carousel } from '@xaui/native/carousel'

Basic Usage

Minimal example showing the component with its default configuration.

import { Carousel } from '@xaui/native/carousel'

export function Example() {
  return <Carousel />
}

Basic Carousel

Display a list of items with data, renderItem, and keyExtractor.

import { Carousel } from '@xaui/native/carousel'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

const slides = [
  { id: '1', label: 'Slide 1', color: '#4f46e5' },
  { id: '2', label: 'Slide 2', color: '#0891b2' },
  { id: '3', label: 'Slide 3', color: '#059669' },
]

export function BasicCarouselExample() {
  return (
    <Carousel
      data={slides}
      keyExtractor={item => item.id}
      itemWidth={300}
      itemHeight={180}
      renderItem={({ item }) => (
        <View style={{ flex: 1, backgroundColor: item.color, borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
          <Typography style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>{item.label}</Typography>
        </View>
      )}
    />
  )
}

Auto Play

Auto-scroll slides at a fixed interval.

import { Carousel } from '@xaui/native/carousel'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

const banners = [
  { id: '1', title: 'Welcome' },
  { id: '2', title: 'Explore' },
  { id: '3', title: 'Get started' },
]

export function AutoPlayExample() {
  return (
    <Carousel
      data={banners}
      keyExtractor={item => item.id}
      itemWidth={320}
      itemHeight={160}
      autoPlay
      autoPlayInterval={2500}
      renderItem={({ item }) => (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f1f5f9', borderRadius: 12 }}>
          <Typography style={{ fontSize: 20, fontWeight: 'bold' }}>{item.title}</Typography>
        </View>
      )}
    />
  )
}

Hero Layout

Full-width hero carousel with a large focal item.

import { Carousel } from '@xaui/native/carousel'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

const items = [
  { id: '1', label: 'Feature A' },
  { id: '2', label: 'Feature B' },
  { id: '3', label: 'Feature C' },
]

export function HeroCarouselExample() {
  return (
    <Carousel
      data={items}
      keyExtractor={item => item.id}
      layout="hero"
      itemWidth={280}
      itemHeight={200}
      renderItem={({ item }) => (
        <View style={{ flex: 1, backgroundColor: '#1e293b', borderRadius: 16, justifyContent: 'center', alignItems: 'center' }}>
          <Typography style={{ color: '#fff', fontSize: 22 }}>{item.label}</Typography>
        </View>
      )}
      onActiveItemChange={index => console.log('active:', index)}
    />
  )
}