Create-react-native-app: React-devtools not working

[florianpeninon]

Hi everyone,

I usually use react-devtools to help me navigate my react project and inspect what is going on in my project. It's a really helpful piece to debug.

Is there a way to have it working on the boilerplate without much efforts? And are you planning to implement it out of the box?

[anp]

I just created a fresh project and followed the instructions here: https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md

1. Created a fresh CRNA project
2. yarn add --dev react-devtools
3. added "devtools": "react-devtools" to my package.json's scripts section
4. yarn run ios, followed by yarn run devtools in a separate tab once the app had opened

And it seems to be mostly working:

Can you provide more details about what you tried and what didn't work? It may be a good idea to refer to the issue template for information that normally helps in debugging these issues.

If we can settle on a good set of steps to follow for getting this working, then I'd be very happy to add this to the user guide.

cc @gaearon

[florianpeninon]

I went through the same process on a freshly created project and the dev tool app stays on the Waiting for React to connect… screen.

My guess would be the fact that expo is serving on the port 19000 while the dev tool is listening to 8097.

[gaearon]

Which RN version does Expo use?

[florianpeninon]

@gaearon according to the docs (and if CRNA is using the latest SDK) it should run on 0.42.0.

[gaearon]

OK, this doesn't contain my React DevTools integration fix yet.
Please wait for these commits to land in a stable version:

• https://github.com/facebook/react-native/commit/7a3ab96d94073b22853992b5e0b3f8e26b8cfd51
• https://github.com/facebook/react-native/commit/934cd82941d2b4fa49e49517acd454a775fe94b8

Looks like they landed in v0.43.0-rc.0.
You can try applying https://github.com/facebook/react-native/commit/7a3ab96d94073b22853992b5e0b3f8e26b8cfd51 manually and check if it helps.

[epitaphmike]

The above updates worked great. Thanks @gaearon.
Just curious though, why aren't react-devtools part or CRNA by default. They seem like they should be available out of the box.

[anp]

@epitaphmike I'm not sure exactly what you mean -- those updates only went stable recently (less than 2 weeks ago, IIRC?), and I intend to release a new CRNA version in the next couple of days that includes them.

[anp]

@florianpnn @epitaphmike the new version of the CRNA template I released today includes RN 0.43, so this should all work. Let me know if you get a chance to try it, it'd be great to document in the user guide!

[epitaphmike]

I'll give it a run this weekend. Thanks for the work you've put into to
this project.
On Thu, Apr 20, 2017 at 11:04 PM Adam Perry [e-mail]
wrote:

@florianpnn https://github.com/florianpnn @epitaphmike
https://github.com/epitaphmike the new version of the CRNA template I
released today includes RN 0.43, so this should all work. Let me know if
you get a chance to try it, it'd be great to document in the user guide!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-community/create-react-native-app/issues/124#issuecomment-296032709,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AApXyPKOhC69nuaPhYHVyatcwnQxWh8oks5ryByxgaJpZM4Mrb5V
.

[gsklee]

I'm using [email protected] and this doesn't seem to work; situation is the same with what @florianpnn described, the devtool app stays on the "Waiting for React to connect…" screen and says its listening to 8097.

[anp]

@gsklee note that 0.45 isn't yet compatible with CRNA, I'm not surprised you're having issues there. We'll probably support that in a few weeks.

[gsklee]

@dikaiosune got it, thanks!

[florianpeninon]

@dikaiosune take the initiative to close this ticket if you think it shouldn't stay open. The last CRNA seems to work fine with the devtools.

[anp]

@florianpnn cool, thanks! Closing, but if you had to do anything special to get the devtools working let me know and we can document.

[gsklee]

@dikaiosune Okay, I think I've found out my problem. It works if I open the project with the iOS simulator (yarn run ios), but not when I open it with the Expo client (yarn start). Is it possible to make the devtools autoconnect when using the Expo client as well?

[brentvatne]

@gsklee - react-devtools with react-native only works in simulator currently. you can look into the setupDevtools() function in react-native and maybe modify it accordingly to work for you outside of the simulator: https://github.com/facebook/react-native/blob/29846283579a35abdd6a5e236c747736563fa200/Libraries/Core/Devtools/setupDevtools.js

[gaearon]

Maybe we can make both of these configurable. Try hardcoding your computer's IP there, and if it works, we can provide some way to override the setting.

[brentvatne]

This actually worked just fine for me on my Android device without making any changes. I don't have an iOS device handy but did a quick search through the react-native source and noticed that PlatformConstants.ServerHost isn't defined on iOS, so it will always use 'localhost' instead, which is why it only works in the simulator it seems. I think by just adding PlatformConstants.ServerHost to iOS this would work in most cases.

[thorny-thorny]

My solution: comment