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.

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' });
 };
 ...
};