No connection reactotron / react-native

Question

I try to debug an application with Reactotron in a (IOS) React Native project but there is "No Activity" when I run my application.

I work with react-native 0.55.4, reactotron 2.1.0 (same in my package.json)

TimeLine Reactotron

My reactotronConfig.js

index.js file where reactotron is imported

reactotron in my package.json

Answer 1

You have to do the following:

1. enter on CLI: adb reverse tcp:9090 tcp:9090
2. add this to a file (e.g lib/Reactotron.js):

import Reactotron, { asyncStorage } from 'reactotron-react-native';
Reactotron
    .configure() // controls connection & communication settings
    .useReactNative(asyncStorage()) // add all built-in react native plugins
    .connect();

3. import the File in your app.js:

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

Note: If you wan't to use host Prorperty inside of configure(), be sure to use 127.0.0.1. In my case other IP (even if local like 192.x.x.x) doesn't work.

After that, you connection should work, and you can use Reactotron like described in the Docs.

---

HINT:

For Linux & Mac, you can add this to package.json (script-section) (adjust the path & call of your reactotron-app to your needs):

"scripts": {
...
    "reactotron": "adb reverse tcp:9090 tcp:9090 && /opt/Reactotron/reactotron-app",
...
}

Answer 2

I did this adb reverse tcp:9090 tcp:9090 that I got from Suther and yarn start --reset-cache and it worked.

Answer 3

First of, you are not assigning the configured Reactotron object to your console.tron value. You need to do something like this:

console.tron = Reactotron.configure({ ...

Looking at your reactotronConfig.js file I notice that you are sending it to localhost. This will only work when running on the simulator (not sure if that is what you are doing).

If you want to run it on a device, you will need to give it your packager's ip address. A neat way of doing that is to use the following code:

import { NativeModules } from 'react-native';

let packagerHostname = "localhost";
if (__DEV__) {
 const scriptURL = NativeModules.SourceCode.scriptURL;
 packagerHostname = scriptURL.split("://")[1].split(":")[0];
}

const reactotron = Reactotron.configure({
  name: "myAPPILOC",
  host: packagerHostname
});

console.tron = Reactotron;

Answer 4

Please enable debug mode ( Press ⌘+D on iOS simulator, ⌘+M on Android emulator, or shake real devices). Then kill app and restart app.

I hope it's help

Answer 5

What I can recommend and what has worked for me is to install these version packages:

 "reactotron-react-native": "3.5.0",
    "reactotron-redux": "3.1.0",

Then you will need to configure your store accordingly:

import {createStore, applyMiddleware, compose, combineReducers} from 'redux';

const appReducer = combineReducers({
  ...reducers,
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));
const store = createStore(appReducer, composeEnhancers(middleware, Reactotron.createEnhancer()));

Now of course, the above is my setup but you will need to tweak yours accordingly, the main point being follow the Configuration as documented here: https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md

Answer 6

Sometimes the reason of the reactotron is waiting for connection is because of the port has been occupied, we can check and kill the process who use it.

`lsof -i:9090'