API Reference

Complete API documentation for all exported components, hooks, and types.

Components

OnboardingProvider

The root provider component that wraps your app and provides onboarding context for data fetching.

import { OnboardingProvider } from "@rocapine/react-native-onboarding";

<OnboardingProvider
  client={client}
  locale="en"
  customAudienceParams={{ onboardingId: "abc-123" }}
>
  <YourApp />
</OnboardingProvider>

Props

Prop	Type	Default	Description
client	OnboardingStudioClient	Required	Client instance for API communication
locale	string	"en"	Locale for fetching steps
customAudienceParams	Record<string, any>	{}	Additional parameters for API

---

ThemeProvider

The theme provider component that wraps your app and provides theme context. Import from the UI SDK.

import { ThemeProvider } from "@rocapine/react-native-onboarding-ui";

<ThemeProvider
  initialColorScheme="light"
  customTheme={{
    colors: { primary: "#FF5733" },
    typography: {
      fontFamily: { title: "Poppins-Bold" }
    }
  }}
>
  <YourApp />
</ThemeProvider>

Props

Prop	Type	Default	Description
initialColorScheme	"light" | "dark"	"light"	Initial color scheme
customTheme	DeepPartial<Theme>	-	Custom theme to override both light and dark mode tokens
customLightTheme	DeepPartial<Theme>	-	Custom theme tokens for light mode only
customDarkTheme	DeepPartial<Theme>	-	Custom theme tokens for dark mode only

---

OnboardingPage

Central routing component that renders the appropriate page based on step type.

<OnboardingPage
  step={step}
  onContinue={handleContinue}
  theme={theme}
  customComponents={customComponents}
/>

Props

Prop	Type	Description
step	OnboardingStepType	Step data to render
onContinue	(args?: any) => void	Callback when user continues
theme	Theme	Optional theme override (defaults to theme from ThemeProvider)
customComponents	CustomComponents	Custom components for the onboarding
isSandbox	boolean	Enable sandbox mode for development

---

ProgressBar

Global progress indicator component. Add once in your app layout, typically inside both providers.

<OnboardingProvider {...props}>
  <ThemeProvider>
    <ProgressBar isProgressBarVisible={isProgressBarVisible} progressPercentage={progressPercentage} />
    <YourApp />
  </ThemeProvider>
</OnboardingProvider>

Props

None. Reads from progress context automatically.

---

Page Renderers

Individual renderer components for each page type.

import {
  QuestionRenderer,
  MediaContentRenderer,
  CarouselRenderer,
  PickerRenderer,
  LoaderRenderer,
  RatingsRenderer,
  CommitmentRenderer,
} from "@rocapine/react-native-onboarding";

Common Props:

Prop	Type	Description
step	StepType	Type-specific step data
onContinue	(args?: any) => void	Callback when user continues

Example:

<MediaContentRenderer
  step={mediaContentStep}
  onContinue={(args) => console.log(args)}
/>

---

Hooks

useOnboardingQuestions

Hook for accessing onboarding steps in your pages.

import { useOnboardingQuestions } from "@rocapine/react-native-onboarding";

const {
  step,
  isLastStep,
  stepsLength,
  onboardingMetadata,
  steps
} = useOnboardingQuestions({
  stepNumber: 1,
});

Parameters

Param	Type	Description
stepNumber	number	The current step number (1-indexed)

Returns

Property	Type	Description
step	OnboardingStepType	Current step data
isLastStep	boolean	True if this is the last step
stepsLength	number	Total number of steps
onboardingMetadata	OnboardingStepMetadata	Metadata from API (id, name, audienceId, etc.)
steps	OnboardingStepType[]	Array of all steps

---

useTheme

Hook for accessing theme tokens and utilities. Import from the UI SDK.

import { useTheme } from "@rocapine/react-native-onboarding-ui";

const { theme, colorScheme, toggleTheme } = useTheme();

Returns

Property	Type	Description
theme	Theme	Current theme tokens (colors + typography)
colorScheme	"light" | "dark"	Current color scheme
toggleTheme	() => void	Function to toggle between light and dark mode

---

useCustomComponents

Hook for accessing custom component overrides.

import { useCustomComponents } from "@rocapine/react-native-onboarding";

const customComponents = useCustomComponents();
const Button = customComponents.QuestionAnswerButton || DefaultButton;

Returns

Property	Type	Description
customComponents	CustomComponents	Custom component overrides

---

Classes

OnboardingStudioClient

Client for communicating with the Rocapine CMS backend.

import { OnboardingStudioClient } from "@rocapine/react-native-onboarding";

const client = new OnboardingStudioClient(projectId, options);

Constructor

new OnboardingStudioClient(
  projectId: string,
  options?: {
    appVersion?: string;
    isSandbox?: boolean;
    platform?: "ios" | "android";
  }
)

Parameters

Param	Type	Default	Description
projectId	string	Required	Your Rocapine project ID
options.appVersion	string	-	Your app version
options.isSandbox	boolean	false	Enable sandbox mode
options.platform	"ios" | "android"	Auto-detected	Platform identifier

Methods

getSteps(params)

Fetches onboarding steps from the CMS.

const { steps, headers } = await client.getSteps({
  locale: "en",
  onboardingId: "abc-123",
});

---

Utilities

getTextStyle

Utility function to get semantic text styles from theme.

import { getTextStyle } from "@rocapine/react-native-onboarding";

const textStyle = getTextStyle(theme, "heading1");

Parameters

Param	Type	Description
theme	Theme	Theme object from useTheme()
styleName	TextStyleName	Name of the semantic style

TextStyleName Options

• heading1 - Large headings (32px, semibold)
• heading2 - Medium headings (24px, semibold)
• heading3 - Small headings (18px, medium)
• body - Body text (16px, regular)
• bodyMedium - Medium body text (16px, medium)
• label - Labels (14px, medium)
• caption - Captions (12px, regular)
• button - Button text (16px, medium)

Returns

{
  fontSize: number;
  fontWeight: string;
  lineHeight: number;
  fontFamily?: string;
}

---

Types

OnboardingStepType

Union type of all step types:

type OnboardingStepType =
  | QuestionStepType
  | MediaContentStepType
  | CarouselStepType
  | PickerStepType
  | LoaderStepType
  | RatingsStepType
  | CommitmentStepType;

---

OnboardingStepMetadata

Metadata returned from the API containing information about the onboarding flow:

interface OnboardingStepMetadata {
  id: string;
  name?: string;
  audienceId?: string;
  audienceName?: string;
  audienceOrder?: number;
  locale?: string;
  draft?: boolean;
}

Property	Type	Description
id	string	Unique onboarding ID
name	string?	Display name of the onboarding
audienceId	string?	Targeted audience ID
audienceName	string?	Targeted audience name
audienceOrder	number?	Audience priority order
locale	string?	Locale of the onboarding
draft	boolean?	Whether this is a draft version

---

ThemeTokens

Partial theme override type:

interface ThemeTokens {
  colors?: {
    primary?: string;
    secondary?: string;
    disable?: string;
    tertiary?: {
      tertiary1?: string;
      tertiary2?: string;
      tertiary3?: string;
    };
    neutral?: {
      highest?: string;
      higher?: string;
      high?: string;
      medium?: string;
      low?: string;
      lower?: string;
      lowest?: string;
    };
    surface?: {
      lowest?: string;
      lower?: string;
      low?: string;
      medium?: string;
      high?: string;
      higher?: string;
      highest?: string;
      opposite?: string;
    };
    text?: {
      primary?: string;
      secondary?: string;
      tertiary?: string;
      opposite?: string;
      disable?: string;
    };
  };
  typography?: {
    fontFamily?: {
      title?: string;
      text?: string;
      tagline?: string;
    };
    fontSize?: {
      xs?: number;
      sm?: number;
      md?: number;
      lg?: number;
      xl?: number;
      "2xl"?: number;
      "3xl"?: number;
      "4xl"?: number;
    };
    fontWeight?: {
      regular?: string;
      medium?: string;
      semibold?: string;
      bold?: string;
      extrabold?: string;
    };
    lineHeight?: {
      tight?: number;
      normal?: number;
      relaxed?: number;
    };
    textStyles?: {
      heading1?: TextStyle;
      heading2?: TextStyle;
      heading3?: TextStyle;
      body?: TextStyle;
      bodyMedium?: TextStyle;
      label?: TextStyle;
      caption?: TextStyle;
      button?: TextStyle;
    };
  };
}

---

CustomComponents

Custom component overrides interface:

interface CustomComponents {
  QuestionAnswerButton?: React.ComponentType<QuestionAnswerButtonProps>;
  QuestionAnswersList?: React.ComponentType<QuestionAnswersListProps>;
}

---

Component Props Interfaces

QuestionAnswerButtonProps

interface QuestionAnswerButtonProps {
  answer: { label: string; value: string };
  selected: boolean;
  onPress: () => void;
  theme: Theme;
  index: number;
  isFirst: boolean;
  isLast: boolean;
}

QuestionAnswersListProps

interface QuestionAnswersListProps {
  answers: Array<{ label: string; value: string }>;
  selected: Record<string, boolean>;
  onAnswerPress: (value: string) => void;
  multipleAnswer: boolean;
  theme: Theme;
}

---

Default Exports

Export default components for composition:

import {
  DefaultQuestionAnswerButton,
  DefaultQuestionAnswersList,
} from "@rocapine/react-native-onboarding";

These allow you to wrap or extend the default implementations while maintaining the base styling.

---

Type Guards

isQuestionStep

import { isQuestionStep } from "@rocapine/react-native-onboarding";

if (isQuestionStep(step)) {
  // TypeScript knows this is QuestionStepType
  console.log(step.payload.answers);
}

Similar type guards exist for all step types.

---

Next Steps

• 🎨 Learn about Theming
• 🔧 Explore Custom Components
• 🎭 Review Page Types