PageContainer

Swipeable page view for onboarding flows, wizards, and carousels.

Basic Usage

import { PageContainer } from '@multinaire/ui';

<PageContainer
  itemsMap={{
    page1: <Page1 />,
    page2: <Page2 />,
    page3: <Page3 />,
  }}
  selectedItem="page1"
  onChange={(item) => setSelectedItem(item)}
  onFinish={() => completeOnboarding()}
/>

Props

Prop	Type	Default	Description
itemsMap	Record<T, ReactElement>	—	Map of tab key to the React element rendered for that tab
selectedItem	T	—	Currently selected tab key
isFinishLoading	boolean	false	When true, the finish button becomes active after the last page
onChange	(item: T) => void	—	Callback invoked when the user switches tabs
onFinish	() => void	—	Callback invoked when the user completes the last page step
style	ContainerStyleProps	—	Additional styles applied to the page content container (desktop only, overflow: hidden is always set)
paginationStyle	ContainerStyleProps	—	Additional styles applied to the pagination bar/sidebar
previousTitle	string	'Previous'	Label for the back navigation button
nextTitle	string	'Next'	Label for the next navigation button
doneTitle	string	'Done'	Label for the finish button shown on the last page

Examples

Onboarding Flow

const [currentPage, setCurrentPage] = useState('welcome');

<PageContainer
  itemsMap={{
    welcome: <WelcomeScreen />,
    features: <FeaturesScreen />,
    permissions: <PermissionsScreen />,
  }}
  selectedItem={currentPage}
  onChange={setCurrentPage}
  onFinish={() => {
    completeOnboarding();
    navigation.replace('Home');
  }}
/>

With Loading State

<PageContainer
  itemsMap={{
    step1: <Step1 />,
    step2: <Step2 />,
    step3: <Step3 />,
  }}
  selectedItem={step}
  onChange={setStep}
  isFinishLoading={isSubmitting}
  onFinish={handleSubmit}
/>

Image Carousel

<PageContainer
  itemsMap={images.reduce((acc, img, i) => ({
    ...acc,
    [`image${i}`]: (
      <Photo
        source={{ uri: img.url }}
        width="100%"
        aspectRatio="16:9"
      />
    ),
  }), {})}
  selectedItem={`image${currentIndex}`}
  onChange={(key) => setCurrentIndex(parseInt(key.replace('image', '')))}
  onFinish={() => {}}
/>