Onboarding

A customizable multi-step onboarding flow with smooth animations and gesture support.

Installation


pnpm dlx bna-ui add onboarding

Usage

import { Onboarding, OnboardingStep } from '@/components/ui/onboarding';

const steps: OnboardingStep[] = [
  {
    id: '1',
    title: 'Welcome',
    description: 'Get started with our amazing app',
    icon: <WelcomeIcon />,
  },
  {
    id: '2',
    title: 'Explore Features',
    description: 'Discover all the powerful features we offer',
    icon: <FeaturesIcon />,
  },
  {
    id: '3',
    title: 'Get Started',
    description: "You are all set! Let's begin your journey",
    icon: <StartIcon />,
  },
];
 
<Onboarding
  steps={steps}
  onComplete={() => console.log('Onboarding completed')}
  onSkip={() => console.log('Onboarding skipped')}
/>;

Examples

Default

With Images

Custom Styling

No Skip Button

Swipe Disabled

Custom Buttons

With Hook

API Reference

Onboarding

The main onboarding component that manages the multi-step flow.

Prop	Type	Default	Description
`steps`	`OnboardingStep[]`	-	Array of onboarding steps to display.
`onComplete`	`() => void`	-	Callback when onboarding is completed.
`onSkip`	`() => void`	-	Callback when onboarding is skipped.
`showSkip`	`boolean`	`true`	Whether to show the skip button.
`showProgress`	`boolean`	`true`	Whether to show progress dots.
`swipeEnabled`	`boolean`	`true`	Whether to enable swipe gestures.
`primaryButtonText`	`string`	`"Get Started"`	Text for the primary button on the last step.
`skipButtonText`	`string`	`"Skip"`	Text for the skip button.
`nextButtonText`	`string`	`"Next"`	Text for the next button.
`backButtonText`	`string`	`"Back"`	Text for the back button.
`style`	`ViewStyle`	-	Additional styles for the container.
`children`	`ReactNode`	-	Custom content to render in each step.

OnboardingStep

Configuration object for each step in the onboarding flow.

Prop	Type	Default	Description
`id`	`string`	-	Unique identifier for the step.
`title`	`string`	-	Title text for the step.
`description`	`string`	-	Description text for the step.
`image`	`ReactNode`	-	Custom image component for the step.
`icon`	`ReactNode`	-	Icon component (used if no image provided).
`backgroundColor`	`string`	-	Custom background color for the step.

useOnboarding Hook

A hook for managing onboarding state in your application.

const {
  hasCompletedOnboarding,
  currentOnboardingStep,
  setCurrentOnboardingStep,
  completeOnboarding,
  resetOnboarding,
  skipOnboarding,
} = useOnboarding();

Returns

Property	Type	Description
`hasCompletedOnboarding`	`boolean`	Whether the user has completed onboarding.
`currentOnboardingStep`	`number`	Current step index in the onboarding flow.
`setCurrentOnboardingStep`	`(step: number) => void`	Function to set the current step.
`completeOnboarding`	`() => Promise<void>`	Function to mark onboarding as completed.
`resetOnboarding`	`() => void`	Function to reset onboarding state.
`skipOnboarding`	`() => Promise<void>`	Function to skip and complete onboarding.

Features

Smooth Animations: Built with react-native-reanimated for fluid transitions
Gesture Support: Swipe left/right to navigate between steps
Customizable: Extensive customization options for styling and behavior
Progress Indicators: Visual progress dots to show current step
Flexible Content: Support for images, icons, and custom content
State Management: Built-in hook for managing onboarding state
Accessibility: Built with accessibility features in mind
TypeScript: Full TypeScript support with proper type definitions

Accessibility

The Onboarding component is built with accessibility in mind:

Proper semantic structure for screen readers
Keyboard navigation support
High contrast support for progress indicators
Descriptive labels for navigation buttons
Support for dynamic text sizing
Focus management between steps

Mode Toggle ParallaxScrollView

On This Page

Installation Usage Examples Default With Images Custom Styling No Skip Button Swipe Disabled Custom Buttons With Hook API Reference Onboarding OnboardingStep useOnboarding Hook Returns Features Accessibility