📖 How to Use — Drop the onboarding element onto your Bubble React Native page.
🗂️ Step 1: Provide Onboarding Data

Pass a list of texts, where each text is a valid JSON string representing a screen in the onboarding flow.

Example:

{
   "titleText": "Welcome to the App!",
   "titleStyle": {
       "font_size": 24,
       "font_color": "#1f2937",
       "bold": true
   },
   "bodyText": "Swipe through to learn more.",
   "bodyStyle": {
       "font_size": 16,
       "font_color": "#4b5563"
   },
   "buttonText": "Next",
   "showButton": true,
   "imageUrl": "https://placekitten.com/300/300"
}

Each JSON item should be a single entry in the list. You can add as many onboarding screens as you like using this format.

🎨 Step 2: Customize Appearance (Optional)

Use the following custom props to style the experience:
• backgroundColor — background color of each screen
• paddingTop, paddingBottom, paddingLeft, paddingRight — spacing inside the screen
• buttonBgColor — background color of the CTA button
• buttonFontColor — color of the button text
• buttonTextStyle — styling for the button label (font_size, bold, italic, etc.)

📡 States & Events

This plugin publishes one state: current_page_index (which screen is visible).
It also triggers these events:
• onLoad — when the component first loads
• onPageChange — when the screen changes via swipe or tap
• onGetStarted — when the final button is pressed

⚡ Step 3: Trigger Actions Programmatically

You can call plugin actions using workflows:

• goToPage(index) — jump to a specific screen
• finishOnboarding() — manually trigger the completion event

That’s it! You now have a clean, mobile-native onboarding flow fully integrated with Bubble.

Editor: https://bubble.io/page?id=ncv-react-plugins&test_plugin=1744788137008x470093904581492740_current&tab=Design&name=onboarding_pack_1&type=page

Demo: https://ncv-react-plugins.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=onboarding_packs