From bde0bf2675d4828123fd2c2aec934602e826462a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 10:36:05 +0100
Subject: [PATCH 1/5] feat(tracing): Add sentry-span-attributes prop for custom
 span attributes

---
 CHANGELOG.md                                  |  16 ++
 packages/core/src/js/touchevents.tsx          |  50 +++-
 packages/core/test/touchevents.test.tsx       | 240 ++++++++++++++++++
 .../src/Screens/SpaceflightNewsScreen.tsx     |   7 +
 4 files changed, 312 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 117ac56a40..755c56156a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,22 @@
 > make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
 <!-- prettier-ignore-end -->
 
+## Unreleased
+
+### Features
+
+- Add `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5568](https://github.com/getsentry/sentry-react-native/pull/5568))
+  ```tsx
+  <Button
+    sentry-label="checkout"
+    sentry-span-attributes={{
+      'user.type': 'premium',
+      'cart.value': 150
+    }}
+    onPress={handleCheckout}
+  />
+  ```
+
 ## 7.10.0
 
 ### Fixes
diff --git a/packages/core/src/js/touchevents.tsx b/packages/core/src/js/touchevents.tsx
index c6eb78770c..d583d75e4b 100644
--- a/packages/core/src/js/touchevents.tsx
+++ b/packages/core/src/js/touchevents.tsx
@@ -1,4 +1,4 @@
-import type { SeverityLevel } from '@sentry/core';
+import type { SeverityLevel, SpanAttributeValue } from '@sentry/core';
 import { addBreadcrumb, debug, dropUndefinedKeys, getClient, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
 import * as React from 'react';
 import type { GestureResponderEvent } from 'react-native';
@@ -39,6 +39,11 @@ export type TouchEventBoundaryProps = {
    * Label Name used to identify the touched element.
    */
   labelName?: string;
+  /**
+   * Custom attributes to add to user interaction spans.
+   * Accepts an object with string keys and values that are strings, numbers, booleans, or arrays.
+   */
+  spanAttributes?: Record<string, SpanAttributeValue>;
 };
 
 const touchEventStyles = StyleSheet.create({
@@ -52,6 +57,7 @@ const DEFAULT_BREADCRUMB_TYPE = 'user';
 const DEFAULT_MAX_COMPONENT_TREE_SIZE = 20;
 
 const SENTRY_LABEL_PROP_KEY = 'sentry-label';
+const SENTRY_SPAN_ATTRIBUTES_PROP_KEY = 'sentry-span-attributes';
 const SENTRY_COMPONENT_PROP_KEY = 'data-sentry-component';
 const SENTRY_ELEMENT_PROP_KEY = 'data-sentry-element';
 const SENTRY_FILE_PROP_KEY = 'data-sentry-source-file';
@@ -204,6 +210,28 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
     });
     if (span) {
       span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SPAN_ORIGIN_AUTO_INTERACTION);
+
+      // Apply custom attributes from sentry-span-attributes prop
+      // Traverse the component tree to find custom attributes
+      let instForAttributes: ElementInstance | undefined = e._targetInst;
+      let customAttributes: Record<string, SpanAttributeValue> | undefined;
+
+      while (instForAttributes) {
+        if (instForAttributes.elementType?.displayName === TouchEventBoundary.displayName) {
+          break;
+        }
+
+        customAttributes = getSpanAttributes(instForAttributes);
+        if (customAttributes && Object.keys(customAttributes).length > 0) {
+          break;
+        }
+
+        instForAttributes = instForAttributes.return;
+      }
+
+      if (customAttributes && Object.keys(customAttributes).length > 0) {
+        span.setAttributes(customAttributes);
+      }
     }
   }
 
@@ -291,6 +319,26 @@ function getLabelValue(props: Record<string, unknown>, labelKey: string | undefi
       : undefined;
 }
 
+function getSpanAttributes(currentInst: ElementInstance): Record<string, SpanAttributeValue> | undefined {
+  if (!currentInst.memoizedProps) {
+    return undefined;
+  }
+
+  const props = currentInst.memoizedProps;
+  const attributes = props[SENTRY_SPAN_ATTRIBUTES_PROP_KEY];
+
+  // Validate that it's an object (not null, not array)
+  if (
+    typeof attributes === 'object' &&
+    attributes !== null &&
+    !Array.isArray(attributes)
+  ) {
+    return attributes as Record<string, SpanAttributeValue>;
+  }
+
+  return undefined;
+}
+
 /**
  * Convenience Higher-Order-Component for TouchEventBoundary
  * @param WrappedComponent any React Component
diff --git a/packages/core/test/touchevents.test.tsx b/packages/core/test/touchevents.test.tsx
index 11c62e64d3..32089530b8 100644
--- a/packages/core/test/touchevents.test.tsx
+++ b/packages/core/test/touchevents.test.tsx
@@ -4,6 +4,7 @@
 import type { SeverityLevel } from '@sentry/core';
 import * as core from '@sentry/core';
 import { TouchEventBoundary } from '../src/js/touchevents';
+import * as userInteractionModule from '../src/js/tracing/integrations/userInteraction';
 import { getDefaultTestClientOptions, TestClient } from './mocks/client';
 
 describe('TouchEventBoundary._onTouchStart', () => {
@@ -310,4 +311,243 @@ describe('TouchEventBoundary._onTouchStart', () => {
       type: defaultProps.breadcrumbType,
     });
   });
+
+  describe('sentry-span-attributes', () => {
+    it('sets custom attributes from prop on user interaction span', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'checkout',
+            'sentry-span-attributes': {
+              'user.subscription': 'premium',
+              'cart.items': '3',
+              'feature.enabled': true,
+            },
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(mockSpan.setAttributes).toHaveBeenCalledWith({
+        'user.subscription': 'premium',
+        'cart.items': '3',
+        'feature.enabled': true,
+      });
+    });
+
+    it('handles multiple attribute types (string, number, boolean)', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'test',
+            'sentry-span-attributes': {
+              'string.value': 'test',
+              'number.value': 42,
+              'boolean.value': false,
+              'array.value': ['a', 'b', 'c'],
+            },
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(mockSpan.setAttributes).toHaveBeenCalledWith({
+        'string.value': 'test',
+        'number.value': 42,
+        'boolean.value': false,
+        'array.value': ['a', 'b', 'c'],
+      });
+    });
+
+    it('handles invalid span attributes gracefully (null)', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'test',
+            'sentry-span-attributes': null,
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(mockSpan.setAttributes).not.toHaveBeenCalled();
+    });
+
+    it('handles invalid span attributes gracefully (array)', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'test',
+            'sentry-span-attributes': ['invalid', 'array'],
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(mockSpan.setAttributes).not.toHaveBeenCalled();
+    });
+
+    it('handles empty object gracefully', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'test',
+            'sentry-span-attributes': {},
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(mockSpan.setAttributes).not.toHaveBeenCalled();
+    });
+
+    it('works with sentry-label', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'checkout-button',
+            'sentry-span-attributes': {
+              'custom.key': 'value',
+            },
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(userInteractionModule.startUserInteractionSpan).toHaveBeenCalledWith({
+        elementId: 'checkout-button',
+        op: 'ui.action.touch',
+      });
+      expect(mockSpan.setAttributes).toHaveBeenCalledWith({
+        'custom.key': 'value',
+      });
+    });
+
+    it('finds attributes in component tree', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      const mockSpan = {
+        setAttribute: jest.fn(),
+        setAttributes: jest.fn(),
+      };
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(mockSpan as any);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Text' },
+          return: {
+            elementType: { displayName: 'Button' },
+            memoizedProps: {
+              'sentry-label': 'parent-button',
+              'sentry-span-attributes': {
+                'found.in': 'parent',
+              },
+            },
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      boundary._onTouchStart(event);
+
+      expect(mockSpan.setAttributes).toHaveBeenCalledWith({
+        'found.in': 'parent',
+      });
+    });
+
+    it('does not call setAttributes when no span is created', () => {
+      const { defaultProps } = TouchEventBoundary;
+      const boundary = new TouchEventBoundary(defaultProps);
+
+      jest.spyOn(userInteractionModule, 'startUserInteractionSpan').mockReturnValue(undefined);
+
+      const event = {
+        _targetInst: {
+          elementType: { displayName: 'Button' },
+          memoizedProps: {
+            'sentry-label': 'test',
+            'sentry-span-attributes': {
+              'custom.key': 'value',
+            },
+          },
+        },
+      };
+
+      // @ts-expect-error Calling private member
+      expect(() => boundary._onTouchStart(event)).not.toThrow();
+    });
+  });
 });
diff --git a/samples/react-native/src/Screens/SpaceflightNewsScreen.tsx b/samples/react-native/src/Screens/SpaceflightNewsScreen.tsx
index f03f9b76fb..e7830d2aa3 100644
--- a/samples/react-native/src/Screens/SpaceflightNewsScreen.tsx
+++ b/samples/react-native/src/Screens/SpaceflightNewsScreen.tsx
@@ -106,6 +106,13 @@ export default function NewsScreen() {
     }
     return (
       <Pressable
+        sentry-label="load-more-articles"
+        sentry-span-attributes={{
+          'articles.loaded': articles.length,
+          'pagination.page': page,
+          'pagination.next_page': page + 1,
+          'auto_load.count': autoLoadCount,
+        }}
         style={({ pressed }) => [
           styles.loadMoreButton,
           pressed && styles.loadMoreButtonPressed,

From dc9120373f7170bf7560cc34368a4e7c139347dc Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 10:39:26 +0100
Subject: [PATCH 2/5] Mark the api as experimental

---
 CHANGELOG.md                         | 2 +-
 packages/core/src/js/touchevents.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 755c56156a..4c5650cffe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@
 
 ### Features
 
-- Add `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5568](https://github.com/getsentry/sentry-react-native/pull/5568))
+- Add experimental `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5568](https://github.com/getsentry/sentry-react-native/pull/5568))
   ```tsx
   <Button
     sentry-label="checkout"
diff --git a/packages/core/src/js/touchevents.tsx b/packages/core/src/js/touchevents.tsx
index d583d75e4b..907790e262 100644
--- a/packages/core/src/js/touchevents.tsx
+++ b/packages/core/src/js/touchevents.tsx
@@ -42,6 +42,8 @@ export type TouchEventBoundaryProps = {
   /**
    * Custom attributes to add to user interaction spans.
    * Accepts an object with string keys and values that are strings, numbers, booleans, or arrays.
+   *
+   * @experimental This API is experimental and may change in future releases.
    */
   spanAttributes?: Record<string, SpanAttributeValue>;
 };

From 9f643cd6eb89f78eab8ef5b34cdc6d4a071c4d1b Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 10:45:33 +0100
Subject: [PATCH 3/5] Update changelog PR ref

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c5650cffe..28c7e04704 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@
 
 ### Features
 
-- Add experimental `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5568](https://github.com/getsentry/sentry-react-native/pull/5568))
+- Add experimental `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5569](https://github.com/getsentry/sentry-react-native/pull/5569))
   ```tsx
   <Button
     sentry-label="checkout"

From bef9e3fdf1bab9f15adea58e32423f0a7fc2a70b Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Fri, 23 Jan 2026 11:10:49 +0100
Subject: [PATCH 4/5] Update changelog

---
 CHANGELOG.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28c7e04704..dbfb633f8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,14 +12,15 @@
 
 - Add experimental `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5569](https://github.com/getsentry/sentry-react-native/pull/5569))
   ```tsx
-  <Button
+  <Pressable
     sentry-label="checkout"
     sentry-span-attributes={{
       'user.type': 'premium',
       'cart.value': 150
     }}
-    onPress={handleCheckout}
-  />
+    onPress={handleCheckout}>
+    <Text>Checkout</Text>
+  </Pressable>
   ```
 
 ## 7.10.0

From eb3930bdf8343a1471d45164938787175cfab0a4 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@sentry.io>
Date: Mon, 26 Jan 2026 15:54:39 +0100
Subject: [PATCH 5/5] test(e2e): Filter user interaction transactions from
 time-to-display test

The SpaceflightNewsScreen sample now includes a button with sentry-label,
which creates ui.action.touch transactions. These user interaction transactions
don't have time-to-display measurements (only navigation transactions do).

Updated the test to filter out ui.action.touch transactions before checking
for time-to-display measurements, allowing the test to correctly validate
navigation transactions while ignoring user interaction transactions.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 ...reSpaceflightNewsScreenTransaction.test.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/samples/react-native/e2e/captureSpaceflightNewsScreenTransaction.test.ts b/samples/react-native/e2e/captureSpaceflightNewsScreenTransaction.test.ts
index 2bdd30486e..6e9d6be8b5 100644
--- a/samples/react-native/e2e/captureSpaceflightNewsScreenTransaction.test.ts
+++ b/samples/react-native/e2e/captureSpaceflightNewsScreenTransaction.test.ts
@@ -55,12 +55,19 @@ describe('Capture Spaceflight News Screen Transaction', () => {
     expect(first![1].timestamp!).toBeLessThan(second![1].timestamp!);
   });
 
-  it('all transaction envelopes have time to display measurements', async () => {
-    allTransactionEnvelopes.forEach(envelope => {
-      expectToContainTimeToDisplayMeasurements(
-        getItemOfTypeFrom<EventItem>(envelope, 'transaction'),
-      );
-    });
+  it('all navigation transaction envelopes have time to display measurements', async () => {
+    allTransactionEnvelopes
+      .filter(envelope => {
+        const item = getItemOfTypeFrom<EventItem>(envelope, 'transaction');
+        // Only check navigation transactions, not user interaction transactions
+        // User interaction transactions (ui.action.touch) don't have time-to-display measurements
+        return item?.[1]?.contexts?.trace?.op !== 'ui.action.touch';
+      })
+      .forEach(envelope => {
+        expectToContainTimeToDisplayMeasurements(
+          getItemOfTypeFrom<EventItem>(envelope, 'transaction'),
+        );
+      });
   });
 
   function expectToContainTimeToDisplayMeasurements(