---
title: "Multiple"
description: "Multiple carousel animation for React Native, with a live demo and its full source."
canonical_url: "https://rn-carousel.dev/Examples/custom-animations/multiple"
markdown_url: "https://rn-carousel.dev/Examples/custom-animations/multiple.md"
version: "5"
---
# Multiple

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)

[Open the interactive multiple demo](https://rn-carousel.dev/Examples/custom-animations/multiple)

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

import { SBItem } from "@/components/SBItem";
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
				style={{ width: PAGE_WIDTH, height: PAGE_WIDTH / 2 }}
				itemSize={PAGE_WIDTH / COUNT}
				data={[...new Array(12).keys()]}
				renderItem={({ index }) => (
					<View style={{ width: PAGE_WIDTH / COUNT, height: PAGE_WIDTH / 2 }}>
						<SBItem key={index} index={index} />
					</View>
				)}
			/>
		</View>
	);
}

export default Index;

```