feat(react-native): Add ignoredComponents option (#12684)

Co-authored-by: Alex Krawiec <[email protected]>

Author: krystofwoldrich

docs/platforms/react-native/integrations/component-names.mdx

@@ -71,6 +71,34 @@ Here's what the resulting node would look like if your bundler had applied the p
 
 The Sentry browser SDK will pick off the value from these `data` attributes and collect them when your components are interacted with.
 
+## Options
+
+By default only components located in your project (outside of `node_modules`) are annotated. To avoid annotating other components, use the `ignoredComponents` option. The ignored components won't have `data-sentry-*` annotations added. 
+
+```javascript {tabTitle:React Native} {filename:metro.config.js}
+const { getDefaultConfig } = require("@react-native/metro-config");
+const { withSentryConfig } = require('@sentry/react-native/metro');
+
+const config = getDefaultConfig(__dirname);
+module.exports = withSentryConfig(config, {
+  annotateReactComponents: {
+    ignoredComponents: ['MyCustomComponent']
+  }
+});
+```
+
+```javascript {tabTitle:Expo} {filename:metro.config.js}
+// const { getDefaultConfig } = require("expo/metro-config");
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
+
+// const config = getDefaultConfig(__dirname);
+const config = getSentryExpoConfig(__dirname, {
+  annotateReactComponents: {
+    ignoredComponents: ['MyCustomComponent']
+  }
+});
+```
+
 ## Troubleshooting
 
 ### Missing Component Names