Automatically add `@sentry/babel-plugin-component-annotate` using `withSentry`

[krystofwoldrich]

Description

@sentry/babel-plugin-component-annotate plugin exists as a standalone package and as such can be added to babel.config.js.

• This introduces another config file Sentry should be added.
• As well as a new place @sentry/wizard should update.
• Gives RN SDK no control over the file which will be annotated.

Web bundler plugins include the babel plugin in their config (https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/5e53faa75d4b263cb604f8c2c5ee53cae31a6941/packages/bundler-plugin-core/src/index.ts#L621) and filter the files on which the plugin is executed. RN SDK can do the same using babelTransformerPath option of Metro. We can create a middleware which only adds the plugin for selected files (exclude node_modules for example).

• No new Sentry config file
• No changes to Wizard (only enabled flag)
• RN has control over the execution

withSentry(metroConfig, { reactComponentAnnotation: { enabled: true } })

• part of https://github.com/getsentry/sentry-react-native/issues/2703