Amplitude Adds React Native Support

Amplitude loves React. React has been the centerpiece of our front-end stack for quite a while now and we don’t see that changing any time soon. The react ecosystem just keeps getting better with new more elegant APIs and innovative tooling.

Announcing Official React Native Support

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.

Getting Started

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

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

import amplitude 'amplitude-js';

And now you can instrument Amplitude by logging events in your app exactly as you would in your web applications.

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

Differences between Web and Mobile

The one really noteworthy difference between Web and Mobile is how devices are identified. Android and iOS devices will be distinguished by the Platform property as either Android or iOS.

To get more granular device identification you will need to install a native module called React Native Device Info and set an option on init called useNativeDeviceInfo.

amplitude.getInstance().init(
  'API_KEY',
  null,
  { "useNativeDeviceInfo": true }
)

What’s Next?

React Usage Patterns

You may be familiar with our React Amplitude library. This is a great way to instrument your React application in a very declarative and low boilerplate way. It makes instrumenting your app an almost fun experience.

With the advent of React Hooks, some of the pain points React Amplitude meant to solve are less of an issue. We want to revisit some of the ideas we explored in React Amplitude and share new instrumentation patterns in a React Hooks world.

Static Types

We also love static typing at Amplitude. We’re very aware of the growing popularity of statically typed forms JavaScript provided by the likes of TypeScript and Flow. Beyond just providing type definitions for the SDK, we want to share and explore basic patterns for building your taxonomy events and properties in a maintainable statically typed way.