PageControlPage Control provides orientation by showing the total number of items and indicating the currently visible item. It is most commonly used in components such as galleries, card carousels, and slideshows.

UX Guidelines

Overview

Usage Examples

Page control display

Point of reference	Swipe forward (left)	Swipe back (right)
1st item	Component Not Supported	Component Not Supported
2nd item	Component Not Supported	Component Not Supported
3rd item	Component Not Supported	Component Not Supported
4th item
5th item up to 3rd from the last	Component Not Supported	Component Not Supported
3rd from the last	Component Not Supported	Component Not Supported
One before last item	Component Not Supported	Component Not Supported
Last item	Component Not Supported	Component Not Supported

Spec

Dev

UsageCode Example

<PageControl numOfPages={5} currentPage={0}/>

APIThis is the list of additional props for the component

color

string

Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages. Default is Colors.$iconPrimary

containerStyle

ViewStyle

Additional styles for the top container

currentPage

number

Required

Zero-based index of the current page

enlargeActive

boolean

Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect.. Default is false

inactiveColor

string

Color of the unselected page dots and the border of the not selected pages

limitShownPages

boolean

Limit the number of page indicators shown.\enlargeActive prop is disabled in this state, when set to true there will be maximum of 7 shown.\Only relevant when numOfPages > 5.

numOfPages

number

Required

Total number of pages

onPagePress

(index: number) => void

Action handler for clicking on a page indicator

size

number | [number, number, number]

The size of the page indicator.\When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.\An alternative is to send an array [smallSize, mediumSize, largeSize].. Default is 10

spacing

number

The space between the siblings page indicators. Default is 4

testID

string

Used to identify the pageControl in tests