How to use reactotron-react-native - 10 common examples

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

if (__DEV__) {
    const scriptURL = NativeModules.SourceCode.scriptURL;
    const scriptHostname = scriptURL.split('://')[1].split(':')[0];
    Reactotron
        .configure({ host: scriptHostname })
        .useReactNative()
        .use(reactotronRedux())
        .use(sagaPlugin())
        .connect();
    // Running on android device
    // $ adb reverse tcp:9090 tcp:9090
    Reactotron.clear();
    console.warn = Reactotron.log;
    console.log = Reactotron.log;
    console.disableYellowBox = true;
}

import { NativeModules } from 'react-native'

let createStore = reduxCreateStore
let sagaMiddlewarePlugins

if (global.__DEV__) {
  const scriptURL = NativeModules.SourceCode.scriptURL
  const scriptHostname = scriptURL.split('://')[1].split(':')[0]

  Reactotron.configure({ name: 'uPortMobile', host: scriptHostname })
    .useReactNative()
    .use(sagaPlugin())
    .use(reactotronRedux())
    .connect()
    .clear()
  const sagaMonitor = Reactotron.createSagaMonitor()
  sagaMiddlewarePlugins = { sagaMonitor }
  createStore = Reactotron.createStore

  console.tron = Reactotron
}

// const logMiddleware = (store) => (next) => (action) => {
//   console.log(action.type)
//   return next(action)
// }
let composeEnhancers
if (typeof window !== 'undefined') {
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
} else {
  composeEnhancers = compose
}

// configure reactotron
      Tron.configure({
        name: this.config.name || require("../../../package.json").name,
        host: this.config.host,
      })

      // hookup middleware
      Tron.useReactNative({
        asyncStorage: this.config.useAsyncStorage ? undefined : false,
      })

      // ignore some chatty `mobx-state-tree` actions
      const RX = /postProcessSnapshot|@APPLY_SNAPSHOT/

      // hookup mobx-state-tree middleware
      Tron.use(
        mst({
          filter: event => RX.test(event.name) === false,
        }),
      )

      // connect to the app
      Tron.connect()

      // Register Custom Commands
      Tron.onCustomCommand({
        title: "Reset Root Store",
        description: "Resets the MST store",
        command: "resetStore",
        handler: () => {
          console.tron.log("resetting store")
          clear()

Tron.useReactNative({
        asyncStorage: this.config.useAsyncStorage ? undefined : false,
      })

      // ignore some chatty `mobx-state-tree` actions
      const RX = /postProcessSnapshot|@APPLY_SNAPSHOT/

      // hookup mobx-state-tree middleware
      Tron.use(
        mst({
          filter: event => RX.test(event.name) === false,
        }),
      )

      // connect to the app
      Tron.connect()

      // Register Custom Commands
      Tron.onCustomCommand({
        title: "Reset Root Store",
        description: "Resets the MST store",
        command: "resetStore",
        handler: () => {
          console.tron.log("resetting store")
          clear()
        },
      })

      Tron.onCustomCommand({
        title: "Reset Navigation Store",
        description: "Resets the navigation store",
        command: "resetNavigation",

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

Reactotron.configure({ name: 'MDroid' }) // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reactotronRedux())
  .connect(); // let's connect!

console.tron = Reactotron;

import Reactotron from 'reactotron-react-native';

if (__DEV__) {
  // __DEV__ is a global variable that returns true if user is emulating
  // the app in an develop environment
  // So, everything that is within this scope will not run in production environment.

  const tron = Reactotron.configure()
                  .useReactNative()
                  .connect();

  // we are getting the global variable `console` and creating new property called tron
  // so we can call this command now in order to use Reactotron for debugging tool
  console.tron = tron;

  // cleaning the timeline every moment that we refresh our application
  tron.clear();
}

/* eslint-disable no-console */
import Reactotron, { asyncStorage } from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import apisaucePlugin from 'reactotron-apisauce';
import sagaPlugin from 'reactotron-redux-saga';

import Config from '.';

Reactotron.configure({
  name: 'Thinger.io',
  // host: '192.168.31.161',
})
  .useReactNative()
  .use(asyncStorage())
  .use(apisaucePlugin())
  .use(reactotronRedux())
  .use(sagaPlugin());

if (Config.useReactotron) {
  Reactotron.connect().clear();
  console.tron = Reactotron;
} else {
  console.tron = console.log;
}

import sagaPlugin from 'reactotron-redux-saga'

  // https://github.com/infinitered/reactotron for more options!
Reactotron
  .configure({ name: 'Chain React App' })
  .useReactNative()
  .use(reduxPlugin({ onRestore: Immutable }))
  // register the redux-saga plugin so we can use the monitor in CreateStore.js
  .use(sagaPlugin())

if (Config.useReactotron) {
  // let's connect!
  Reactotron.connect()

  // Let's clear Reactotron on every time we load the app
  Reactotron.clear()

  // Totally hacky, but this allows you to not both importing reactotron-react-native
  // on every file.  This is just DEV mode, so no big deal.
}

console.tron = Reactotron

import Config from './debug-config'

if (Config.useReactotron) {
  Reactotron
    .configure({
      // host: '10.0.3.2' // default is localhost (on android don't forget to `adb reverse tcp:9090 tcp:9090`)
      name: 'Ignite JHipster App' // would you like to see your app's name?,
    })
    .setAsyncStorageHandler(AsyncStorage)
    .useReactNative({ asyncStorage: false })
    .use(reduxPlugin({ onRestore: Immutable }))
    .use(sagaPlugin())
    .connect()

  // Let's clear Reactotron on every time we load the app
  Reactotron.clear()

  // Totally hacky, but this allows you to not both importing reactotron-react-native
  // on every file.  This is just DEV mode, so no big deal.
  console.tron = Reactotron
} else {
  const noop = () => undefined
  // attach a mock so if things sneaky by our __DEV__ guards, we won't crash.
  console.tron = {
    configure: noop,
    connect: noop,
    use: noop,
    useReactNative: noop,
    clear: noop,
    log: noop,
    logImportant: noop,
    display: noop,

// Reactotron.configure({  host: 'localhost', name: "myInvestor" })
  // Do adb reverse tcp:9090 tcp:9090
  Reactotron
    .useReactNative()
    .use(reduxPlugin({ onRestore: Immutable }))
    .use(sagaPlugin())
    .connect(
      { 
        enabled: true,
        host: 'localhost',
        port:9090
      }
    );

  // Let's clear Reactotron on every time we load the app
  Reactotron.clear();

  // Totally hacky, but this allows you to not both importing reactotron-react-native
  // on every file.  This is just DEV mode, so no big deal.
  console.tron = Reactotron;
}