# User Interaction Instrumentation | Sentry for React Native

The UI instrumentation captures transactions and adds breadcrumbs for touch interactions. Gesture support using React Native Gesture Handler, is also available with the `sentryTraceGesture` wrapper.

## [Touch Events](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.md#touch-events)

Transaction names are composed from a combination of displayed screen names, (for example, `LoginScreen`), and the labels of the element users interacted with, (for example, `login_button`).

To capture UI transactions, you have to first set up [routing instrumentation](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/automatic-instrumentation.md#enable-routing-instrumentation).

UI instrumentation tracing is disabled by default, but you can enable it by setting the `enableUserInteractionTracing` options to `true` and wrapping your root component:

```javascript
import * as Sentry from "@sentry/react-native";


const navigationIntegration = Sentry.reactNavigationIntegration(); // Or any other navigation integration


Sentry.init({
  dsn: "___PUBLIC_DSN___",

  enableUserInteractionTracing: true,
  tracesSampleRate: 1.0,
  integrations: [navigationIntegration],

});

const App = () => <View>Your App</View>;

export default Sentry.wrap(App);
```

The label by which UI elements are identified is set by the `labelName` option in `Sentry.wrap`. If no value is supplied, `sentry-label` will be used instead. If an element can't be identified, the transaction won't be captured.

```javascript
export default Sentry.wrap(App, {

  touchEventBoundaryProps: { labelName: "my-label" },

});
```

If the UI transaction idled, but didn't have any child spans, it'll be dropped.

Because transactions are automatically bound to scope, you can create child spans using [custom instrumentation](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/custom-instrumentation.md#retrieve-a-transaction). Note, that the `idleTimeoout` for running UI transactions defaults to `1000` milliseconds (one second).

## [Gesture Events](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.md#gesture-events)

To create UI transactions from React Native Gesture Handler, you need to wrap individual gestures using `sentryTraceGesture`. This will also automatically create breadcrumbs. The wrapper `sentryTraceGesture(label, gesture)` accepts `string` labels that uniquely identify the gesture in a screen as well as the gesture object being wrapped.

Only [RNGH API v2](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture/) is supported.

```javascript
import React from "react";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { sentryTraceGesture } from "@sentry/react-native";

export const GesturesTracingScreen = () => {
  const pinch = Gesture.Pinch();
  const longPress = Gesture.LongPress();

  const gesture = Gesture.Race(

    sentryTraceGesture("pinch-to-zoom", pinch),
    sentryTraceGesture("long-press-to-cancel", longPress),

  );

  return <GestureDetector gesture={gesture}>// ...</GestureDetector>;
};
```