Quickstart

Get the Snoopr SDK installed and displaying Stories in your React Native app.

Prerequisites

  • React Native 0.70+ (Expo or bare workflow)
  • A Snoopr account with an app created
  • Your App ID and API Key from the Snoopr dashboard

Installation

Install the SDK and its peer dependency:

npm install react-native-snoopr @react-native-async-storage/async-storage

For Expo projects, also install the font loader:

npx expo install expo-font

iOS Setup (Bare Workflow)

cd ios && pod install

Android Setup

No additional setup required.

Basic Integration

Step 1: Wrap Your App

Add SnooprProvider at the root of your app:

// App.tsx
import { SnooprProvider } from 'react-native-snoopr'

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

Step 2: Show Your Story

Call Snoopr.showStory() at the point where you want the onboarding to appear:

// screens/HomeScreen.tsx
import { useEffect } from 'react'
import { Snoopr } from 'react-native-snoopr'

export function HomeScreen() {
  useEffect(() => {
    Snoopr.showStory()
  }, [])

  return <YourContent />
}

Step 3: Handle Responses (Optional)

Capture user selections from your Story:

Snoopr.showStory({
  onFinish: (response) => {
    // response.selections contains data from select lists, card selects, etc.
    // response.toggles contains data from toggle elements
    console.log('User selections:', response.selections)
    saveUserPreferences(response.selections)
  },
  onDismiss: () => {
    console.log('User dismissed the story')
  }
})

Verify Integration

Enable dev mode to confirm the SDK is connected:

<SnooprProvider
  appId="app-xxx"
  apiKey="sk_live_xxx"
  devMode={true}  // Sends test ping to verify setup
>

Check your console for:

[Snoopr] Integration test successful!

Disable devMode in production to avoid unnecessary network calls.

Next Steps