MultinairePageView

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

Basic Usage

import { MultinairePageView } from '@multinaire/multinaire-design';

<MultinairePageView
  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
scrollEnabled	boolean	true	Enable scrolling when there are more tabs than fit the screen
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

Examples

Onboarding Flow

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

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

With Loading State

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

Disable Swipe

<MultinairePageView
  scrollEnabled={false}
  itemsMap={pages}
  selectedItem={currentPage}
  onChange={setCurrentPage}
  onFinish={handleComplete}
/>

Image Carousel

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