From 3eeab9158312b28361afa57e8efc9c1c188e1d55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kry=C5=A1tof=20Wold=C5=99ich?=
 <31292499+krystofwoldrich@users.noreply.github.com>
Date: Wed, 22 Nov 2023 12:46:38 +0100
Subject: [PATCH] fix(rn): Add mission labelName option to touchevents (#8540)

Co-authored-by: Shana Matthews <shana.l.matthews@gmail.com>
---
 .../react-native/touchevents/index.mdx         | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/platforms/react-native/touchevents/index.mdx b/src/platforms/react-native/touchevents/index.mdx
index f8d6ec748ff8a..82accdf51fcc0 100644
--- a/src/platforms/react-native/touchevents/index.mdx
+++ b/src/platforms/react-native/touchevents/index.mdx
@@ -52,7 +52,7 @@ Each touch event is automatically logged as a breadcrumb and displays on the das
 
 ## Tracking Specific Components
 
-You can let Sentry know which components to track specifically by passing the `sentry-label` prop to them. If Sentry detects a component with a `sentry-label` within a touch's component tree, it will be logged on the dashboard as having occurred in that component. If we cannot find a component with the label, we will fall back to the `accessibilityLabel` prop.
+You can let Sentry know which components to track specifically by passing the `sentry-label` prop to them. If Sentry detects a component with a `sentry-label` within a touch's component tree, it will be logged on the dashboard as having occurred in that component. If Sentry cannot find a component with the label, Sentry will fall back to the `labelName` prop if specified, or else use `displayName`.
 
 ```javascript
 const YourCoolComponent = (props) => {
@@ -77,13 +77,23 @@ You can pass specific options to configure the boundary either as props to the `
 ```javascript{tabTitle:Default}
 <Sentry.TouchEventBoundary
   ignoreNames={["BadComponent", /^Connect\(/, /^LibraryComponent$/]}
+  labelName="testLabel"
 >
   <RestOfTheApp />
 </Sentry.TouchEventBoundary>
 ```
 
 ```javascript{tabTitle:HOC}
-Sentry.withTouchEventBoundary(App, { maxComponentTreeSize: 15 });
+Sentry.withTouchEventBoundary(App, { maxComponentTreeSize: 15, labelName: "testLabel" });
+```
+
+```javascript{tabTitle:Sentry.wrap()}
+Sentry.wrap(App, {
+  touchEventBoundaryProps: {
+    ignoreNames: ["BadComponent", /^Connect\(/, /^LibraryComponent$/]
+    labelName: 'accessibilityLabel',
+  },
+}
 ```
 
 `breadcrumbCategory`
@@ -102,6 +112,10 @@ Sentry.withTouchEventBoundary(App, { maxComponentTreeSize: 15 });
 
 : _Array<string | RegExp>, Accepts strings and regular expressions_. Component names to ignore when logging the touch event. This prevents unhelpful logs such as "Touch event within element: View" where you still can't tell which `View` it occurred in.
 
+`labelName`
+
+: _String_. The name of the prop to look for when determining the label of a component. If the prop is not found, Sentry will fall back to the `displayName` of the component.
+
 ## Minified Names in Production
 
 When bundling for production, React Native will minify class and function names to reduce the bundle size. This means that **you won't get the full original component names in your touch event breadcrumbs** and instead you will see minified names. Check out our [troubleshooting guide for minified production bundles](/platforms/react-native/troubleshooting/#minified-names-in-production) documentation to solve this.