Reactotron: Expo.io setup

[ecerroni]

If anyone made Reactotron work with Expo/Exponent do you mind sharing here the full exponent setup?

If is it really working it would be useful for further reference to have it included in the readme

Thanks

[skellock]

I'll add another demo project and some docs.

Thx for the suggestion.

I had tested it with 15.x.x of expo and reactotron 1.9.x with no issues. I remember looking around at their Expo object and seeing some interesting stuff in there that people might want to see, so I was considering an expo plugin, but it's lower priority as I'm not using it day-to-day.

[ecerroni]

Thanks @skellock
I am struggling connecting the 2 so that I was wondering what's wrong in my setup.

Looking forward to the new demo project.

[skellock]

Oh ya? Hmm... lemme check real quick here to see if something went wonky with either library updating.

If you're using a device to connect you'll need to make sure it's on the same network. We don't have the ability to tunnel thru expo's own connection to it's packager (ngrok or otherwise).

I'd love for that to be a thing.

A zero-configuration setup of Reactotron would make me giddy.

[ecerroni]

Yep, you're right. I'm using the expo tunnel. Actually that's the only way I used expo so far.

I also tried with genymotion and got no results either.

So are you suggesting to set on Expo to set Host to LAN and Protocol to 'http` and then set the IP in the config file?

Something similar to:

    .configure({host: `${EXPO_IP}`)
    .connect();

I'm going to give it a try.

EDIT: I forgot to ask about this:

Finally, we import this on startup in index.ios.js and index.android.js on line 1:

import './ReactotronConfig'

There is no index.android.js in Expo afaik

[inyono]

I got it to work with CRNA (Expo should be similar):

• Get host of the packager
  ```.js
  // host.js
  import { NativeModules } from 'react-native';
  import url from 'url';

const { hostname } = url.parse(NativeModules.SourceCode.scriptURL);

export default hostname

* Configure reactotron:
```.js
// reactotron.js
import Reactotron from 'reactotron-react-native'

import host from './host'

Reactotron.configure({ host }).useReactNative().connect();

• Init reactotron in dev:
  ```.js
  // App.js
  if (__DEV__) {
  require('./helpers/reactotron');

  const Reactotron = require('reactotron-react-native').default;
  Reactotron.log('Hello world');
  }

const App = () => {
// ...
}

export default App
```

[skellock]

thank you!

[serranoarevalo]

@ecerroni Where you able to make it work?

[ecerroni]

@serranoarevalo
Unfortunately not. Give it a second try after above comments with no success.

[skellock]

Where are y'all getting stuck?

I just tried with Expo 18 again and it seems ok. Here's what I did:

• Setup a new project with Expo 18.
• setup my URL to exp://localhost:19000
• yarn add --dev reactotron-react-native
• updated main.js to look like this

import Expo from 'expo'
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Reactotron from 'reactotron-react-native'

Reactotron.configure().useReactNative()

class App extends React.Component {
  componentDidMount () {
    Reactotron.connect()
  }

  render () {
    return (
      <View style={styles.container}>
        <Text>Hello Reactotron!</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }
})

Expo.registerRootComponent(App)

If this doesn't work for you lemme know.

[skellock]

I just created https://github.com/skellock/reactotron-plus-expo if you're interested.

[serranoarevalo]

@skellock Thank you man! I was doing the Reactotron.connect() on a separate file following the installation guide the Readme, did on the componentDidMount and worked.

[ecerroni]

Me too had it on a separate file. That was the problem.

Thank you for putting the example together.

[skellock]

Totally my fault. My docs aren't consistent. Haha.

[alexhafner]

So this works for me (with a separate Reactotron config)

Expo 18 and iOS Simulator - out of the box
Expo 18 and remote device: Switch Expo-Cog setting "Host" to "LAN" and use @inyono 's great snippets above to set the host address; Expo/Reactotron/remote device on the sam LAN.

[eashish93]

Though the issue is closed, but after hours of debugging, I got it working on expo 24 via this configuration:

Reactotron
    .configure({lan: 'exp://localhost:19000'})  
    .useReactNative()
    .use(reduxPlugin())
    .connect();

[yordis]

@inyono solution works like a champ 💃

[GfxKai]

I've hit a brick wall trying to get Reactotron up and running with Expo 25 and iOS Simulator... have tried all of the suggested url/config variations as well as the suggested snippets, alas Reactotron just doesn't connect :(

Can anyone confirm it working with the current release (expo 25 + reactotron 1.15.0 + reactotron-react-native 2.0.0-alpha.1)?

EDIT: Just downgraded to 1.14.0 and works as expected!

[ecavalcanti]

+1

[nextriot]

It works out of the box for me using @inyono's setup.

Expo 25 + reactotron 2.0.0 alpha + reactotron-react-native 2.0.0 alpha.

@GfxKai why are you trying to use the standalone 1.15 app with reactotron-react-native 2.0.0 alpha? Use the 2.0.0 alpha standalone app. You need to ensure the standalone app you're using and rn package match.

[yordis]

Let me share what I did, it is what @inyono suggested but I am also doing some fancy things around reactotron itself.

I am thinking on creating a library for these stuff but until then, here is my solution

// ./src/utils/reactotron.js

import url from "url"; // npm install url or yarn add url
import { NativeModules } from "react-native";
import Reactotron from "reactotron-react-native";
import { reactotronRedux } from "reactotron-redux";
import sagaPlugin from "reactotron-redux-saga";

const noop = () => {};

const configure = (appName, tron) => {
  const { hostname } = url.parse(NativeModules.SourceCode.scriptURL);

  tron
    .configure({ name: appName, host: hostname })
    .useReactNative()
    .use(reactotronRedux())
    .use(sagaPlugin())
    .connect();

  tron.clear();
};

export const setupReactotron = (appName, enabled = false) => {
  if (enabled) {
    configure(appName, Reactotron);
  }

  return {
    tron: Reactotron,
    withReactotron(withCallback, withoutCallback = noop) {
      // there is a reason why I am doing this, short answer, development vs production code
      return enabled ? withCallback(this.tron) : withoutCallback();
    }
  };
};

So far this util file will allow me to create some object that exposes withReactotron function.

How to use the util class

// file: ./src/reactotron.js 

import { setupReactotron } from "./utils/reactotron";
// just load whatever config file you have in your project, or maybe not.
import Config from "./config";

/*
Notice that I am using Config.useReactotron , this will allow me to call
withReactotron without worry about the environment I am running on so my code
do not suffer from if statements.

You could replace Config.useReactotron with !!__DEV__ if you want but I prefer
to use some config file.
*/
const reactotron = setupReactotron("Name of your App", Config.useReactotron);

export default reactotron;

How to use your reactotron instance

From now one, use your ./src/reactotron.js for do logging and stuff.

import Reactotron from "./reactotron"; // whatever path to YOUR reactotron file

Reactotron.withReactotron(tron => {
    // notice that I am using tron that is passed to this function.
   // because the withReactotron will never run if you disable reactotron
   // you do not need to worry about this function scope.
    tron.display({
      name: "PURGE",
      preview: "Reducer Version Change Detected",
      important: true,
      value: {
        "Old Version:": localVersion,
        "New Version:": reducerVersion
      }
    });
    // or do whatever else you want with tron instance
  });

I hope you find this useful, I like that I do not have to add if conditions everywhere in my code, it is a little more work but it pay off at the end of the day.

@skellock to be honest, I would love to see this approach of using Reactotron (meaning, withReactotron function) in the library itself. I am not a big fan of adding if statements everywhere for a code that will be no used on production. This way it is easier to remove code on build time as well, the AST will give you the full block that depends of the reactotron so you could remove it from the final AST.

[skellock]

Ya, 2.x and 1.x aren’t compatible. If you update the libs you’ll need the newest app of github releases too. I’ve reworked the networking setup, so the 2.x app requires the 2.x libs.

[yordis]

@skellock could you point me to the changes I need to make so I can update the comment? but the functionality of using functions over if statements for reactotron still handy, unless you remove how it works right now 😄

[lichin-lin]

I got issue that my reactotron desktop app just won't receive any msg when I run the project with expo.
repo: https://github.com/lichin-lin/rn-reactotron
I just setup up the connection in App.js file: https://github.com/lichin-lin/rn-reactotron/blob/master/App.js

using create-react-native-app to setup the project
with reactotron desktop app version: 1.15.0
reactotron-react-native version: ^2.0.0-alpha.1

[skellock]

Version 2.x and 1.x aren't incompatible. Make sure you're using the the same major version. If you want to upgrade the libs to 2.x, then upgrade the app to 2.x.

[hsavit1]

I was finally able to get mine to work after I upgraded to 2.0 and using some of inyono's answer

[devcenter]

I also worked it out expo to reactotron, by
putting host ip address and reactotron port 9090
Reactotron.configure({ host: '192.168.1.43', port: 9090, })
and on Expo
Host: localhost, Development Mode: true

[cabe56]

Just got this working with Expo. The only change I had to make to the setup instructions in the docs was to add {host: <my local ip>}.

No need to call connect() in App.js; works fine when called from the config file.

[cdcv]

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!

[MuhammadUsman786786]

@skellock solution works for me.

[16oh4]

@cdcv

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
}