# Mixpanel for Vega Guide

**URL:** <https://community.amazondeveloper.com/t/mixpanel-for-vega-guide/3919>\
**Category:** Knowledge Base\
**Created:** [February 11, 2026, 6:00am UTC](https://community.amazondeveloper.com/t/mixpanel-for-vega-guide/3919 "2026-02-11T06:00:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zihe\_Jia](https://avatars.discourse-cdn.com/v4/letter/z/8e8cbc/32.png) [@Zihe\_Jia](https://community.amazondeveloper.com/u/Zihe_Jia)\
**Post date:** [February 11, 2026, 6:00am UTC](https://community.amazondeveloper.com/t/mixpanel-for-vega-guide/3919/1 "2026-02-11T06:00:00Z")

</div>

[Mixpanel](https://mixpanel.com/home/) is an analytics tool that enables you to capture data on how users interact with your digital product. Mixpanel then lets you analyze this data with simple, interactive reports that let you query and visualize the data with just a few clicks.

The [Mixpanel React Native SDK](https://docs.mixpanel.com/docs/tracking-methods/sdks/react-native) is now fully supported in Vega. This guide will walk you through the installation and setup process.

## Prerequisites

The Mixpanel React Native SDK requires [AsyncStorage](https://developer.amazon.com/docs/vega-api/latest/react-native-async-storage.html) for data persistence. Vega supports the `react-native-async-storage` library, which is the recommended approach for all Vega apps.

## Installation

To install Mixpanel, under your app’s root directory:

```bash
npm install mixpanel-react-native

```

Add the following dependencies to your `package.json`:

```json
"dependencies": {
"mixpanel-react-native": "^3.6.0",
"@amazon-devices/react-native-async-storage__async-storage": "~2.0.0",
"@react-native-async-storage/async-storage": "1.23.1"
}

```

The `@amazon-devices/react-native-async-storage__async-storage` version depends on your React Native for Vega line: use `~2.0.0` for React Native 0.72 and `~2.1.0` for React Native 0.83. See [Supported Libraries and Services](https://developer.amazon.com/docs/vega-api/latest/supported-libraries.html) for the current version of each port.

> **React Native 0.83 note:** On the RN 0.83 line, the SDK requires a small runtime polyfill to run in JavaScript Mode — see Known Limitations, item 5.

Then run:

```bash
npm install

```

## Initialize Mixpanel

To initialize Mixpanel in your code:

```javascript
import { Mixpanel } from 'mixpanel-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
const trackAutomaticEvents = false; // Not supported in JavaScript Mode
const useNative = false; // Must be false for Vega (TV platform)
const mixpanel = new Mixpanel('YOUR_MIXPANEL_TOKEN', trackAutomaticEvents, useNative, AsyncStorage);
await mixpanel.init();

```

## Track Events

To send data:

```javascript
// Track with event name only
mixpanel.track('Sent Message');
// Track with event name and properties
mixpanel.track('Plan Selected', {'Plan': 'Premium'});
// For critical events, flush immediately
mixpanel.track('Purchase Completed', {'amount': 99.99});
mixpanel.flush();

```

## JavaScript Mode for Vega

Since Vega is a TV platform and doesn’t support native iOS/Android directly, Mixpanel runs in JavaScript Mode. This means:

- The `useNative` parameter must be set to `false`

- The `trackAutomaticEvents` parameter should be set to `false` (automatic events are not supported in JavaScript mode)

- Data does not automatically flush when the app backgrounds - call `mixpanel.flush()` more frequently for critical events

- JavaScript Mode does not have the same default properties as Native Mode

## Known Limitations

1. **Automatic Events:** Not supported. Setting `trackAutomaticEvents` to `true` will have no effect because Vega uses JavaScript Mode.

2. **Default Properties:** JavaScript Mode does not include the same default event properties as Native Mode. Some device-specific properties that are automatically collected in native iOS/Android apps may not be available.

3. **Background Flushing:** The default flush interval is 10 seconds, but data will not flush automatically when the app moves to the background. For critical events, call `mixpanel.flush()` manually.

4. **Insecure Random Number Generator Warning:** As of version 3.6.0, the SDK generates its distinct ID using `react-native-get-random-values`, which has no native module on Vega. The SDK falls back to a JavaScript implementation and logs a `Using an insecure random number generator` warning at initialization. This is expected on Vega and does not affect event tracking; no additional setup is required.

5. **React Native 0.83 requires a legacy NativeModules polyfill.** On the RN 0.83 (new architecture) runtime, the SDK reads React Native’s legacy `NativeModules` object at load time (both `mixpanel-react-native` and its `react-native-get-random-values` dependency do this). Because the RN 0.83 runtime is bridgeless, reading that object throws `__fbBatchedBridgeConfig is not set, cannot invoke native modules` and the app exits before any code runs. Seed an empty batched-bridge config **before** the SDK loads — at the very top of your `index.js`, above the `react-native` import — so those lookups return `undefined` and the SDK falls through to JavaScript Mode:

```javascript
// index.js — must run before any 'react-native' import
if (typeof global.nativeModuleProxy === 'undefined' &&
    typeof global.__fbBatchedBridgeConfig === 'undefined') {
  global.__fbBatchedBridgeConfig = { remoteModuleConfig: [], localModulesConfig: [] };
}

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

```

## Accessing Device Information

While JavaScript Mode has limited default properties, you can manually collect device information using Vega’s supported libraries:

- **Device Info:** Use [`react-native-device-info`](https://developer.amazon.com/docs/vega-api/latest/react-native-device-info.html) to access device name, OS version, app version, and more

- **Display Info:** Use [Vega Graphics API](https://developer.amazon.com/docs/vega-api/latest/README.amazon-devices_kepler-graphics.html) to query screen resolution, refresh rate, HDR support, and color depth

You can add this information as custom properties when tracking events or as user profile properties.

## **Example** : Tracking Events with Device Properties

The following is an example of how you can use Mixpanel to track events with device properties.

First, add the required dependencies to your `package.json` (use the version that matches your React Native for Vega line — see [Supported Libraries and Services](https://developer.amazon.com/docs/vega-api/latest/supported-libraries.html)):

```json
"dependencies": {
  "@amazon-devices/react-native-device-info": "~2.0.0",
  "@amazon-devices/kepler-graphics": "^2.4.0"
}

```

Then collect and send device information with your events:

```javascript
import { Mixpanel } from 'mixpanel-react-native';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { Display } from '@amazon-devices/kepler-graphics';

// Initialize Mixpanel (as shown above)
const mixpanel = new Mixpanel('YOUR_MIXPANEL_TOKEN', false, false, AsyncStorage);
await mixpanel.init();

// Collect device information
const getDeviceProperties = async () => {
  try {
    // Get device info
    const deviceName = await DeviceInfo.getDeviceName();
    const systemVersion = await DeviceInfo.getSystemVersion();
    const appVersion = DeviceInfo.getVersion();
    
    // Get display info. The Display module exposes the primary display's current
    // config via static methods; refresh rate is returned in millihertz.
    const displayConfig = Display.getCurrentConfig();
    const refreshRateHz = Display.getCurrentRefreshRateInMillihertz() / 1000;
    
    return {
      device_name: deviceName,
      os_version: systemVersion,
      app_version: appVersion,
      screen_width: displayConfig.widthInPixels,
      screen_height: displayConfig.heightInPixels,
      screen_density_dpi: displayConfig.screenDensityInDpi,
      refresh_rate: refreshRateHz
    };
  } catch (error) {
    console.error('Error collecting device properties:', error);
    return {};
  }
};

// Track events with device properties
const trackEventWithDeviceInfo = async (eventName, customProperties = {}) => {
  const deviceProperties = await getDeviceProperties();
  
  mixpanel.track(eventName, {
    ...deviceProperties,
    ...customProperties
  });
};

// Usage examples
await trackEventWithDeviceInfo('App Launched');

await trackEventWithDeviceInfo('Video Played', {
  video_id: '12345',
  video_title: 'Sample Video'
});

await trackEventWithDeviceInfo('Purchase Completed', {
  amount: 99.99,
  plan: 'Premium'
});

```

You can also set device properties as super properties so they’re automatically included with every event:

```javascript
const deviceProperties = await getDeviceProperties();
mixpanel.registerSuperProperties(deviceProperties);

// Now all events will include device properties automatically
mixpanel.track('Button Clicked');
mixpanel.track('Screen Viewed');

```

## Additional Resources

> **[Mixpanel SDKs: React Native - Mixpanel](https://docs.mixpanel.com/docs/tracking-methods/sdks/react-native)**

> **[GitHub - mixpanel/mixpanel-react-native: Official React Native Tracking Library for...](https://github.com/mixpanel/mixpanel-react-native)**
>
> Official React Native Tracking Library for Mixpanel Analytics

## Support

For Mixpanel support, contact [support@mixpanel.com](mailto:support@mixpanel.com) or visit the [Mixpanel Help Center](https://mixpanel.com/contact-us/support/):

> **[Contact Support | Mobile & Web User Analytics](https://mixpanel.com/contact-us/support/)**
>
> Need help with Mixpanel? Contact our support team or access our knowledge base for quick answers and expert assistance.

_Last updated: Aug 14, 2026_