Source: https://datafa.st/docs/react-native
Markdown source: https://datafa.st/docs/react-native.md
Description: Install and use the DataFast React Native SDK with a provider and hooks, including an Expo example.

# React Native / Expo

Add DataFast analytics to your React Native or Expo app using the dedicated `datafast/react-native` entrypoint from the [DataFast npm package](https://www.npmjs.com/package/datafast).

## 1. Install the SDK

Install the SDK and required peer dependencies:

```bash
npm install datafast @react-native-async-storage/async-storage @react-native-community/netinfo expo-constants expo-device
```

## 2. Configure environment variables

In your Expo app, set these environment variables (for example in `.env` + your Expo config):

- `EXPO_PUBLIC_DATAFAST_WEBSITE_ID` — your DataFast website ID (e.g. `dfid_******`)
- `EXPO_PUBLIC_DATAFAST_DOMAIN` — **must match the domain configured in your DataFast website settings** (for mobile apps you can use something like `yourapp.com`)

## 3. Wrap your app with `DataFastProvider`

Wrap your navigation tree with the provider:

```tsx
import { DataFastProvider } from 'datafast/react-native';

export default function RootLayout() {
  return (
    <DataFastProvider
      config={{
        websiteId: process.env.EXPO_PUBLIC_DATAFAST_WEBSITE_ID!,
        // Must match the domain configured in your DataFast website settings
        domain: process.env.EXPO_PUBLIC_DATAFAST_DOMAIN!,
        debug: __DEV__,
      }}>
      {/* your navigation / screens here */}
    </DataFastProvider>
  );
}
```

## 4. Track screens and events

### Track screens with a hook

```tsx
import { useDataFastScreen } from 'datafast/react-native';

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

### Track custom events

```tsx
import { Pressable, Text } from 'react-native';
import { useDataFastTrack } from 'datafast/react-native';

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

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

### Identify users

```tsx
import { useDataFast } from 'datafast/react-native';

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

## 5. Why extra packages?

The `datafast/react-native` entrypoint uses:

- **AsyncStorage** for persistent storage
- **NetInfo** for network status
- **Expo Constants / Device** (when available) for app + device info

That's why those additional React Native / Expo packages are required alongside `datafast`.