React Native SDK

 Our JS SDK now supports React Native! 

Customers with React Native apps can now integrate Amplitude and send data to us using our JS SDK. There are a few parts that are different from the JS SDK installation in order to fully support React Native. Information for those differences can be found in this article. 

What you will learn in this article

This article will go through the how to set-up React Native SDK - 

• Direct to where to find the installation package and how to install
• Link our JS SDK documentation for how to instrument data to Amplitude - logEvent, logRevenue etc. 
• Provide current NPM package
• Note any caveats to know about beforehand

Background

While Amplitude has no native mobile apps of our own, we know that a sizable portion of our customers do, and that many of you have chosen to implement your mobile apps with React Native. You’ve always been able to instrument those apps by dropping into Objective C and Java, but who wants to do that? There’s a reason you chose to use tools like React Native.

You would think it should be completely trivial to just start using Amplitude’s existing JavaScript SDK with React Native. It’s all just JavaScript, right? Unfortunately our JavaScript SDK predates React Native and even React itself. It was built for the browser, and made fundamental assumptions about browser APIs related localStorage, cookies, device identity, and so on.

Fortunately it is all JavaScript and it was straightforward to swap out the necessary bits to fully support React Native. So we’re happy to announce that the JS SDK officially supports React Native.

Table of Contents

• Installation
• Current NPM Package
• Caveats

Installation

1. Install JS SDK directly to your application:

If you’re familiar with instrumenting Amplitude in your web apps with the JavaScript SDK, you’ll find using the SDK in React Native to be a nearly identical experience. On the web, you may have been using the JavaScript snippet in your HTML to asynchronously load the SDK. For React Native you’ll have to embed the SDK directly into your application, just as you would any other JavaScript package. You can find the package on npm.

npm install amplitude-js

2. Import amplitude-js:

After installing the package you would import amplitude-js like any other node module.

import amplitude 'amplitude-js';

3. Instrument events to Amplitude through JS SDK methods:

And now you can instrument Amplitude by logging events in your app exactly as you would in your web applications. Please find instructions on how to send events, set userID, etc through our JS SDK documentation. An example of what an event call will look like is as followed:

amplitude.getInstance().setUserId('0cc82db6-3677');
amplitude.getInstance().logEvent("view dashboard", {
  "dashboard id": "id",
  "dashboard load time ms": 200,
  "is owner": false,
});

Current NPM package

https://www.npmjs.com/package/amplitude-js/v/5.10.0

This may have changed since publication, so be sure to check for newer versions.

Caveats

• Device IDs are randomly generated and not based on idfv/adid
• With v 5.5, pull react-native device identifier from device info when possible
• IDFA/IDFV/ADID is not tracked through JS SDK. If you are planning to send attribution data through one of our Attribution Partners, please see note #3 on our Attribution API doc.
• As of version 5.10,Library field for event will include amplitude-react-native when using SDK in react native. Pre 5.10, Library field for event will be JS SDK.