> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> React Native setup and configuration for ClickHouse Observability and self-managed deployments.

Use OpenTelemetry to send traces from your React Native application's JavaScript layer to ClickHouse Observability.

This guide integrates:

## Set up OpenTelemetry

Follow the official [OpenTelemetry React Native demo](https://opentelemetry.io/docs/demo/services/react-native-app/) and its [instrumentation source](https://github.com/open-telemetry/opentelemetry-demo/tree/main/src/react-native-app) to initialize tracing and instrument network requests.

The demo uses the OpenTelemetry JavaScript packages, which are not explicitly supported on React Native. Validate compatibility with your application's React Native and OpenTelemetry versions.

## Configure your destination

Replace the demo's local exporter configuration with the destination below. Use this exporter in the span processor from the upstream setup. The exporter URL must include `/v1/traces`.

> [tab] Fully managed
>
> [Beta offering](https://clickhouse.com/docs/reference/settings/beta-and-experimental-features.md#beta-features)
>
> Open **Team Settings → Data → Managed Telemetry** in your service and copy the **OTLP HTTP endpoint** and **API key**. Keep the complete HTTPS endpoint, including its port, and append `/v1/traces`:
>
> ```javascript theme={null}
> import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
>
> const traceExporter = new OTLPTraceExporter({
>   url: 'https://YOUR_OTEL_ENDPOINT:4318/v1/traces',
>   headers: {
>     Authorization: 'Bearer YOUR_INGESTION_API_KEY',
>   },
> });
> ```

> [tab] Self-managed
>
> Use your collector's OTLP HTTP endpoint and ingestion key. The collector must be reachable from the device. For collector setup, see [Ingesting with OpenTelemetry](https://clickhouse.com/docs/clickstack/observability/ingesting-data/opentelemetry.md#sending-otel-data-self-configured).
>
> ```javascript theme={null}
> import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
>
> const traceExporter = new OTLPTraceExporter({
>   url: 'https://YOUR_COLLECTOR_HOST:4318/v1/traces',
>   headers: {
>     Authorization: 'YOUR_INGESTION_API_KEY',
>   },
> });
> ```

## Verify ingestion

Run your application on a device or simulator and make network requests. In ClickHouse Observability, select a recent time range and find your application's service name in Traces.

For instrumentation details and React Native compatibility workarounds, see the [OpenTelemetry React Native demo](https://opentelemetry.io/docs/demo/services/react-native-app/). For exporter options, see the [OpenTelemetry JavaScript exporter documentation](https://opentelemetry.io/docs/languages/js/exporters/).