{/*

=========================================================================#

This page generated by /scripts/gen-pages.mjs, Don't update it manually#

=========================================================================

*/}

import { Tabs } from 'nextra/components'
import { Callout } from 'nextra/components'
import Demo from '@/components/Demo'

Check out the `multiple` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/multiple/index.tsx)

import * as React from "react";
import { View } from "react-native";
import Carousel from "react-native-reanimated-carousel";

import { SBItem } from "@/components/SBItem";
import { PURPLE_IMAGES } from "@/constants/purple-images";
import { window } from "@/constants/sizes";

const PAGE_WIDTH = window.width;

const COUNT = 6;

function Index() {
	return (
		<View
			id="carousel-component"
			dataSet={{ kind: "custom-animations", name: "multiple" }}
			style={{ width: PAGE_WIDTH, height: PAGE_WIDTH / 2 }}
			<Carousel
				loop
				autoPlay
				vertical={false}
				style={{ width: PAGE_WIDTH, height: PAGE_WIDTH / 2 }}
				itemWidth={PAGE_WIDTH / COUNT}
				itemHeight={PAGE_WIDTH / 2}
				data={PURPLE_IMAGES}
				renderItem={({ index }) => (
					<View style={{ width: PAGE_WIDTH / COUNT, height: PAGE_WIDTH / 2 }}>
						<SBItem key={index} index={index} />
					</View>
				)}
			/>
		</View>
	);
}

export default Index;