Use React Components Names (Breadcrumbs, Replays)

[krystofwoldrich]

Description

Current TouchEvents implementation uses sentry-label, user-defined-label or displayName to record what element in the React components tree was interacted with.

We can enhance this by using React Component Names generated by @sentry/babel-plugin-component-annotate

Tasks

Beta Give feedback

1. Improve touch events breadcrumbs components tree #2863
   Platform: React-Native +1
   
2. Verify @sentry/babel-plugin-component-annotate works with RN (app builds, extra prop is available in runtime)
3. Link Components Stack to Source Code (touch breadcrumbs, jsx errors) #3289
   Platform: React-Native Type: Feature Request +2
4. Compare plugin data and improved RN components
5. If Babel plugin is needed add it to metro.config.js using withSentryConfig() (components names enabled by default)
6. Update TouchEvents to use Component Names when available
7. Add RN specific does explaining component names (how this plugin is part of withSentryConfig(), if used) (JS docs for reference)