feat(RN): Touch event boundary now take a sentry-label prop (#4766)

Author: jennmueng

src/platforms/react-native/touchevents.mdx

@@ -52,40 +52,39 @@ 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 setting the `displayName` property for them. If Sentry detects a component with a `displayName` within a touch's component tree, it will be logged on the dashboard as having occurred in that component.
+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.
 
 ```javascript
-class YourCoolComponent extends React.Component {
-  static displayName = "CoolComponent";
-  render() {
-    return <View>{/* ... */}</View>;
-  }
-}
+const YourCoolComponent = props => {
+  return (
+    <View sentry-label="CardContainer">
+      <Text sentry-label="CoolText">
+        You are cool
+      </Text>
+    </View>
+  );
+};
 ```
 
-or
+<Note>
 
-```javascript
-const YourCoolComponent = props => {
-  return <View>{/* ... */}</View>;
-};
+You don't have to worry about Typescript errors when passing the `sentry-label` prop. [Typescript will not throw an error on props with the '-' character](https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking).
 
-YourCoolComponent.displayName = "CoolComponent";
-```
+</Note>
 
 ## Options
 
 You can pass specific options to configure the boundary either as props to the `Sentry.TouchEventBoundary` component or as the second argument to the `Sentry.withTouchEventBoundary` higher-order component (HOC).
 
-```javascript
+```javascript{tabTitle:Default}
 <Sentry.TouchEventBoundary
   ignoreNames={["BadComponent", /^Connect\(/, /^LibraryComponent$/]}
 >
   <RestOfTheApp />
 </Sentry.TouchEventBoundary>
 ```
 
-```javascript
+```javascript{tabTitle:HOC}
 Sentry.withTouchEventBoundary(App, { maxComponentTreeSize: 15 });
 ```
 
@@ -103,7 +102,7 @@ Sentry.withTouchEventBoundary(App, { maxComponentTreeSize: 15 });
 
 `ignoreNames`
 
-: _Array<string | RegExp>, Accepts strings and regular expressions_. (New in version 1.7.0) 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.
+: _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.
 
 ## Minified Names in Production