Expo Analytics Setup: Track User Onboarding Without a Data Team

Why Expo apps need onboarding analytics

Expo's fast development cycle means teams ship features quickly. The problem: you can't tell whether a new onboarding screen helped or hurt without step-level funnel data.

Most analytics tools require you to:

• Instrument every event across every screen
• Build funnels manually in a dashboard
• Wire up a data pipeline for reliable delivery

OnRamp's Expo SDK is designed to avoid all three. You call OnRamp.step() at each milestone, and funnels, retention, and session timelines populate automatically.

Compatibility

• Expo SDK 49+ (managed and bare workflow)
• React Native 0.72+
• Works with Expo Go for development
• AsyncStorage is the only native dependency (included in Expo)

Install

npx expo install @onramp-sdk/react-native

Using npx expo install instead of npm install ensures the package version is compatible with your current Expo SDK version.

Initialise in your root component

// App.tsx or _layout.tsx
import { useEffect } from 'react'
import { OnRamp } from '@onramp-sdk/react-native'

export default function RootLayout() {
  useEffect(() => {
    OnRamp.init({
      apiKey: process.env.EXPO_PUBLIC_ONRAMP_API_KEY ?? '',
    })
  }, [])

  return <Slot />
}

Track onboarding steps

import { OnRamp } from '@onramp-sdk/react-native'

export function WelcomeScreen() {
  async function handleGetStarted() {
    // 1. Do the thing
    await markOnboardingStarted()

    // 2. Track it
    OnRamp.step('onboarding_started')

    // 3. Navigate
    router.push('/signup')
  }

  return <Button title="Get started" onPress={handleGetStarted} />
}

Suggested step sequence

onboarding_started
account_created
email_verified
profile_completed
first_action_taken
onboarding_completed

Keep step names lowercase with underscores. The funnel uses exact string matching.

Expo Router specific: tracking navigation events

If you're using Expo Router (file-based routing), you can track page transitions automatically by adding a listener in your root layout:

// app/_layout.tsx
import { usePathname } from 'expo-router'
import { useEffect } from 'react'
import { OnRamp } from '@onramp-sdk/react-native'

const ONBOARDING_PATHS: Record<string, string> = {
  '/onboarding/signup': 'signup_screen_viewed',
  '/onboarding/profile': 'profile_screen_viewed',
  '/onboarding/permissions': 'permissions_screen_viewed',
}

export default function RootLayout() {
  const pathname = usePathname()

  useEffect(() => {
    const stepName = ONBOARDING_PATHS[pathname]
    if (stepName) {
      OnRamp.step(stepName)
    }
  }, [pathname])

  return <Slot />
}

Managed workflow considerations

In the managed workflow, you can't add native modules unless they're Expo-compatible. The OnRamp SDK uses only @react-native-async-storage/async-storage, which is bundled with Expo - no config plugin required.

If you later eject to bare workflow, no SDK changes are needed.

Testing your setup in Expo Go

Events appear in the OnRamp dashboard within a few seconds of firing. To verify:

Build the funnel

Once events are arriving, open Funnel → New funnel in the dashboard. Add your steps in order. The funnel retroactively pulls in any events that already arrived, so you'll immediately see data from your test runs.