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

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

[Open the interactive pagination demo](https://rn-carousel.dev/Examples/utils/pagination)

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

import { renderItem } from "@/utils/render-item";

const defaultDataWith6Colors = [
	"#B0604D",
	"#899F9C",
	"#B3C680",
	"#5C6265",
	"#F5D399",
	"#F1F1F1",
];

const PAGE_WIDTH = 430;

function Index() {
	const progress = useSharedValue<number>(0);
	const baseOptions = {
		orientation: "horizontal",
	} as const;

	const ref = React.useRef<CarouselRef>(null);

	const onPressPagination = (index: number) => {
		ref.current?.scrollTo({
			index,
			animated: true,
		});
	};

	return (
		<View
			id="carousel-component"
			dataSet={{ kind: "utils", name: "pagination" }}
			style={{ gap: 10 }}
		>
			<View style={{ marginBottom: 10 }}>
				<Carousel
					ref={ref}
					{...baseOptions}
					loop
					progress={progress}
					contentContainerStyle={{ width: PAGE_WIDTH }}
					style={{ width: PAGE_WIDTH, height: PAGE_WIDTH * 0.6 }}
					data={defaultDataWith6Colors}
					renderItem={renderItem({ rounded: true })}
				/>
			</View>

			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{ backgroundColor: "#262626" }}
				activeDotStyle={{ backgroundColor: "#f1f1f1" }}
				containerStyle={{ gap: 5, marginBottom: 10 }}
				onPress={onPressPagination}
				getItemAccessibilityLabel={(index, count) =>
					`Color slide ${index + 1} of ${count}`
				}
			/>

			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{
					width: 25,
					height: 4,
					backgroundColor: "#262626",
				}}
				activeDotStyle={{
					backgroundColor: "#f1f1f1",
				}}
				containerStyle={{
					gap: 10,
					marginBottom: 10,
				}}
				onPress={onPressPagination}
				getItemAccessibilityLabel={(index, count) =>
					`Color ${index + 1} of ${count}`
				}
			/>

			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{
					width: 20,
					height: 20,
					borderRadius: 100,
					backgroundColor: "#262626",
				}}
				activeDotStyle={{
					borderRadius: 100,
					backgroundColor: "#f1f1f1",
				}}
				containerStyle={[
					{
						gap: 5,
						marginBottom: 10,
					},
				]}
			/>

			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{
					width: 20,
					height: 20,
					borderRadius: 16,
					backgroundColor: "#262626",
				}}
				activeDotStyle={{
					borderRadius: 8,
					width: 40,
					height: 30,
					backgroundColor: "#f1f1f1",
				}}
				containerStyle={{
					gap: 5,
					marginBottom: 10,
					alignItems: "center",
					minHeight: 30,
				}}
				onPress={onPressPagination}
			/>
		</View>
	);
}

export default Index;

```