Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt

Use this file to discover all available pages before exploring further.

​
@amisi/onboarding

@amisi/onboarding manages onboarding progress with persistent storage and React context.

​
Setup

Wrap your app once with OnboardingProvider. 
import { OnboardingProvider } from '@amisi/onboarding';

const onboardingConfig = {
  steps: [
    { id: 'welcome', title: 'Welcome' },
    { id: 'profile', title: 'Create Profile' },
    { id: 'done', title: 'Finish' },
  ],
};

export function AppRoot() {
  return (
    <OnboardingProvider config={onboardingConfig}>
      <YourApp />
    </OnboardingProvider>
  );
}

​
useOnboarding

import { useOnboarding } from '@amisi/onboarding';

export function OnboardingScreen() {
  const {
    loading,
    state,
    currentStep,
    totalSteps,
    nextStep,
    previousStep,
    completeStep,
    completeOnboarding,
    resetOnboarding,
  } = useOnboarding();

  if (loading) return null;

  const step = state.steps[currentStep];

  return null;
}

​
Helpers

​
Completion

import { useIsOnboardingComplete } from '@amisi/onboarding';

const isComplete = useIsOnboardingComplete();

​
Progress

import { useOnboardingProgress } from '@amisi/onboarding';

const { current, total, percentage } = useOnboardingProgress();

​
Route guarding

Use with @amisi/navigation. 
import { OnboardingGate } from '@amisi/navigation';
import { useIsOnboardingComplete } from '@amisi/onboarding';

export function AppLayout() {
  const hasCompletedOnboarding = useIsOnboardingComplete();

  return (
    <OnboardingGate
      hasCompletedOnboarding={hasCompletedOnboarding}
      redirectTo="/onboarding"
    >
      <YourApp />
    </OnboardingGate>
  );
}