Can't get Reactotron to Connect to Expo App

[cdcv]

Title says it all. When I run basic test app on iOS simulator, I get 'Reactotron Configured' in the console log, but Reactotron app does not connect on Mac. Have tried a lot of configuration variants etc based on prior posts. Currently, trying to do something very basic... just get a bare expo react native app to run on a simulator and connect to Reactotron. I've downloaded the latest version, and followed the react native install instructions (many times).

Currently using the simplest config options: in ReactotronConfig.js: import Reactotron from 'reactotron-react-native' Reactotron .configure({ name: "React Native Demo", }) // controls connection & communication settings // .useReactNative() // add all built-in react native plugins .connect() // let's connect!

in App.js: if(DEV) { import('./ReactotronConfig').then(() => console.log('Reactotron Configured')) }

from package.json: "reactotron-react-native": "^3.6.4" "expo": "^33.0.0", "react": "16.8.3",

Thanks for your help.

[nzrubin]

same. I'm on windows running expo using an android simulator. How many use expo? what is the point of reaction if it cannot run on Expo

[GollyJer]

When using Expo you have to set the host url to your local machine's ip address.

// ReactotronConfig.js:
import Reactotron from 'reactotron-react-native'

Reactotron
    // Your real ip address 👇
  .configure({ host: '192.168.0.100' })
  .useReactNative() 
  .connect()

[jaho-design]

Same problem here with lastest expo version. I try to configure host but didn't work

// package.json "dependencies": { "expo": "^34.0.1", "react": "16.8.3", "react-dom": "^16.8.6", "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz", "react-native-web": "^0.11.4" }, "devDependencies": { "babel-preset-expo": "^6.0.0", "reactotron-react-native": "^3.6.4" },

[pkail]

On Mint 19.1/Expo 33 My app loads and runs correctly but Reactotron doesn't react, either with or without host IP as suggested above. Such a pity! It looked good in the presentation.

[GollyJer]

@jaho-design @pkail

In Reactotron go to File > Settings and make sure the port being used is an open port on your computer. I think it uses 9090 by default and I was already using that port. I set mine to 9999.

Then feel free to use this file I put together.

import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

const reactotron = (host, port, monkeyPatchConsoleLog) => {
  Reactotron.configure({ host, port: Number(port) })
    .useReactNative({ errors: true, editor: true })
    .use(reactotronRedux())
    .connect()
    .clear();

  if (monkeyPatchConsoleLog === 'true') {
    // Patches console.log output.
    // https://gist.github.com/jperelli/d8728bf1916e07a79aed1bc129b52ec9
    const consoleLog = console.log;
    console.log = (...args) => {
      consoleLog(...args);
      Reactotron.log(args.length > 0 ? args : '');
    };
  }

  console.log('--=== Reactotron Loaded ===--');

  return Reactotron;
};

export default reactotron;

With this file anyone on my team can choose to use Reactotron via .env settings.

# Dev Tools
USE_REACTOTRON = true
REACTOTRON_HOST = '192.168.10.35'
REACTOTRON_PORT = '9999'
REACTOTRON_MONKEYPATCH_CONSOLE_LOG = true

And calling it looks like this.

if (__DEV__) {
    if (USE_REACTOTRON === 'true') {
      const reactotron = require('./devTools/reactotron').default;
      reactotron(REACTOTRON_HOST, REACTOTRON_PORT, REACTOTRON_MONKEYPATCH_CONSOLE_LOG);
    }
}

You can then pass reactotron.createEnhancer() into redux to also track redux state.

[pkail]

Thanks very much for your help. I still get no reaction from Reactotron, unfortunately.

File > Settings and make sure the port being used is an open port on your computer. There is no 'File>Settings', but when I click File>Preferences I get a config file, which I set to: { "commandHistory": 500, "server": { "port": 9999 } } I'm wondering if you are using an older version of Reactotron, which actually works.

[GollyJer]

Man that sucks.

There is no 'File>Settings', but when I click File>Preferences

I'm on Windows. You must be on Mac. Same result though. I'm not sure how else to try and help. The only thing I can think of is some sort of firewall issue where the port you set Reactotron to listen on is being blocked. Doesn't seem like that would be the case with a local app talking to a local server. 🤷‍♀️

Sorry. I'm out of ideas. ☹

[pkail]

I'm on Linux. I'm not using a firewall. If I use a different port from Expo then Reactotron doesn't connect. Conversely, if I use the same port, Expo doesn't run either. I have tried about twenty different versions of the config file. I have tried it with and without the port, and with and without the IP address.
It's such a pity that the people who wrote this can't put some documentation on their website to explain how it's supposed to work. Thanks again for your help.

[GollyJer]

Just to check one final thing... the ip address you're using is your local machine LAN address, correct? (sorry if that's a stupid question).

[pkail]

Yes it is. I have figured out the problem. It either doesn't work, or works very erratically, on Android, but works fine with exactly the same configuration on iOS. The reason, I think, is that gnirehtet interferes with it in some way. Either that, or my set-up (having Expo connect on the LAN, but actually using reverse tethering via USB) confuses it.

Thanks again for your help.

[GollyJer]

Nice! Glad you got it working. 🎉 Yeah I bet the reverse tethering is the issue. Cheers!

[Juanperezc]

Thank you @GollyJer

[AlmondBro]

Hi all,

I had the same issue where I could not connect Reactotron to Expo. I followed the instructions referenced here by @16oh4 and the connection bridged successfully afterwards.

Would someone please post a current method for how to get Reactotron working with Expo? Currently, I'm not able to get it to work. That's very unfortunate as it looks like a great tool, and would like to use it... guessing many others are having similar problems.

If you would take a minute, please include all of the required setup steps... they may not be obvious to a first- timer. For example: 0) What are the correct settings for: a) Inside Expo... tunnel, lan, local (or will they all work)? b) Inside ReactotronConfigure.js... if setting host and port... where should the numbers come from? There are several host and port numbers related to Expo coding... which ones to use?

1. does ReactotronConfigure.js settings _drive_ what host and port will be used, or do they need to _match_ those that Expo indicates?

2. In Reactotron desktop, do the settings need to be set to match Expo, or ReactotronConfigure.js, or should they be pulled automatically?

Thank you for your help!

First do '$yarn add url' in your terminal then make a ReactotronConfig.js like so:

import Reactotron from 'reactotron-react-native';

import { NativeModules, AsyncStorage } from 'react-native';
import url from 'url';

const {hostname} = url.parse(NativeModules.SourceCode.scriptURL);
console.log(hostname); // mine was 192.168.1.2

Reactotron
.setAsyncStorageHandler(AsyncStorage)
.configure({host: hostname})  
.useReactNative()
.connect();

Then at the top of App.js (starting at line #1):

if(__DEV__) {
  import('./ReactotronConfig').then(() => {
    console.log('Reactotron Configured')
    
  })
}

**This worked for me using Expo SDK 37 and Android Emulator from Android Studio.

My package.json for anyone else searching this on the web:**

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/native": "^5.1.4",
    "@react-navigation/stack": "^5.2.9",
    "expo": "~37.0.3",
    "react": "~16.9.0",
    "react-devtools": "^4.6.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-navigation": "^6.4.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-web": "~0.11.7",
    "react-redux": "^7.2.0",
    "reactotron-react-native": "^5.0.0",
    "redux": "^4.0.5",
    "url": "^0.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

Originally posted by @16oh4 in https://github.com/infinitered/reactotron/issues/417#issuecomment-609034185

[AndreBordignon]

@JuanDavidLopez95 It worked for me, thank you!!

[finnmerlett]

If you see the line adb server version (41) doesn't match this client (39) when running adb reverse tcp:9090 tcp:9090, you've probably got conflicting versions of adb causing issues. This is probably /usr/bin/adb is not pointing to the new adb installed with Android Studio (/home/<username>/Android/Sdk/platform-tools/adb). I had this trying to run android on debian linux, and it got me stuck for days. Crucially, simply adding the correct (Android Studio) adb as an alias in your bashrc isn't enough, because the old version still gets called somewhere along the line, messing things up.

What eventually fixed it for me was renaming the /usr/bin/adb symlink to /usr/bin/adb_old, then making a new symlink pointing to the Android Studio adb: cd /usr/bin && sudo ln -s /home/<username>/Android/Sdk/platform-tools/adb adb. Once I had done this and restarted the steps as instructed by the other comments above, Reactotron finally connected! Hope this helps someone with the same problem as me when they come looking for solutions!

PS. don't forget to run the expo start command with the localhost flag if that's how you've configured reactotron (default for the ignite template): expo start --localhost --android

[adriano2teixeira]

import * as React from "react"; import { View, Text } from "react-native"; import Reactotron from "reactotron-react-native"; import StorybookUIRoot from "./storybook"; if (DEV) { import("./ReactotronConfig"); }

Reactotron.onCustomCommand({ command: "Storybook", handler: () => {}, // Optional settings title: "Taggle StoryBook UI", // This shows on the button description: "use this custom command to turn storybook ui 'on' and 'off'", // This shows below the button });

const App = () => { const [showStorybook, setShowStorybook] = React.useState(false); const changeStoryBookSwitch = React.useCallback(() => { setShowStorybook(showStorybook ? false : true); }, []); Reactotron.onCustomCommand("Storybook", changeStoryBookSwitch);

return ( <> {showStorybook ? ( <StorybookUIRoot /> ) : ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }} > <Text>Hello React native</Text> </View> )} </> ); };

export default App;

[karlhorky]

Opened a PR that should close this issue here: #1257

[byteab]

import Reactotron from 'reactotron-react-native'
import { NativeModules } from 'react-native';

const hostname = NativeModules.SourceCode.scriptURL
  .split('://')[1] // Remove the scheme
  .split('/')[0] // Remove the path
  .split(':')[0]; // Remove the port

Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure({ host: hostname })
  .useReactNative()
  .connect()

thanks @karlhorky

[karlhorky]

@cdcv @frankcalise now that this is documented, maybe this issue can be closed?

[santimuller]

Hi guys! i update expo to SDK 49 and with this config, dont work anymore :'( If i use SDK 47, 48 Works, anyone else has this problem in SDK 49?

import Reactotron from 'reactotron-react-native'
import { NativeModules } from 'react-native';

const hostname = NativeModules.SourceCode.scriptURL
  .split('://')[1] // Remove the scheme
  .split('/')[0] // Remove the path
  .split(':')[0]; // Remove the port

Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure({ host: hostname })
  .useReactNative()
  .connect()

thanks @karlhorky

[santimuller]

resolved! https://github.com/infinitered/reactotron/issues/1305

[joshuayoes]

This has been fixed in [email protected], update your app to this package or above and remove host from your Reactotron.configure call if you have it set

[karlhorky]

@joshuayoes amazing, this is great!

Does this work out of the box with Expo?

If so, then my Expo instructions changes from https://github.com/infinitered/reactotron/pull/1257 can be reverted, docs/plugin-docs/quick-start-react-native.md is the new location of the file:

• https://github.com/infinitered/reactotron/blob/beta/docs/plugin-docs/quick-start-react-native.md#:~:text=If%20you%27re%20using%20Expo%2C%20you%20will%20also%20need%20to%20configure%20the%20host%3A