React Native

Looking for a step-by-step tutorial? Check out the React Native analytics guide.

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

Usage

Track event

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

import { usePathname, useSegments } from 'expo-router';

const op = new Openpanel({ /* ... */ })

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])
  // ...
}

  import { createNavigationContainerRef } from '@react-navigation/native'
  import { Openpanel } from '@openpanel/react-native'

  const op = new Openpanel({ /* ... */ })
  const navigationRef = createNavigationContainerRef()

  export function NavigationRoot() {
    const handleNavigationStateChange = () => {
      const current = navigationRef.getCurrentRoute()
      if (current) {
        op.screenView(current.name, {
          params: current.params,
        })
      }
    }

    return (
      <NavigationContainer
        ref={navigationRef}
        onReady={handleNavigationStateChange}
        onStateChange={handleNavigationStateChange}
      >
        <Stack.Navigator />
      </NavigationContainer>
    )
  }

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