Pagination Dots

A carousel indicator where the active dot widens into a pill and slides between pages.

ReanimatedHapticsNativeWindSource

Prerequisites

Reanimated drives the width/color interpolation, Haptics fires a tick when a dot is tapped directly.


npx expo install expo-haptics react-native-reanimated

Install


npx @rslab/cli add pagination-dots

Usage


import { PaginationDots } from '@/components/ui/PaginationDots';



const [page, setPage] = useState(0);



<PaginationDots count={4} index={page} />



<PaginationDots count={8} index={page} size={5} activeWidth={22} gap={5} />

Pass onDotPress to make the dots tappable and jump the carousel directly:

<PaginationDots count={5} index={page} onDotPress={setPage} />

Props

PropTypeDefault

count

number

-

Total number of pages/dots.

index

number

-

Controlled active index, e.g. driven by a carousel's scroll position.

size?

number

6

Inactive dot diameter.

activeWidth?

number

18

Active dot's pill width.

color?

string

-

Active dot color. Defaults to a neutral dark/light tone via useColorScheme().

gap?

number

6

Spacing between dots.

onDotPress?

(index: number) => void

-

Optional. If provided, dots become tappable and fire this with the tapped index, plus a selection haptic.

className?

string

-

Extend or override the outer row.

How it works

Each dot owns its own animation, not the row. Every dot gets its own shared value reacting to its own active boolean (i === index), rather than the parent driving one shared progress value for the whole row. Only the two dots whose active flag actually changed re-animate on any given index change; the rest sit at rest.
Width and color both come off one progress value. interpolate drives the width from size to activeWidth, and interpolateColor drives the fill from the muted tone to color, both read off the same 0 → 1 value, so the stretch and the color shift land in the same instant.
withTiming, not withSpring, on purpose. A carousel index can flip many times in a row, swiping quickly through pages, and a spring's overshoot on every flip reads as bouncy and cheap the second time you see it. A flat withTiming with Easing.out(Easing.quad) settles calmly every time.
Tap-to-jump is opt-in. Dots only become pressable when onDotPress is passed, so a purely passive indicator never eats touches meant for a swipe gesture underneath it. Tapping the already-active dot is a no-op; a real jump fires a selection haptic.

Tuning

The 220ms duration and Easing.out(Easing.quad) easing in the dot's effect, how snappy the stretch/color-shift feels
The muted tone (#525252 dark / #d4d4d4 light), swap for your own inactive-dot color
size vs activeWidth: keep activeWidth at least ~2.5-3x size so the active pill reads clearly as "wider," not just "slightly bigger"

See exactly how this works with an RSLAB subscription.

Get Pro

Pagination Dots

Prerequisites

Install

Usage

Props

On this page