Note on connecting to React Native simulator.

[meatnordrink]

Standalone react-devtools frequently has trouble connecting to a running simulator instance, as noted in the docs, on the GH repo, and on SO.

Often, it is necessary to run adb reverse tcp:8097 tcp:8097 to get standalone react-devtools to connect to a running simulator instance. It would be helpful to note this in the docs here, rather than forcing users to search the GH docs, and SO. (Also, a note - the GH docs state that this is only necessary when not using a local emulator, but this is not the case, as evidenced by the aforementioned SO question, where the user notes using an emulator, and in my own experience - I must do this to get react-devtools to connect to an Android Studio emulator, which I assume would count as a local emulator.)

[facebook-github-bot]

Hi @meatnordrink!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	c845c16
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/62dfc797d14e3e00090823b7
😎 Deploy Preview	https://deploy-preview-3214--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[cortinico]

as noted in the docs, on the GH repo

Could you link the docs you're referring to?

[meatnordrink]

@cortinico - Sure! Thanks for taking a look at this. Here's what I was referring to:

https://github.com/facebook/react/tree/main/packages/react-devtools

...it should connect to your simulator within a few seconds. (If this doesn't happen automatically, try reloading the React Native app.)
and
If you're not using a local simulator, you'll also need to forward ports used by React DevTools:

I was also looking at the React Native Debugging section; the only relevant bit they say to this is

It should connect to your simulator within a few seconds.

Looking at these, I'm realizing they're not as explicit references to linking failures as I'm remembering them as; there was probably some lingering frustration around the amount of time spent getting them to connect (and the solution being in conflict with that first documentation link, where it says it's only necessary when not using a local emulator) when I wrote this, so perhaps I was seeing more explicit references to difficulties than they really are (e.g., perhaps I was interpreting "should" more significantly than it was meant in the second example). My apologies if that's the case.

Looking at them again, though, with the SO issue, it does seem to suggest that getting them to link is a common problem. And the fact that when I asked our (admittedly new and small) React-Native mobile team how to connect them, no one had been able.

[cortinico]

And the fact that when I asked our (admittedly new and small) React-Native mobile team how to connect them, no one had been able.

The reason why I've asked more references is because I'm aware of how emulators on Android 12 seems to restrict port forwarding and users have to adb reverse more often. I'm wondering if you're facing this issue only on a Android 12 emulator or not.

As a rule of thumb, I think we can include this instruction, but maybe inside a :::note block as a troubleshooting suggestion?

[meatnordrink]

@cortinico Ah, I didn't know that! Thank you for enlightening me! I am indeed using an Android 12 simulator (Pixel 5 API 31, Android 12.0 Google APIs).

I made it a > note: block, per your suggestion. I also added a bit about it being particular to Android 12. I personally think that's great to include, because it sort of names the difficulty, rather than just making it seem like the React devTools are randomly buggy. I think that can increase developer confidence and peace of mind - sort of make it less likely we're in a mindset of just waiting for it to randomly stop working again - and make independent debugging more likely in the future, by putting it in developer's heads that trying a different simulator may address the issue.

This does result in two >note: blocks in a row; perhaps less than ideal. I'm open to other formatting suggestions; feel free to edit it to something you think flows/looks better.

Thank you again for the insight, and for looking at this!

[leotm]

good stuff

[meatnordrink]

Thanks @leotm ; suggestion accepted!

[meatnordrink]

Looks good, @cortinico ; suggestion applied!