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:

   Copy code block

   yarn upgrade @segment/analytics-react-native

2. Install additional dependencies:

   Copy code block

   yarn add @segment/sovran-react-native @react-native-async-storage/async-storage

3. Install or update pods:

   Copy code block

   npx pod-install

4. Add permissions to AndroidManifest.xml:

   Copy code block

   <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.

   Copy code block

   1
   import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
   2
   
   3
   const segmentClient = createClient({
   4
     writeKey: 'SEGMENT_API_KEY'
   5
   });

   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.

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

3
...
4

5
analytics.setup('WRITE_KEY', {
6
 debug: true,
7
 using: [amplitude, appsflyer],
8
 trackAdvertising: true,
9
});

1
"dependencies": {
2
   ...
3
  "@segment/analytics-react-native": "1.5.1"
4
 }

1
PODS:
2
...
3
 - Analytics (4.1.6)
4
}

1
import {
2
 createClient,
3
 AnalyticsProvider,
4
} from '@segment/analytics-react-native';
5

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

9
const segmentClient = createClient({
10
 writeKey: 'WRITE_KEY',
11
 trackAppLifecycleEvents: true,
12
});
13

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

16
const App = () => {
17
 ...
18
 return (
19
   <AnalyticsProvider client={segmentClient}>
20
    ...
21
   </AnalyticsProvider>
22
  );
23
};

1
"dependencies": {
2
  ...
3
 "nanoid": "^3.1.30",
4
 "@react-native-async-storage/async-storage": "^1.15.11",
5
 "@segment/analytics-react-native": "2.2.0",
6
 "@segment/analytics-react-native-plugin-firebase": "2.0",
7
 "@segment/sovran-react-native": "0.2.6",
8
}

1
PODS:
2
...
3
- segment-analytics-react-native (2.0.0):
4
 - React-Core
5
- sovran-react-native (0.2.6):
6
 - React-Core
7
}

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

3
...
4

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

11
 await analytics.track(name, properties);
12
}

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

3
...
4

5
const Home = ({ navigation }: { navigation: any }) => {
6
  const { screen, track, identify, group, alias, reset, flush } =
7
    useAnalytics();
8
    ...
9
 onPress: () => {
10
  track('Track pressed', { foo: 'bar' });
11
 };
12
 ...
13
};