react-native-ui-lib/src/components/pageControl/pageControl.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "PageControl",
  "category": "navigation",
  "description": "Page indicator, typically used in paged scroll-views",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
  "images": [
    "https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"
  ],
  "props": [
    {
      "name": "limitShownPages",
      "type": "boolean",
      "description": "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."
    },
    {
      "name": "containerStyle",
      "type": "ViewStyle",
      "description": "Additional styles for the top container"
    },
    {
      "name": "numOfPages",
      "required": true,
      "type": "number",
      "description": "Total number of pages"
    },
    {
      "name": "currentPage",
      "required": true,
      "type": "number",
      "description": "Zero-based index of the current page"
    },
    {
      "name": "onPagePress",
      "type": "(index: number) => void",
      "description": "Action handler for clicking on a page indicator"
    },
    {
      "name": "color",
      "type": "string",
      "description": "Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages",
      "default": "Colors.$iconPrimary"
    },
    {
      "name": "inactiveColor",
      "type": "string",
      "description": "Color of the unselected page dots and the border of the not selected pages"
    },
    {
      "name": "size",
      "type": "number | [number, number, number]",
      "description": "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": "10"
    },
    {
      "name": "enlargeActive",
      "type": "boolean",
      "description": "Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect.",
      "default": "false"
    },
    {
      "name": "spacing",
      "type": "number",
      "description": "The space between the siblings page indicators",
      "default": "4"
    },
    {
      "name": "testID",
      "type": "string",
      "description": "Used to identify the pageControl in tests"
    }
  ],
  "snippet": [
    "<PageControl numOfPages={5$1} currentPage={0$2}/>"
  ],
  "docs": {
    "hero": {
      "title": "PageControl",
      "description": "Page indicator, typically used in paged scroll-views"
    },
    "tabs": [
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "section",
            "content": [
              {
                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-649490&embed-host=share",
                "height": 1600
              }
            ]
          }
        ]
      }
    ]
  }
}