React-Native

Installation

Install dependencies

We're dependent on expo-application for buildNumber, versionNumber (and referrer on android) and expo-constants to get the user-agent.

pnpm install @openpanel/react-native
npx expo install --pnpm expo-application expo-constants

Initialize

On native we use a clientSecret to authenticate the app.

const op = new Openpanel({
  clientId: '{YOUR_CLIENT_ID}',
  clientSecret: '{YOUR_CLIENT_SECRET}',
});

Config

url - The url of the openpanel API or your self-hosted instance
clientId - The client id of your application
clientSecret - The client secret of your application

Ready!

You're now ready to use the library.

// Sends an event with payload foo: bar
op.event('my_event', { foo: 'bar' });
 
// Identify with profile id
op.setProfileId('123');
 
// or with additional data
op.setProfile({
  profileId: '123',
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
});
 
// Increment a property
op.increment('app_opened'); // increment by 1
op.increment('app_opened', 5); // increment by 5
 
// Decrement a property
op.decrement('app_opened'); // decrement by 1
op.decrement('app_opened', 5); // decrement by 5

Usage

Track event

op.event('my_event', { foo: 'bar' });

Navigation / Screen views

import { usePathname, useSegments } from 'expo-router';
 
function RootLayout() {
  // ...
  const pathname = usePathname()
  // Segments is optional but can be nice to have if you
  // want to group routes together
  // pathname = /posts/123
  // segements = ['posts', '[id]']
  const segments = useSegments()
 
  useEffect(() => {
    // Simple
    op.screenView(pathname)
 
    // With extra data
    op.screenView(pathname, {
      // segments is optional but nice to have
      segments: segments.join('/'),
      // other optional data you want to send with the screen view
    })
  }, [pathname,segments])
  // ...
}

Identify

Set Profile Id

Keep track of your users by identifying them with a unique id. This is a good features if you have things behind a login and want to track user behavior.

⚠️

Keep in mind that this is considered personal data. Make sure you have the users consent before calling this!

const profileId = '123';
op.setProfileId(profileId);

Additional data

This method does the same as setProfileId but also allows you to update the profile with additional data.

⚠️

Keep in mind that this is considered personal data. Make sure you have the users consent before calling this!

const profileId = '123';
op.setProfile({
  profileId,
  // firstName?: string;
  // lastName?: string;
  // email?: string;
  // avatar?: string;
  // properties?: Record<string, unknown>;
});

Increment property

Increment a property on the profile.

// Increment by 1
op.increment('app_opened');
 
// Increment by 5
op.increment('app_opened', 5);

Decrement property

Decrement a property on the profile.

// Increment by 1
op.decrement('app_opened');
 
// Increment by 5
op.decrement('app_opened', 5);

Clear / Logout

Clear the profile id and all the data.

op.clear();

React Remix