React Native / Expo

Integrate Flowsery Analytics into your React Native or Expo app using the dedicated flowsery/react-native entrypoint from the Flowsery Analytics npm package.

1. Install the SDK

Install the package along with its required peer dependencies:

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

2. Set environment variables

In your Expo project, define these environment variables (for example in .env plus your Expo config):

• EXPO_PUBLIC_FLOWSERY_WEBSITE_ID -- your Flowsery Analytics website ID (e.g. flid_******)
• EXPO_PUBLIC_FLOWSERY_DOMAIN -- must match the domain configured in your Flowsery Analytics website settings (for mobile apps you can use something like yourapp.com)

3. Wrap your app with FlowseryProvider

Wrap your navigation tree with the provider component:

import { FlowseryProvider } from 'flowsery/react-native';

export default function RootLayout() {
  return (
    <FlowseryProvider
      config={{
        websiteId: process.env.EXPO_PUBLIC_FLOWSERY_WEBSITE_ID!,
        // Must match the domain configured in your Flowsery Analytics website settings
        domain: process.env.EXPO_PUBLIC_FLOWSERY_DOMAIN!,
        debug: __DEV__,
      }}>
      {/* your navigation / screens here */}
    </FlowseryProvider>
  );
}

4. Track screens and events

Track screens with a hook

import { useFlowseryScreen } from 'flowsery/react-native';

export default function HomeScreen() {
  useFlowseryScreen('HomeScreen');
  return <YourScreenUI />;
}

Track custom events

import { Pressable, Text } from 'react-native';
import { useFlowseryTrack } from 'flowsery/react-native';

export function CTAButton() {
  const track = useFlowseryTrack();

  return (
    <Pressable onPress={() => track('cta_click', { source: 'home_screen' })}>
      <Text>Tap to send a test event</Text>
    </Pressable>
  );
}

Identify users

import { useFlowsery } from 'flowsery/react-native';

export async function onLoginSuccess(user) {
  const client = useFlowsery();
  await client?.identify(user.id, {
    email: user.email,
    name: user.name,
  });
}

5. Why the extra packages?

The flowsery/react-native entrypoint relies on:

• AsyncStorage for persistent storage
• NetInfo for detecting network status
• Expo Constants / Device (when available) for app and device metadata

That is why those additional React Native / Expo packages must be installed alongside flowsery.