Add troubleshooting section to React Native Annotate Components page (#11462)

Author: krystofwoldrich

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

@@ -71,6 +71,15 @@ 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.
 
+## Troubleshooting
+
+### Missing Component Names 
+
+If component names are missing from reported events, it could be because the annotations we not added to the JS bundle. To troubleshoot this:
+
+1. Check to see if the JS bundle generated by Metro has annotations by text searching for the `data-sentry-component` key in the bundle.
+2. If annotations are missing and you are using React Native without frameworks, check that `config.transformer.babelTransformerPath` is set before passing it to `withSentryConfig(config)`. If you are Expo user using `const config = getSentryExpoConfig(__dirname)` make sure the `config.transformer.babelTransformerPath` set by the `getSentryExpoConfig` is not overwritten.
+4. Use `export SENTRY_LOG_LEVEL=debug` to enable debug logs to verify that Sentry detected the default transformer and that the Sentry Babel Transformer was executed.
 ## Next Steps:
 
 - Lear more about Sentry's React Native [Metro bundler plugin](/platforms/react-native/manual-setup/metro/).