React Native quick start

👍

Target Platforms

This quick start guide shows you how to get Heap setup in a React Native cross-platform application that primarily uses React Native for creating the user interface.

The SDK is compatible with React Native 0.63 and later on the old architecture, and 0.76 and later on the new architecture.

After completing the setup process, you'll be able to:

• Take full advantage of the Heap API to track custom events and manage user identity.
• Automatically capture a wide variety of user interactions with no additional code required.

📘

If you're using Heap Classic and thinking of switching to our latest offerings, check out the full breakdown of the differences between our SDKs in From Classic to Core - React Native Edition.

Before you begin

This guide assumes you're using React Native autolinking to add libraries to your app. If you're manually linking dependencies, you'll need to follow your existing processes to include the native modules.

Add Heap Dependencies to your project

1. Using Yarn or NPM, install the React Native dependencies:

yarn add @heap/heap-react-native-bridge @heap/heap-react-native-autocapture
yarn add -D @heap/babel-plugin-heap-react-native-autocapture

npm install @heap/heap-react-native-bridge @heap/heap-react-native-autocapture
npm install -D @heap/babel-plugin-heap-react-native-autocapture

2. If using a bare React Native workflow, call pod install in your ios/ directory.
3. Add the @heap/heap-react-native-autocapture plugin to your BabelJS configuration:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@heap/heap-react-native-autocapture'],
};

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "@heap/heap-react-native-autocapture"
  ]
}

Note: If not using a React or React Native BabelJS preset, you'll also need to include @babel/plugin-transform-react-display-name in your BabelJS configuration to make sure event hierarchies are properly captured.

Start the Heap SDK

To enable Heap and start automatically tracking supported user events, register the autocapture SDK and call startRecording. This can go anywhere in your app, but we recommend doing this in App.tsx, either at the top level or inside a useEffect to make sure tracking starts, no matter how your app is opened.

import { Heap } from '@heap/heap-react-native-bridge';
import { registerHeapAutocapture } from '@heap/heap-react-native-autocapture';

Heap.logToConsole();
Heap.startRecording('YOUR_APP_ID');
registerHeapAutocapture(true);

Once tracking has started, you’re able to take full advantage of Heap’s API to identify users, track custom events, and more. Heap will also automatically start tracking a wide range of user interactions, view controller changes, and app version changes without any additional code.

What next?

To find out how to take full advantage of the Heap API to enhance your data capture, check out our mobile tracking guides.