> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-3a82795f.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> React Native SDK for ClickStack - The ClickHouse Observability Stack

# React Native

The ClickStack React Native SDK allows you to instrument your React Native
application to send events to ClickStack. This allows you to see mobile network
requests and exceptions alongside backend events in a single timeline.

This Guide Integrates:

* **XHR/Fetch Requests**

<h2 id="getting-started">
  Getting started
</h2>

<h3 id="install-via-npm">
  Install via NPM
</h3>

Use the following command to install the [ClickStack React Native package](https://www.npmjs.com/package/@hyperdx/otel-react-native).

```shell theme={null}
npm install @hyperdx/otel-react-native
```

<h3 id="initialize-clickstack">
  Initialize ClickStack
</h3>

Initialize the library as early in your app lifecycle as possible:

```javascript theme={null}
import { HyperDXRum } from '@hyperdx/otel-react-native';

HyperDXRum.init({
  url: 'http://your-otel-collector:4318',
  service: 'my-rn-app',
  apiKey: '<YOUR_INGESTION_API_KEY>', // Omit for Managed ClickStack
  tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests
});
```

<h3 id="attach-user-information-metadata">
  Attach user information or metadata (Optional)
</h3>

Attaching user information will allow you to search/filter sessions and events
in HyperDX. This can be called at any point during the client session. The
current client session and all events sent after the call will be associated
with the user information.

`userEmail`, `userName`, and `teamName` will populate the sessions UI with the
corresponding values, but can be omitted. Any other additional values can be
specified and used to search for events.

```javascript theme={null}
HyperDXRum.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // Other custom properties...
});
```

<h3 id="instrument-lower-versions">
  Instrument lower versions
</h3>

To instrument applications running on React Native versions lower than 0.68,
edit your `metro.config.js` file to force metro to use browser specific
packages. For example:

```javascript theme={null}
const defaultResolver = require('metro-resolver');

module.exports = {
  resolver: {
    resolveRequest: (context, realModuleName, platform, moduleName) => {
      const resolved = defaultResolver.resolve(
        {
          ...context,
          resolveRequest: null,
        },
        moduleName,
        platform,
      );

      if (
        resolved.type === 'sourceFile' &&
        resolved.filePath.includes('@opentelemetry')
      ) {
        resolved.filePath = resolved.filePath.replace(
          'platform\\node',
          'platform\\browser',
        );
        return resolved;
      }

      return resolved;
    },
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};
```

<h2 id="view-navigation">
  View navigation
</h2>

[react-navigation](https://github.com/react-navigation/react-navigation) version 5 and 6 are supported.

The following example shows how to instrument navigation:

```javascript theme={null}
import { startNavigationTracking } from '@hyperdx/otel-react-native';

export default function App() {
  const navigationRef = useNavigationContainerRef();
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        startNavigationTracking(navigationRef);
      }}
    >
      <Stack.Navigator>...</Stack.Navigator>
    </NavigationContainer>
  );
}
```