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.

npm install @openpanel/react-native
npx expo install 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}',
});

Options

Common options

apiUrl - 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 (only required for server-side events)
filter - A function that will be called before sending an event. If it returns false, the event will not be sent
disabled - If true, the library will not send any events
waitForProfile - If true, the library will wait for the profile to be set before sending events

Usage

Track event

op.track('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])
  // ...
}

For more information on how to use the SDK, check out the Javascript SDK.

React Remix