diff --git a/docs/platforms/react-native/configuration/touchevents.mdx b/docs/platforms/react-native/configuration/touchevents.mdx index 2c0b186b15cd3..5bc2693a23f48 100644 --- a/docs/platforms/react-native/configuration/touchevents.mdx +++ b/docs/platforms/react-native/configuration/touchevents.mdx @@ -63,10 +63,17 @@ The **label** is determined by the first available value from: 3. `accessibilityLabel` prop 4. `aria-label` prop 5. `testID` prop +6. Text content extracted from children (e.g. `Save workout` → `"Save workout"`) The **name** comes from the Babel plugin annotation (`data-sentry-component`) or `displayName`. See [Component Names](/platforms/react-native/integrations/component-names/) for details. -This means apps that use accessibility labels or test IDs get meaningful touch breadcrumbs automatically, without any extra configuration. +This means apps that use accessibility labels, test IDs, or simply have text inside their touchable components get meaningful touch breadcrumbs automatically, without any extra configuration. + + + +Text extraction from children (item 6) is automatically disabled when Session Replay's `maskAllText` is enabled (the default). Set `maskAllText: false` in your `mobileReplayIntegration` config to enable it. Per-view `Sentry.Mask` boundaries are also respected. + + ```javascript const YourCoolComponent = (props) => { @@ -128,7 +135,11 @@ _Array<string | RegExp>, Accepts strings and regular expressions_. Component `labelName` -_String_. The name of a custom prop to look for when determining the label of a component. Takes priority over the automatic `accessibilityLabel`, `aria-label`, and `testID` fallbacks. +_String_. The name of a custom prop to look for when determining the label of a component. Takes priority over the automatic `accessibilityLabel`, `aria-label`, `testID`, and text extraction from children fallbacks. + +`extractTextFromChildren` + +_boolean, default: true_. Extract text content from children of touched components as a label fallback. Automatically disabled when Session Replay's `maskAllText` is enabled. Text inside `Sentry.Mask` boundaries is never extracted. Set to `false` to opt out entirely. ## Minified Names in Production 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 b17ed81152c38..a3fc0eb2da047 100644 --- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx @@ -37,7 +37,7 @@ const App = () => Your App; export default Sentry.wrap(App); ``` -The SDK identifies UI elements by looking for `sentry-label`, then `accessibilityLabel`, `aria-label`, and `testID` props. You can also specify a custom prop name with the `labelName` option in `Sentry.wrap`, which takes priority over `accessibilityLabel`, `aria-label`, and `testID`. If an element can't be identified, the transaction won't be captured. +The SDK identifies UI elements by looking for `sentry-label`, then `accessibilityLabel`, `aria-label`, `testID`, and finally text content from children as fallbacks. You can also specify a custom prop name with the `labelName` option in `Sentry.wrap`, which takes priority over `accessibilityLabel`, `aria-label`, `testID`, and text extraction from children. If an element can't be identified, the transaction won't be captured. ```javascript {2-2} export default Sentry.wrap(App, {