SnooprProvider

Configuration reference for the SnooprProvider component.

Overview

SnooprProvider is the root component that initializes the Snoopr SDK. Wrap your app with it to enable all Snoopr functionality.

import { SnooprProvider } from 'react-native-snoopr'

export default function App() {
  return (
    <SnooprProvider
      appId="app-xxx"
      apiKey="sk_live_xxx"
    >
      <YourApp />
    </SnooprProvider>
  )
}

Required Props

PropTypeDescription
appIdstringYour App ID from the Snoopr dashboard
apiKeystringYour API Key from the Snoopr dashboard

Optional Props

Story Configuration

PropTypeDefaultDescription
storyVersionstring"v1"Which story version to display (e.g., "v1", "v2")

Analytics & Development

PropTypeDefaultDescription
enableAnalyticsbooleantrueEnable event tracking
analyticsDebugbooleanfalseLog analytics events to console
devModebooleanfalseSend integration test ping on startup

Theme & Appearance

PropTypeDefaultDescription
colorScheme'light' | 'dark' | 'system''system'Force light/dark mode or follow device
loadFontsbooleantrueAuto-load Snoopr fonts
fontFamilyPrefixstring'Snoopr-'Prefix for loaded font names

Callbacks

PropTypeDescription
onFinish(responses: CarouselResponses) => voidCalled when any Story completes
onFontsLoaded(result: FontLoadResult) => voidCalled when fonts finish loading
onColorSchemeChange(mode: 'light' | 'dark') => voidCalled when active color scheme changes

Callbacks

onFinish

Global callback for all Story completions. Use this for centralized data handling:

<SnooprProvider
  appId="app-xxx"
  apiKey="sk_live_xxx"
  onFinish={(responses) => {
    // Handle all Story completions in one place
    const interests = responses.selections['user_interests']
    const notifications = responses.toggles['notifications_enabled']

    saveToBackend({ interests, notifications })
  }}
>

This callback fires in addition to any onFinish passed to Snoopr.showStory().

onFontsLoaded

Called after Snoopr fonts load (or fail):

<SnooprProvider
  appId="app-xxx"
  apiKey="sk_live_xxx"
  onFontsLoaded={(result) => {
    if (result.success) {
      console.log('Loaded fonts:', result.loaded)
    } else {
      console.error('Font loading failed:', result.error)
    }
  }}
>

Color Scheme

Control how Stories appear in light/dark mode. See Brand Themes for configuring themes in the dashboard.

// Always use light mode
<SnooprProvider colorScheme="light" ...>

// Always use dark mode
<SnooprProvider colorScheme="dark" ...>

// Follow device setting (default)
<SnooprProvider colorScheme="system" ...>

The colorScheme prop only affects Stories that support both modes. Stories configured for a single mode in the dashboard always display in that mode.

Story Versions

Use storyVersion to show different Stories to different user segments:

// Show onboarding v2 to new users
<SnooprProvider
  appId="app-xxx"
  apiKey="sk_live_xxx"
  storyVersion="v2"
>

Story versions are configured in the Snoopr dashboard when publishing.

Development Mode

Enable devMode during development to verify your integration:

<SnooprProvider
  appId="app-xxx"
  apiKey="sk_live_xxx"
  devMode={__DEV__}  // Only in development
>

This sends a test request to confirm your credentials are valid. Disable in production.

Fonts

Snoopr bundles fonts used in your Stories. By default, fonts load automatically.

Disable Auto-Loading

If you manage fonts yourself:

<SnooprProvider
  appId="app-xxx"
  apiKey="sk_live_xxx"
  loadFonts={false}
>

Available Fonts

  • Inter (Regular, Medium, SemiBold, Bold)
  • Roboto (Regular, Medium, Bold)
  • Open Sans (Regular, Medium, SemiBold, Bold)
  • Montserrat (Regular, Medium, SemiBold, Bold)
  • Poppins (Regular, Medium, SemiBold, Bold)
  • Lato (Regular, Bold)
  • Playfair Display (Regular, Medium, SemiBold, Bold)
  • Merriweather (Regular, Bold)
  • Source Code Pro (Regular, Medium, SemiBold, Bold)