---
title: Track custom variables - React Native
description: Enhance analytics by capturing custom variables for detailed user behavior analysis in your React Native app with the CSQ SDK
lastUpdated: 11 March 2026
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/track-custom-variables/
  md: https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/track-custom-variables/index.md
---

## Usage

Custom variables are additional information on the page, the user or the session, and which can be used to create mappings.

For example, they can include information on the current layout of a screen, like dark or light mode.

## Limits

### On the server side

* It is possible to save up to 20 distinct custom variables per screenview. If more are received, only the first 20 custom variables, based on their `index` value, will be kept.
* The `index` value of custom variable is used to determine which custom variable to be kept. Only `index` value between 1 and 20 will be taken into account.

### On the SDK side

* Every custom variable is composed of `index`, `name` and `value`.
* If you are using the same `index` twice in a single screen only the first (`name`, `value`) pair associated with the `index` will be kept.
* In case `name` (max. 512 characters) or `value` (max. 255 characters) maximum characters length is reached, the SDK will automatically trim the exceeding characters.
* If `name` or `value` are empty, the SDK will instead send the literal string `"cs-empty"`.
* Use a consistent `index` for a given variable within an application - for instance, if the "screen layout" is collected with an `index` of 3, use the slot 3 for this information on every screen of the application.

## Defining custom variables

To define and send custom variables, follow this:

```typescript
import { CSQ, CustomVar } from "@contentsquare/react-native-bridge";


const customVar1: CustomVar = {
  index: 1,
  key: "CustomVarName1",
  value: "CustomVarValue1",
};
const customVar2: CustomVar = {
  index: 2,
  key: "CustomVarName2",
  value: "CustomVarValue2",
};




CSQ.trackScreenview("ScreenName", [customVar1, customVar2]);
```

Warning

For consistent analytics, use the same index/name pair values across your application:

**Screen A**

```typescript
import { CSQ, CustomVar } from "@contentsquare/react-native-bridge";


const customVar: CustomVar = {
  index: 3,
  key: "hero_banner_type",
  value: "carousel",
};




CSQ.trackScreenview("ScreenA", [customVar])
```

**Screen B**

```typescript
import { CSQ, CustomVar } from "@contentsquare/react-native-bridge";


const customVar: CustomVar = {
  index: 3,
  key: "hero_banner_type",
  value: "slider",
};




CSQ.trackScreenview("ScreenB", [customVar])
```