---
title: Set up the extension - React Native
description: Understand the benefits of upgrading to the CSQ SDK
lastUpdated: 30 March 2026
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-react-native/product-analytics/dxae-setup/
  md: https://docs.contentsquare.com/en/csq-sdk-react-native/product-analytics/dxae-setup/index.md
---

> Documentation index: https://docs.contentsquare.com/llms.txt
> Use this file to discover all available pages before exploring further.

This page will guide you to set up Mobile Experience Analytics Extension for Contentsquare Product Analytics.

This will supercharge the Product Analytics platform with:

* Powerful Session Replay
* Analysis capabilities of Mobile API Errors and Crashes

This guide assumes that you have already implemented the [CSQ SDK for Product Analytics](../).

## Enable the extension in the Product Analytics UI

1. In Product Analytics, navigate to **Account** > **Manage** > **Replays & Heatmaps**.

1) If this is your first time setting up Session Replay, select the checkbox to accept the terms and conditions.
2) Click **Add web or mobile app** to launch the setup wizard. There is one configuration per app.
3) Select **Mobile** as platform.
4) Give your app a name and choose a storage location (**US** or **EU**).

1. Set a sampling rate for how many sessions to record.

2. Configure replay settings:

   * **App ID**: enter the bundle ID of your app (for example, `com.companyname.appname`).
   * **Quality Settings**: choose the recording fidelity for Wi-Fi and Cellular connections. The default for both is Medium; keep Cellular equal to or lower than Wi-Fi.
   * **User Consent**: enable this if your app requires explicit opt-in before recording. See [Privacy docs](../privacy/#opt-in) for the opt-in API.

1) Click **Save and Continue** to finish the wizard.

Two configurations required

React Native apps require two separate mobile configurations — one for iOS and one for Android. Repeat the steps above for each platform, entering the appropriate bundle ID each time.

## Enable error and crash collection

Error and crash collection is managed separately from the setup wizard. Navigate to **Account** > **Manage** > **Replays & Heatmaps**, click **Edit** next to your app configuration, then scroll to the relevant section under **General Settings**:

* **Error Capture**: toggles for **API Errors** and **Custom Errors**.
* **Crashes Capture**: toggle for **Crashes**.

Click **Save** when finished.

## Session Replay masking

The Session Replay feature replays every interaction of your users with your app. To respect the user's right to privacy, the CSQ SDK:

* Masks everything by default
* Allows you to control which part of the user interface is collected via our [Masking rules](#masking-rules)

Warning

If you decide to unmask elements leading to collection of new data or use already collected data but for a different purpose, it is up to you to update your privacy declarations accordingly:

* **iOS**: Update the privacy practices described in your app's Privacy Manifest. See [Types of data and purpose](../privacy/) already described in the Contentsquare React Native SDK Privacy documentation.
* **Android**: Update your Google Play Data Safety declaration accordingly.

Common examples of data collected via unmasked Session Replay include: search history, purchase history, advertising data, etc.

**Important:** Contentsquare is not intended nor designed to collect sensitive personal data (such as health, financial, or racial data). It is the customer's responsibility not to send any sensitive personal data to Contentsquare.

### Masking mechanisms

Although the implementation is done once for both iOS and Android on React Native, the visual appearance of the masking itself will be different for each platform:

* Android

  Every single UI element is converted into a highly pixelated image to reach a very low resolution. Text and images will appear very blurry so that the content cannot be identified.

  #### Original vs Replay fully masked

  ![](https://docs.contentsquare.com/_astro/android-sr-masked.Bv63pOqr_Z1aMjBU.webp)

* iOS

  * Images are not collected, a placeholder is sent instead of the content; the "IMG" placeholder will be displayed in the frame of the element.
  * Text: text is replaced by "la" repeated as many times as needed to equal the original character count. White characters are preserved. For instance `the lazy fox` is collected as `lal lala ala`. All other visual properties are collected (text color, background color, alignment, etc.).
  * TextFields: same as Text
  * For all other types: no specific data is collected but visual properties are collected. If you think a specific element can reveal personal data from one of these properties you have to mask it using one of the methods presented below. A good way to check how a view is rendered in replays is to navigate to the desired view with the CS SDK running then use the [quick replay link](https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/session-replay/#access-the-replay).

  #### Original vs Replay fully masked

  ![](https://docs.contentsquare.com/_astro/uikit-sr-masked.4j5fWBpf_1wMYqm.webp)

### Masking rules

Masking rules can be applied in two ways:

1. **Through remote masking configuration in the CSQ Console (for admin users):** These configurations are managed directly in the Console and take effect for all sessions as soon as the app is restarted or brought to the foreground See [How to customize masking rules from the Data Masking tab ↗](https://support.contentsquare.com/hc/en-us/articles/37271848716561-How-to-customize-masking-rules-from-the-Data-Masking-tab-Apps) in the Help Center.
2. **Using public masking APIs in the SDK (for mobile application developers):** These configurations require developer implementation and will be applied only after the mobile app has gone through its release cycle.

Masking rules set via the CSQ Console or the public APIs are applied according to different priorities, as described below. The SDK determines whether a view is masked by evaluating the rules in the order specified below. Once a rule is triggered, the state is set, and subsequent rules are not applied:

| Priority | Rule | Configured via |
| - | - | - |
| 1 | The app or SDK version is fully masked | [Data Masking tab in the CSQ Console ↗](https://support.contentsquare.com/hc/en-us/articles/37271848716561-How-to-customize-masking-rules-from-the-Data-Masking-tab-Apps) |
| 2 | A [component](#maskingunmasking-specific-component) is specifically masked or unmasked | API |
| 3 | A [parent](#masking-and-unmasking-behaviors-on-a-parent-view) is specifically masked or unmasked | API |
| 4 | Otherwise the [default masking state](#default-masking) is applied | API |

### Public masking APIs

#### Default masking

All components are initially masked by default. To modify this default masking state, use the `setDefaultMasking` API, preferably within a `useEffect` in the root file (such as `App.js`). This ensures proper initialization and handling when the component mounts.

If you choose to unmask the entire app using the `setDefaultMasking` API, be aware that you will need to individually mask all personal data within the app. Additionally, ensure that you consistently mask personal data on new screens in the future, if necessary.

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


useEffect(() => {
  CSQ.setDefaultMasking(false); // Unmask all content
}, []);
```

Note

Even if you change the default masking state to `false`, the `TextInput` component will stay masked by default.

#### Masking/Unmasking Specific Component

Use `<CSQMask isSessionReplayMasked={true}>` (default) to mask or `{false}` to unmask all children components.

In this example below, all children views inside `<CSQMask>` will follow the rule of the closest parent prop `isSessionReplayMasked`.

```jsx
import { CSQMask } from '@contentsquare/react-native-bridge';


// Masks all child components
<CSQMask isSessionReplayMasked={true}>
  <View>
    <Text style={styles.title}>Buy my amazing merch!</Text>
    <Text>
      Hurry up! This offer won't be available tomorrow. Only $99.98 to get your hands on a
      wonderful, brand-new, life-changing item.
    </Text>
  </View>
</CSQMask>
```

#### Masking and Unmasking behaviors on a parent view

The masking state of a parent view propagates to all nested views unless explicitly overridden by a nested `<CSQMask>` component. This enables flexible masking and unmasking behaviors within complex component structures.

```jsx
import { CSQMask } from '@contentsquare/react-native-bridge';


// Masks or unmasks all child components based on isSessionReplayMasked prop
<CSQMask isSessionReplayMasked={true}>
  <View>
    <Text>This content is masked.</Text>


    <CSQMask isSessionReplayMasked={false}>
      <Text>This specific content is unmasked, despite the parent mask.</Text>
    </CSQMask>
  </View>
</CSQMask>
```

In this example, the inner `<CSQMask>` explicitly overrides the parent view's masking behavior.

### Implementation recommendations

#### Avoid wrapping the Root Navigator

`<CSQMask>` should not wrap the Root Navigator it could cause unwanted results. If you want to set the default masking behavior for the whole application you should use `CSQ.setDefaultMasking(boolean masked)`. `<CSQMask>` should be used at component level.

#### Avoid dynamically changing `isSessionReplayMasked` prop

While `<CSQMask>` supports toggling masking at the instance level, we do not recommend changing the `isSessionReplayMasked` prop dynamically based on conditions like this:

```jsx
<CSQMask isSessionReplayMasked={someCondition ? true : false}>...</CSQMask>
```

This approach may lead to unexpected behavior, such as personal data leaks. Instead, structure your layout in a way that ensures predictable masking behavior without frequently modifying the `isSessionReplayMasked` prop dynamically.

#### Keeping track of what is masked

The SDK doesn't provide a list of what is currently masked. If you need to keep track of it, you probably will have to write your specific wrapper.