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:
- Update the existing package:
yarn upgrade @segment/analytics-react-native
- Install additional dependencies:
yarn add @segment/sovran-react-native @react-native-async-storage/async-storage
- Install or update pods:
npx pod-install
- Add permissions to
AndroidManifest.xml
:<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
- 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
requiredThis is your Segment write key. autoAddSegmentDestination
The default is set to true
.
This automatically adds the Segment Destination plugin. Set tofalse
if you don’t want to add the Segment Destination.debug
The default is set to true
.
The default value isfalse
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 failsflushAt
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 totrue
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
Need support?
Questions? Problems? Need more info? Contact Segment Support for assistance!