react-native-onboarding

For complete control over the UI, you can replace default elements with custom components.

• introPanel: Pass a function that receives onPressStart.
• steps: Pass a component function that receives onNext, onBack, and isLast.
• background: Pass a function that returns a ReactNode to render behind the content.
• skipButton: Pass a function that receives onPress to customize the close/skip button.

<Onboarding
  introPanel={({ onPressStart }) => (
    <CustomWelcomeScreen onStart={onPressStart} />
  )}
  background={() => (
    <Image 
      source={require('./assets/background.png')} 
      style={StyleSheet.absoluteFillObject} 
    />
  )}
  skipButton={({ onPress }) => (
    <TouchableOpacity onPress={onPress}>
      <Text>✕</Text>
    </TouchableOpacity>
  )}
  steps={[
    {
      component: ({ onNext, onBack, isLast }) => (
        <CustomStepComponent 
          onNext={onNext} 
          onBack={onBack} 
          isLast={isLast} 
        />
      ),
      image: require('./assets/step1.png'),
      position: 'top',
    },
  ]}
/>

An OnboardingStep can be defined in two ways:

1. Default Step: A text-based step where you provide title, description, buttonLabel, image, and position. You must not provide a component property.
2. Custom Step: A fully custom renderer where you provide a component function. This function receives onNext, onBack, and isLast props to allow manual control over the step lifecycle. Custom steps also require an image and position.

// Default Step
const defaultStep: OnboardingStep = {
  title: 'Default Step',
  description: 'This is a standard step',
  buttonLabel: 'Continue',
  image: require('./step1.png'),
  position: 'top',
};

// Custom Step
const customStep: OnboardingStep = {
  image: require('./step2.png'),
  position: 'bottom',
  component: ({ onNext, onBack, isLast }) => (
    <View>
      <Text>Custom Content</Text>
      <Button title={isLast ? 'Finish' : 'Next'} onPress={onNext} />
    </View>
  ),
};

You can implement a standard onboarding flow by passing an introPanel object and an array of steps to the Onboarding component. This uses the library's default styles and animations.

import Onboarding from '@blazejkustra/react-native-onboarding';

function MyOnboarding() {
  return (
    <Onboarding
      introPanel={{
        title: 'Welcome to My App',
        subtitle: 'Let\'s get you started',
        button: 'Get Started',
        image: require('./assets/logo.png'),
      }}
      steps={[
        {
          title: 'Step 1',
          description: 'This is the first step of your journey',
          buttonLabel: 'Next',
          image: require('./assets/step1.png'),
          position: 'top',
        },
        {
          title: 'Step 2', 
          description: 'Learn about our amazing features',
          buttonLabel: 'Continue',
          image: require('./assets/step2.png'),
          position: 'bottom',
        },
      ]}
      onComplete={() => {
        // Handle completion (e.g., save to AsyncStorage)
        console.log('Onboarding completed!')
      }}
      onSkip={() => console.log('Onboarding skipped')}
      onStepChange={(step) => console.log('Current step:', step)}
    />
  );
}

The Onboarding component accepts the following props to control the flow, appearance, and behavior of the tutorial.

interface OnboardingProps {
  /** The welcome screen. Can be an object {title, subtitle, button, image} or a custom component receiving onPressStart */
  introPanel: OnboardingIntroPanel;

  /** Array of steps. Each can be a default object or a custom component receiving {onNext, onBack, isLast} */
  steps: OnboardingStep[];

  /** Callback fired when user completes the final step. Required. */
  onComplete: () => void;

  /** Callback fired when user skips onboarding. Optional. */
  onSkip?: () => void;

  /** Callback fired when the active step changes. Receives the current step index. */
  onStepChange?: (stepIndex: number) => void;

  /** Whether to show the close button in the header. Default: true */
  showCloseButton?: boolean;

  /** Whether to show back button on steps (except first step). Default: true */
  showBackButton?: boolean;

  /** Whether to wrap the onboarding in a modal on web. Default: true */
  wrapInModalOnWeb?: boolean;

  /** Animation duration in milliseconds for step transitions. Default: 500 */
  animationDuration?: number;

  /** Custom color configuration for background and text */
  colors?: OnboardingColors;

  /** Custom font configuration. Can be a string (applies to all) or an object specifying fonts for different elements. Default: 'System' */
  fonts?: OnboardingFonts | string;

  /** Custom background element rendered behind content */
  background?: () => ReactNode;

  /** Custom close button renderer receiving onPress */
  skipButton?: ({ onPress: () => void }) => ReactNode;
}

The SpillOnboarding component is the main entry point for implementing an onboarding flow. It manages a sequence of steps, an intro panel, and transitions between them using a 'spill' animation effect.

Key features:

• Intro Panel: Displays initial content before the first step.
• Steps: An array of step objects defining the content of each onboarding screen.
• Navigation: Supports back button (hardware and UI), next button, and skip functionality.
• Platform Adaptation: Automatically wraps in a modal on Web if wrapInModalOnWeb is enabled.
• Customization: Allows for custom intro panels and custom step components via function props.

import SpillOnboarding from './spill-onboarding';

// Example usage structure
<SpillOnboarding
  steps={[
    { title: 'Step 1', description: 'Welcome', image: require('./img.png') },
    { title: 'Step 2', description: 'More info', image: require('./img2.png') }
  ]}
  onComplete={() => console.log('Done!')}
  onSkip={() => console.log('Skipped')}
/>