How to get Redux DevTools working on a physical device in React Native JonnyBurger Follow Feb 2, 2019 · 3 min read

No wire, no simulator, just Redux DevTools over WiFi!

Chances are you are already using the remote-redux-devtools package. It allows you to use the Redux DevTools with React Native.

My configuration looks like this:

What this will do is inject the Redux DevTools into the Debugger:

This works great when developing in the simulator. Unfortunately, I find this technique does not work when developing on a device, which is what I prefer.

I have dug more into it and this is what I found. Instead of localhost , you want the Redux middleware to connect to the IP address of your computer, for example 192.168.1.15 . Actually, if you change it to that, it stops working in the simulator, so it should be dynamic based on if you are in the simulator or on device.

This is how I got this to work (uses Expo APIs, let me know if you know how to get the bundle URL in pure React Native):

Make sure to adapt the port number in the snippet above if you are not using 5678 for your Redux DevTools. Also make sure to not specify the port number, only the hostname , because otherwise the hostname defaults to localhost .

Viewing the Redux Store

With this technique, you don’t see the Redux Store at all in the React Native Debugger tab, but instead under http://remotedev.io/local/.

Yes, you are loading a website from the internet that shows your Redux Store on localhost. Not sure how that works, but it does.

Now you also don’t need to inject the Redux DevTools into The React Native Debugger anymore. In the postinstall script you can now add --injectdebugger=false — now the Redux DevTools and the React Native Debugger are in separate tabs.

Also, with this the Redux DevTools work even if you are not remote debugging! For me, when I enable ‘Debug Remote JS’, the app loads significantly slower, so now that I don’t have to use it, I save even more time.