Upgrade to React Native 2.0


If you’re using analytics-react-native 1.5.1 or older, follow these steps to upgrade to analytics-react-native 2.0. You can continue to use your React Native source write key for the upgrade to view historical events. Additionally, with React Native 2.0, you don’t need to leverage bundled SDK packages, but can use this list of supported destinations.

Analytics React Native 2.0 implements a new storage framework, @segment/sovran-react-native, which makes it impossible to determine if your app has been previously installed. Migrating to Analytics React Native 2.0 results in new Application Installed events for your existing users. To filter these events out you can either create an Enrichment Plugin to drop events or filter them using your Segment workspace. Furthermore, previously set userId values do not persist. Trigger an Identify event to reassign the userId.

To upgrade to React Native 2.0:

  1. Update the existing package:
     yarn upgrade @segment/analytics-react-native
    
  2. Install additional dependencies:
     yarn add @segment/sovran-react-native @react-native-async-storage/async-storage
    
  3. Install or update pods:
     npx pod-install
    
  4. Add permissions to AndroidManifest.xml:
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    
  5. Initialize and configure the Analytics React Native 2.0 client. The package exposes a method called createClient which you can use to create the Segment Analytics client. This central client manages all the tracking events.
     import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
    
     const segmentClient = createClient({
       writeKey: 'SEGMENT_API_KEY'
     });
    

    These are the options you can apply to configure the client:

    Option Name Description
    writeKey required This is your Segment write key.
    autoAddSegmentDestination The default is set to true.
    This automatically adds the Segment Destination plugin. Set to false if you don’t want to add the Segment Destination.
    debug The default is set to true.
    The default value is false in production.
    When set to false, logs don’t generate.
    defaultSettings The default is set to undefined.
    Settings that will be used if the request to get the settings from Segment fails
    flushAt The default is set to 20.
    The count of events at which Segment sends to the backend.
    flushInterval The default is set to 30.
    The internval in seconds at which Segment sends events to the backend.
    maxBatchSize The default is set to 1000.
    The maxiumum batch size of how many events to send to the API at once.
    maxEventsToRetry The default is set to 1000.
    The maximum number of events needed to retry sending if the initial request failed.
    retryInterval The default is set to 60.
    The interval in seconds at which to retry sending events the request failed, for example, in case of a network failure.
    trackAppLifecycleEvents The default is set to false.
    This enables you to automatically track app lifecycle events, such as application installed, opened, updated, backgrounded. Set to true to track.
    trackDeepLinks The default is set to false.
    This automatically tracks when the user opens the app via a deep link. Set to Enable automatic tracking for when the user opens the app via a deep link.

Client Configuration Examples

Example client configuration for analytics-react-native 1.5.1

import analytics from '@segment/analytics-react-native'

...

analytics.setup('WRITE_KEY', {
 debug: true,
 using: [amplitude, appsflyer],
 trackAdvertising: true,
});
"dependencies": {
   ...
  "@segment/analytics-react-native": "1.5.1"
 }
PODS:
...
 - Analytics (4.1.6)
}

Example client configuration for analytics-react-native 2.0

import {
 createClient,
 AnalyticsProvider,
} from '@segment/analytics-react-native';

import { FirebasePlugin } from '@segment/analytics-react-native-plugin-firebase';
...

const segmentClient = createClient({
 writeKey: 'WRITE_KEY',
 trackAppLifecycleEvents: true,
});

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

const App = () => {
 ...
 return (
   <AnalyticsProvider client={segmentClient}>
    ...
   </AnalyticsProvider>
  );
};
"dependencies": {
  ...
 "nanoid": "^3.1.30",
 "@react-native-async-storage/async-storage": "^1.15.11",
 "@segment/analytics-react-native": "2.2.0",
 "@segment/analytics-react-native-plugin-firebase": "2.0",
 "@segment/sovran-react-native": "0.2.6",
}
PODS:
...
- segment-analytics-react-native (2.0.0):
 - React-Core
- sovran-react-native (0.2.6):
 - React-Core
}

Tracking Implementation Examples

Example tracking implementation for analytics-react-native 1.5.1

Home.js

import analytics from '@segment/analytics-react-native';

...

import analytics from '@segment/analytics-react-native';
...
onSendEvent = async() => {
 let name = this.state.eventName
 let properties = this.state.props

 await analytics.track(name, properties);
}

Example tracking implementation for analytics-react-native 2.0

Home.tsx

import { useAnalytics } from '@segment/analytics-react-native';

...

const Home = ({ navigation }: { navigation: any }) => {
  const { screen, track, identify, group, alias, reset, flush } =
    useAnalytics();
    ...
 onPress: () => {
  track('Track pressed', { foo: 'bar' });
 };
 ...
};

This page was last modified: 13 Sep 2022



Get started with Segment

Segment is the easiest way to integrate your websites & mobile apps data to over 300 analytics and growth tools.
or
Create free account