onboardkit-rn

Analytics and onboarding SDK for React Native apps.

Installation

npm install onboardkit-rn @react-native-async-storage/async-storage

Setup

Wrap your app with OnboardKitProvider:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { OnboardKitProvider } from '@onboardkit/react-native';

export default function App() {
  return (
    <OnboardKitProvider
      apiKey="ob_live_your_key_here"
      asyncStorage={AsyncStorage}
      options={{
        debug: true,           // logs events in development
        autoTrackScreens: true,
        appVersion: '1.0.0',
      }}
    >
      <YourApp />
    </OnboardKitProvider>
  );
}

Track Events

import { useTrack } from '@onboardkit/react-native';

function SignupScreen() {
  const track = useTrack();

  const handleSignup = () => {
    track('signup', {
      method: 'email',
      plan: 'free',
    });
  };

  return <Button onPress={handleSignup} title="Sign up" />;
}

Identify Users

Call identify after login so you can see named users in your dashboard.

import { useOnboardKit } from '@onboardkit/react-native';

function LoginScreen() {
  const { identify } = useOnboardKit();

  const handleLogin = async (user) => {
    await identify(user.id, {
      name: user.name,
      email: user.email,
      plan: user.plan,
      created_at: user.createdAt,
    });
  };
}

Track Screens

Option 1 — Hook (per screen)

import { useTrackScreen } from '@onboardkit/react-native';

function HomeScreen() {
  useTrackScreen('Home');  // fires screen_view on mount
  return <View>...</View>;
}

Option 2 — React Navigation integration

import { useOnboardKit } from '@onboardkit/react-native';
import { NavigationContainer } from '@react-navigation/native';

function App() {
  const { screen } = useOnboardKit();

  return (
    <NavigationContainer
      onStateChange={(state) => {
        const current = state?.routes[state.index];
        if (current) screen(current.name);
      }}
    >
      <Stack.Navigator>...</Stack.Navigator>
    </NavigationContainer>
  );
}

Reset (on logout)

const { reset } = useOnboardKit();

const handleLogout = async () => {
  await reset(); // clears userId, generates new anonymousId
};

All options

<OnboardKitProvider
  apiKey="ob_live_..."
  asyncStorage={AsyncStorage}
  options={{
    host: 'https://your-dashboard.vercel.app', // your deployed dashboard URL
    debug: false,
    flushInterval: 5000,   // ms between queue flushes
    maxQueueSize: 100,     // max offline events stored
    appVersion: '1.0.0',
    context: {             // sent with every event
      environment: 'production',
    },
  }}
>

API Reference

| Method | Description | |--------|-------------| | track(event, props?) | Track any event | | identify(userId, traits?) | Set user identity | | screen(name, props?) | Track screen view | | reset() | Clear user identity (on logout) | | flush() | Force-send queued events | | useTrack() | Hook returning track function | | useTrackScreen(name) | Auto-track screen on mount | | useOnboardKit() | Access full SDK context |