Pager

Beta

Paged content container with swipe and indicator support.

Installation

npm install @xaui/native

Import

import { Pager, PagerItem } from '@xaui/native/pager'

Basic Usage

Minimal example showing the component with its default configuration.

import { Pager } from '@xaui/native/pager'

export function Example() {
  return (
    <Pager>
      {/* children */}
    </Pager>
  )
}

Basic Pager

Swipe between simple pages with default indicators.

import { Pager, PagerItem } from '@xaui/native/pager'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function BasicPagerExample() {
  return (
    <Pager>
      <PagerItem>
        <View style={{ height: 160, justifyContent: 'center', alignItems: 'center', backgroundColor: '#e0f2fe', borderRadius: 12 }}>
          <Typography variant="titleMedium">Page 1</Typography>
        </View>
      </PagerItem>
      <PagerItem>
        <View style={{ height: 160, justifyContent: 'center', alignItems: 'center', backgroundColor: '#dcfce7', borderRadius: 12 }}>
          <Typography variant="titleMedium">Page 2</Typography>
        </View>
      </PagerItem>
      <PagerItem>
        <View style={{ height: 160, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fef3c7', borderRadius: 12 }}>
          <Typography variant="titleMedium">Page 3</Typography>
        </View>
      </PagerItem>
    </Pager>
  )
}

Controlled Page

Drive active page externally and react to page changes.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { Pager, PagerItem } from '@xaui/native/pager'
import { Column, Row } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function ControlledPagerExample() {
  const [page, setPage] = useState(0)

  return (
    <Column gap={10}>
      <Row spacing={8}>
        <Button size="sm" variant="bordered" onPress={() => setPage(0)}>1</Button>
        <Button size="sm" variant="bordered" onPress={() => setPage(1)}>2</Button>
        <Button size="sm" variant="bordered" onPress={() => setPage(2)}>3</Button>
      </Row>

      <Pager page={page} onPageChange={setPage}>
        <PagerItem><Typography>Overview content</Typography></PagerItem>
        <PagerItem><Typography>Details content</Typography></PagerItem>
        <PagerItem><Typography>Reviews content</Typography></PagerItem>
      </Pager>
    </Column>
  )
}

Custom Indicator

Replace default dots with a custom renderer.

import { Pager, PagerItem } from '@xaui/native/pager'
import type { PagerIndicatorRenderState } from '@xaui/native/pager'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function CustomIndicatorPagerExample() {
  return (
    <Pager
      defaultPage={1}
      renderIndicator={({ index, isActive }: PagerIndicatorRenderState) => (
        <View
          key={`pill-${index}`}
          style={{
            width: isActive ? 24 : 10,
            height: 10,
            borderRadius: 999,
            backgroundColor: isActive ? '#2563eb' : '#cbd5e1',
          }}
        />
      )}
    >
      <PagerItem><Typography>Alpha</Typography></PagerItem>
      <PagerItem><Typography>Beta</Typography></PagerItem>
      <PagerItem><Typography>Gamma</Typography></PagerItem>
    </Pager>
  )
}

Fullscreen and Swipe Control

Use fullscreen mode and disable swipe for guided flows.

import { Pager, PagerItem } from '@xaui/native/pager'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function FullscreenPagerExample() {
  return (
    <View style={{ height: 280, borderRadius: 14, overflow: 'hidden' }}>
      <Pager
        isFullscreen
        swipeEnabled={false}
        customAppearance={{ container: { flex: 1 } }}
      >
        <PagerItem><Typography>Step 1</Typography></PagerItem>
        <PagerItem><Typography>Step 2</Typography></PagerItem>
      </Pager>
    </View>
  )
}