Skip to main content
Userpilot ReactNative SDK enables you to capture user insights and deliver personalized in-app experiences in real time. With just a one-time setup, you can immediately begin leveraging Userpilot’s analytics and engagement features to understand user behaviors and guide their journeys in-app. This document provides a step-by-step walkthrough of the installation Userpilot device mode support to your applications via this plugin for Analytics-ReactNative.

​
Installation

You need to install the @userpilot/segment-react-native and the @userpilot/react-native dependency. Userpilot segment react native latest version Check Userpilot ReactNative SDK for more details. 
npm install --save @userpilot/segment-react-native @userpilot/react-native
Run pod install after the installation to autolink the Userpilot SDK.

​
Initialization

In your code where you initialize the analytics client call the .add(plugin) method with an UserpilotPlugin instance: 
import { createClient } from '@segment/analytics-react-native';
import { Userpilotlugin } from '@userpilot/segment-react-native';

const segmentClient = createClient({
  writeKey: 'SEGMENT_KEY'
});

segmentClient.add({ plugin: new UserpilotPlugin() });

​
Configurations (Optional)

ParameterTypeDescription
loggingBooleanEnable or Disable logs for SDK

Default: false
disableRequestPushNotificationsPermissionBooleanDisable request push notifications permission by SDK.

Default: false
useInAppBrowserBooleanconfiguration to indicate when to open the URL inside CustomTabsIntent or not.

Default: false
Your events will now begin to flow to Userpilot in device mode.

​
Userpilot SDK callbacks

To gain full control and utilize the full capabilities of the Userpilot SDK in a React Native environment, you can start listening to Userpilot events using the startListeningToUserpilotEvents function from @userpilot/segment-react-native. For example, to handle deep links and other SDK-triggered events, you can implement the appropriate event callbacks like this: 
import {
  startListeningToUserpilotEvents,
  stopListeningToUserpilotEvents,
} from '@userpilot/segment-react-native';

useEffect(() => {
  startListeningToUserpilotEvents({
    onAnalyticsEvent: (event) => {
      console.log('Analytics Event:', event);
    },
    onExperienceEvent: (event) => {
      console.log('Experience Event:', event);
    },
    onNavigationEvent: (event) => {
      console.log('Navigation Event', event);
      if (event?.url) {
        handleDeepLink(event.url);
      }
    },
  });

  return () => stopListeningToUserpilotEvents();
}, [handleDeepLink]);