React Native / Expo

Add DataSaaS analytics to your React Native or Expo app. Track screen views, custom events, and user behavior across iOS and Android.

Installation

Install the DataSaaS package along with its required peer dependencies:

npm install datasaas @react-native-async-storage/async-storage @react-native-community/netinfo expo-device

Or with Expo:

npx expo install datasaas @react-native-async-storage/async-storage @react-native-community/netinfo expo-device

Info

Why the extra packages? @react-native-async-storage/async-storage persists visitor and session IDs across app restarts. @react-native-community/netinfo detects online/offline status so events can be queued when offline and sent when connectivity returns. expo-device provides device information (model, OS version) for richer analytics.

Environment Variables

Add your DataSaaS credentials to your environment. For Expo projects, use the EXPO_PUBLIC_ prefix:

# .env
EXPO_PUBLIC_DATASAAS_WEBSITE_ID=ds_YOUR_WEBSITE_ID
EXPO_PUBLIC_DATASAAS_DOMAIN=yourdomain.com

Provider Setup

Wrap your app with DataSaaSProvider in your root layout or App component:

// app/_layout.tsx (Expo Router) or App.tsx
import { DataSaaSProvider } from 'datasaas/react-native';

export default function RootLayout() {
  return (
    <DataSaaSProvider config={{
      websiteId: process.env.EXPO_PUBLIC_DATASAAS_WEBSITE_ID!,
      domain: process.env.EXPO_PUBLIC_DATASAAS_DOMAIN!,
      debug: __DEV__,
    }}>
      {/* your navigation here */}
    </DataSaaSProvider>
  );
}

Screen Tracking

Use the useDataSaaSScreen hook to automatically track when a screen comes into view:

import { useDataSaaSScreen, useDataSaaSTrack } from 'datasaas/react-native';
import { Pressable, Text, View } from 'react-native';

export default function HomeScreen() {
  // Tracks a screen view when the component mounts
  useDataSaaSScreen('HomeScreen');

  // Get the track function for custom events
  const track = useDataSaaSTrack();

  return (
    <View>
      <Pressable onPress={() => track('cta_click', { source: 'home' })}>
        <Text>Track Event</Text>
      </Pressable>
    </View>
  );
}

Custom Event Tracking

Track any user interaction with the useDataSaaSTrack hook:

import { useDataSaaSTrack } from 'datasaas/react-native';

export function PurchaseButton({ productId, price }: {
  productId: string;
  price: number;
}) {
  const track = useDataSaaSTrack();

  const handlePurchase = () => {
    // Your purchase logic here...

    track('purchase', {
      product_id: productId,
      value: price,
      currency: 'USD',
    });
  };

  return (
    <Pressable onPress={handlePurchase}>
      <Text>Buy Now</Text>
    </Pressable>
  );
}

User Identification

Associate a visitor with a user ID after login to track users across sessions and devices:

import { useDataSaaS } from 'datasaas/react-native';

export function useAuth() {
  const ds = useDataSaaS();

  const onLogin = (user: { id: string; email: string }) => {
    // Link the anonymous visitor to the authenticated user
    ds.identify({
      user_id: user.id,
      email: user.email,
    });
  };

  const onLogout = () => {
    // Reset visitor identity on logout
    ds.reset();
  };

  return { onLogin, onLogout };
}

Offline Support

The React Native SDK automatically handles offline scenarios. When the device loses connectivity, events are queued locally using AsyncStorage. Once the device comes back online, queued events are flushed automatically. No additional configuration is needed.

Tip

Enable debug: __DEV__ in the provider config to see detailed logs during development, including queued events, network status changes, and flush operations.

Replit

Overview