---
title: Getting Started with Product Analytics - React Native
description: Integrate the CSQ SDK for Product Analytics into your React Native app in minutes
lastUpdated: 22 January 2026
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-react-native/product-analytics/
  md: https://docs.contentsquare.com/en/csq-sdk-react-native/product-analytics/index.md
---

This quick start guide shows you how to get Contentsquare Product Analytics set up in a React Native application.

Once you've completed the setup process, the Contentsquare SDK will capture a wide variety of user interactions in your application with no additional code required.

Upgrading

See our guides to upgrade to the CSQ SDK from the [Heap Core SDK](../product-analytics/upgrade-from-heap-core-sdk/) or the [Heap Classic SDK](../product-analytics/upgrade-from-heap-classic-sdk/).

## Install the SDK

Compatibility

The CSQ React Native SDK for React Native integrates the Contentsquare SDKs for both iOS and Android with your React Native JavaScript code.

See [Compatibility](compatibility/) for more information.

The CSQ React Native SDK is available as an [NPM package ↗](https://www.npmjs.com/package/@contentsquare/react-native-bridge), which includes the bridge and the necessary dependencies for specific versions of the SDKs.

To install the CSQ React Native SDK, open a terminal and run the following commands from your application’s root directory:

* yarn

  ```bash
  yarn add @contentsquare/react-native-bridge
  cd ios && pod install
  ```

* npm

  ```bash
  npm install @contentsquare/react-native-bridge
  cd ios && pod install
  ```

iOS Specific Note

Since React Native projects for iOS are in Objective-C and our SDK is in Swift, you need to embed the Swift standard libraries. In your project’s target Build Settings, set **Embedded Content Contains Swift Code** to YES.

Ensure CocoaPods version 1.10.0 or later is installed (`pod --version`). If not, update with `[sudo] gem install cocoapods`. This is required to link the SDK and bridge, as CocoaPods only added support for XCFrameworks in late 2020.

## Add Autocapture Plugin React Native Bridge

Add the React Native Babel Autocapture Plugin to instrument your app code:

In your `babel.config.js` file, add `@contentsquare/react-native-bridge/babel` to the plugins array:

```javascript
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['@contentsquare/react-native-bridge/babel'],
};
```

Autocapture Plugin Note

Autocapture babel plugin depends on the @babel/plugin-transform-react-display-name to include component names in interaction events.

This is typically provided by module:metro-react-native-babel-preset, babel-preset-expo, or @react-native/babel-preset. If you aren't including any of these, we recommend including @babel/plugin-transform-react-display-name alongside @contentsquare/react-native-bridge/babel in your plugins section.

## Start the SDK

1. Add your Product Analytics Environment ID using `CSQ.configureProductAnalytics()`.

   ```javascript
   import { CSQ } from "@contentsquare/react-native-bridge";


   useEffect(() => {
     CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_ID");
   }, []);
   ```

   Find your environment ID

   `YOUR_ENVIRONMENT_ID` is either provided to you by Contentsquare or you can find it in **Account** > **Manage** > **Projects** > \[Select your project] > **Environments** within the [Product Analytics web app ↗](https://heapanalytics.com/app/).

2. Recommended To capture interactions and screenviews automatically, enable autocapture by setting `enableRNAutocapture` to `true`.

   ```javascript
   import { CSQ } from "@contentsquare/react-native-bridge";


   useEffect(() => {
     CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_ID",{
       enableRNAutocapture: true,
     });
   }, []);
   ```

3. (Optional) If your Product Analytics environment is hosted in the EU, set the `baseUrl` option to `https://mh.ba.contentsquare.net`.

   ```javascript
   import { CSQ } from "@contentsquare/react-native-bridge";


   useEffect(() => {
     CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_ID",{
       enableRNAutocapture: true,
       baseUrl: "https://mh.ba.contentsquare.net",
     });
   }, []);
   ```

4. Add a call to `CSQ.start()` after `CSQ.configureProductAnalytics()`.

   ```javascript
   import { CSQ } from "@contentsquare/react-native-bridge";


   useEffect(() => {
     CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_ID",{
       enableRNAutocapture: true,
     });


     CSQ.start();
   }, []);
   ```

5. Start your application, and check logs for this output:

   ```shell
   [INFO] CSQ 1.4.1 is attempting to start Product Analytics.
   ```

## Get user consent

The CSQ SDK treats users as opted-out by default.

Implement the [`optIn()`](command-reference/#csqoptin) API to forward user consent to the SDK and generate a user ID.

```javascript
import React, { useState } from "react";
import { View, Text, Button } from "react-native";
import { CSQ } from "@contentsquare/react-native-bridge";


const PolicyConsentScreen = () => {
  const [isTrackingAccepted, setIsTrackingAccepted] = useState(false);


  const handleAcceptPolicy = () => {
    setIsTrackingAccepted(true);
    CSQ.optIn();
  };


  return (
    <View>
      <Text>Please accept our privacy policy to proceed.</Text>
      <Button title="Accept Policy" onPress={handleAcceptPolicy} />
    </View>
  );
};


export default PolicyConsentScreen;
```

Once tracking has started, you’re able to take full advantage of the CSQ SDK API to identify users, track custom events, and more.

Contentsquare's Product Analytics module will also automatically start tracking a wide range of user interactions, view controller changes, and app version changes without any additional code.

## Next steps

Our SDK offers a wide range of features to enhance your implementation, including extended tracking capabilities, and personal data masking.

[Track identity ](track-identity/)Link anonymous and identified user data across sessions and devices for comprehensive analytics

[Track push notifications ](track-push-notifications/)Track mobile notification interactions automatically

[Track events manually ](track-events-manually/)Learn how to track custom events

[Hide sensitive data ](privacy-and-sensitive-data/)Protect sensitive data by disabling text capture, masking specific views, or ignoring interactions

Session Replay and Error Monitoring are both available with the [Experience Analytics Extension](dxae-setup/), which you can purchase separately.

[Set up the Experience Analytics extension](dxae-setup/)