React Native SDK

Use this guide when your app is built with React Native 0.69+.

For session flow and event schemas, see the REST API. For a guided first integration, see Quickstart.

Installation

Device fields (userAgent, locale, timezone) are read from platform libraries. Install the set that matches your environment — the SDK auto-detects which one is available at runtime.

Expo (Expo Go or development build)

npx expo install @trichidata/react-native expo-constants expo-device expo-localization

Works in Expo Go — the Expo modules ship inside the Expo Go runtime.

Bare React Native

npm install @trichidata/react-native react-native-device-info react-native-localize

Requires react >= 18 and react-native >= 0.69 as peer dependencies. The platform libraries above are optional peer dependencies: install the Expo set for Expo projects, or the bare set otherwise. If neither is installed, the SDK falls back to Platform + Intl.

Setup

Provider

Wrap your application tree with TrichiDataProvider:

import { TrichiDataProvider } from '@trichidata/react-native';

function App() {
  return (
    <TrichiDataProvider apiKey="prj_ak_xxxxxxxxxxxx">
      <RootNavigator />
    </TrichiDataProvider>
  );
}

Props

When autoInit is true, the provider calls init_sdk with device info on mount. Device fields are resolved automatically depending on the environment (see Device info sources). The session ID from the response is stored and sent on subsequent requests.

Hook

Use useTrichiData() to access the client anywhere inside the provider:

import { useTrichiData } from '@trichidata/react-native';

function CheckoutButton() {
  const client = useTrichiData();

  const handlePress = async () => {
    await client.checkoutStarted({
      total: 99.9,
      currency: 'USD',
      items: [{ productId: 'p1', name: 'Widget', price: 99.9, quantity: 1 }],
    });
  };

  return <Button title="Checkout" onPress={handlePress} />;
}

useTrichiData() returns a TrichiDataClient instance. It throws if used outside TrichiDataProvider.

Manual initialization

Set autoInit={false} when you need to control when init() runs:

<TrichiDataProvider apiKey="prj_ak_xxx" autoInit={false}>
  <App />
</TrichiDataProvider>

import { useTrichiData } from '@trichidata/react-native';

function App() {
  const client = useTrichiData();

  useEffect(() => {
    void client.init();
  }, [client]);

  return <RootNavigator />;
}

Screen tracking

Automatic screen tracking is not included in this version. Track screens manually:

await client.page({ title: 'Checkout' });

Call this from your screen component (e.g. in useEffect on mount) or from a navigation listener you control.

Pass appVersion in identify() from your app config (e.g. Expo expo-application, or your own build metadata).

Device info sources

On init(), the SDK detects the environment and reads device fields from the matching stack. Expo projects use Expo modules only; bare projects use the community libraries.

Detection is based on the presence of expo-constants. If the preferred stack is missing or throws, the SDK falls back to Platform + Intl, so init() never crashes.

React Native exports

Client methods

See REST API for reserved eventName values and properties schemas.

See also

• Quickstart — track your first event
• REST API — event types and property constraints
• React SDK — if you use React on the web