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 page keys to components
selectedItem	T	-	Currently selected page key
scrollEnabled	boolean	true	Enable swipe navigation
isFinishLoading	boolean	false	Show loading on finish button
onChange	(item: T) => void	-	Page change handler
onFinish	() => void	-	Called when last page is completed

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={() => {}}
/>