Skip to main content

Quick Start

Get up and running with Raven Client in 5 minutes!

Note: Make sure you've completed the Installation guide first.

Step 1: Set Up Navigation​

The SDK requires React Navigation. Set up your navigation container:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  Nudge,
  setNavigationRef,
  useNavigationTracker,
  type NudgeClientOptions,
} from '@dreamhorizonorg/raven-client';

const Stack = createNativeStackNavigator();

function App() {
  const navigationRef = useRef<NavigationContainerRef>(null);
  
  // Connect navigation tracker for tooltip system
  useNavigationTracker(navigationRef);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <NavigationContainer
          ref={(ref) => {
            navigationRef.current = ref;
            setNavigationRef(ref);
          }}
        >
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            
            {/* Required: Add Nudge screen for bottom sheets */}
            <Stack.Screen
              name="Nudge"
              component={Nudge}
              options={{
                headerShown: false,
                presentation: 'transparentModal',
                animation: 'fade',
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

Step 2: Initialize the SDK​

Initialize the SDK in your root component:

import { useEffect } from 'react';
import { nudgeClient, fetchCTA, type NudgeClientOptions } from '@dreamhorizonorg/raven-client';
import { Platform } from 'react-native';

function App() {
  useEffect(() => {
    // Initialize the SDK
    nudgeClient.init({
      listeners: {
        appEvent: (eventName, props) => {
          // Handle analytics events
          console.log('Analytics event:', eventName, props);
        },
        fetchCtaApi: async (url, method, variables) => {
          // This callback is typically not used
          throw new Error('Use makeCtaApiCall directly');
        },
        getAccessToken: () => ({
          token: 'your-access-token',
          tokenType: 'Bearer',
        }),
      },
      config: {
        baseUrl: 'https://your-api-base-url.com',
        userId: 'user-123',
        appVersion: '1.0.0',
        platform: Platform.OS, // 'ios' or 'android'
        nudgeRouteName: 'Nudge',
        packageName: 'com.yourcompany.yourapp',
      },
    } as NudgeClientOptions);

    // Fetch Engagement after initialization
    fetchCTA().catch(console.error);
  }, []);

  // ... rest of your app
}

Step 3: Process Events​

Process app events to trigger Engagement:

import { processEventForCTAs } from '@dreamhorizonorg/raven-client';

// When a user logs in
processEventForCTAs({
  eventName: 'USER_LOGIN',
  routeName: 'Home',
  is_from_rn: true,
  actionDone: false,
  userId: '123',
});

Step 4: Send Analytics Events (Optional)​

Send analytics events to track user behavior:

import { sendNudgeAppEvent } from '@dreamhorizonorg/raven-client';

sendNudgeAppEvent('BUTTON_CLICKED', {
  buttonId: 'signup-button',
  timestamp: Date.now(),
});

Complete Example​

Here's a complete example combining all the steps:

import React, { useEffect, useRef } from 'react';
import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Platform } from 'react-native';
import {
  Nudge,
  setNavigationRef,
  nudgeClient,
  useNavigationTracker,
  fetchCTA,
  processEventForCTAs,
  type NudgeClientOptions,
} from '@dreamhorizonorg/raven-client';

const Stack = createNativeStackNavigator();

function HomeScreen() {
  const handleLogin = () => {
    // Process event to trigger CTAs
    processEventForCTAs({
      eventName: 'USER_LOGIN',
      routeName: 'Home',
      is_from_rn: true,
      actionDone: false,
    });
  };

  return (
    // Your screen content
    <Button onPress={handleLogin} title="Login" />
  );
}

export default function App() {
  const navigationRef = useRef<NavigationContainerRef>(null);

  useNavigationTracker(navigationRef);

  useEffect(() => {
    nudgeClient.init({
      listeners: {
        appEvent: (eventName, props) => {
          console.log('Analytics:', eventName, props);
        },
        fetchCtaApi: async () => {
          throw new Error('Not used');
        },
        getAccessToken: () => ({
          token: 'your-token',
          tokenType: 'Bearer',
        }),
      },
      config: {
        baseUrl: 'https://api.example.com',
        userId: 'user-123',
        appVersion: '1.0.0',
        platform: Platform.OS,
        nudgeRouteName: 'Nudge',
        packageName: 'com.example.app',
      },
    } as NudgeClientOptions);

    fetchCTA().catch(console.error);
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <NavigationContainer
          ref={(ref) => {
            navigationRef.current = ref;
            setNavigationRef(ref);
          }}
        >
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen
              name="Nudge"
              component={Nudge}
              options={{
                headerShown: false,
                presentation: 'transparentModal',
                animation: 'fade',
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

What's Next?​