From 465182d2b8d1db450b69c60e1a297bf3c9839473 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 11:00:47 +0100
Subject: [PATCH 1/3] React Native: Add sentry-span-attributes prop for custom
 span attributes

---
 .../user-interaction-instrumentation.mdx      | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
index ce25ec1767884..b1ec66dc41747 100644
--- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
+++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
@@ -45,6 +45,41 @@ export default Sentry.wrap(App, {
 });
 ```
 
+### Adding Custom Attributes to User Interaction Spans
+
+<Alert level="warning">
+  The `sentry-span-attributes` prop is experimental and may change in future releases.
+</Alert>
+
+You can attach custom attributes to user interaction spans by passing the `sentry-span-attributes` prop to your components. This is useful for adding contextual information like user type, cart value, or feature flags that help you understand user behavior in performance monitoring.
+
+The `sentry-span-attributes` prop accepts an object with string keys and values that are strings, numbers, booleans, or arrays. These attributes will be attached to the user interaction span created when the component is interacted with.
+
+```javascript
+import { Button } from 'react-native';
+
+const CheckoutButton = ({ userType, cartValue }) => {
+  const handleCheckout = () => {
+    // Checkout logic
+  };
+
+  return (
+    <Button
+      sentry-label="checkout"
+      sentry-span-attributes={{
+        'user.type': userType,
+        'cart.value': cartValue,
+        'feature.enabled': true,
+      }}
+      onPress={handleCheckout}
+      title="Checkout"
+    />
+  );
+};
+```
+
+The SDK will traverse the component tree to find the `sentry-span-attributes` prop, so you can attach it to parent components if needed. The attributes work alongside `sentry-label` and will be included in the user interaction span.
+
 <Alert>
   If the UI transaction idled, but didn't have any child spans, it'll be
   dropped.

From 51b2d95d532e0046317c70730f2518ddaaac40d6 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 11:12:45 +0100
Subject: [PATCH 2/3] Use pressable example

---
 .../instrumentation/user-interaction-instrumentation.mdx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
index b1ec66dc41747..cb4b12aa48976 100644
--- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
+++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
@@ -56,7 +56,7 @@ You can attach custom attributes to user interaction spans by passing the `sentr
 The `sentry-span-attributes` prop accepts an object with string keys and values that are strings, numbers, booleans, or arrays. These attributes will be attached to the user interaction span created when the component is interacted with.
 
 ```javascript
-import { Button } from 'react-native';
+import { Pressable, Text } from 'react-native';
 
 const CheckoutButton = ({ userType, cartValue }) => {
   const handleCheckout = () => {
@@ -64,7 +64,7 @@ const CheckoutButton = ({ userType, cartValue }) => {
   };
 
   return (
-    <Button
+    <Pressable
       sentry-label="checkout"
       sentry-span-attributes={{
         'user.type': userType,
@@ -72,8 +72,9 @@ const CheckoutButton = ({ userType, cartValue }) => {
         'feature.enabled': true,
       }}
       onPress={handleCheckout}
-      title="Checkout"
-    />
+    >
+      <Text>Checkout</Text>
+    </Pressable>
   );
 };
 ```

From 370134873525221df8d7f313600cb5be96126bc5 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 11:14:22 +0100
Subject: [PATCH 3/3] simplify example

---
 .../user-interaction-instrumentation.mdx      | 32 +++++++------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
index cb4b12aa48976..a8fd66084d785 100644
--- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
+++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
@@ -56,27 +56,17 @@ You can attach custom attributes to user interaction spans by passing the `sentr
 The `sentry-span-attributes` prop accepts an object with string keys and values that are strings, numbers, booleans, or arrays. These attributes will be attached to the user interaction span created when the component is interacted with.
 
 ```javascript
-import { Pressable, Text } from 'react-native';
-
-const CheckoutButton = ({ userType, cartValue }) => {
-  const handleCheckout = () => {
-    // Checkout logic
-  };
-
-  return (
-    <Pressable
-      sentry-label="checkout"
-      sentry-span-attributes={{
-        'user.type': userType,
-        'cart.value': cartValue,
-        'feature.enabled': true,
-      }}
-      onPress={handleCheckout}
-    >
-      <Text>Checkout</Text>
-    </Pressable>
-  );
-};
+<Pressable
+  sentry-label="checkout"
+  sentry-span-attributes={{
+    'user.type': userType,
+    'cart.value': cartValue,
+    'feature.enabled': true,
+  }}
+  onPress={handleCheckout}
+>
+  <Text>Checkout</Text>
+</Pressable>
 ```
 
 The SDK will traverse the component tree to find the `sentry-span-attributes` prop, so you can attach it to parent components if needed. The attributes work alongside `sentry-label` and will be included in the user interaction span.