PageControlPage indicator, typically used in paged scroll-views

UX Guidelines

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