React Native, cloned repo has Reactotron code and now I would like to use it but no connection

Question

So I cloned a React Native app from Github and noticed this package called Reactotron, what is that I wondered? I looked it up, it's like Redux DevTools, why not avail myself of its capabilities?

I downloaded Reactotron UI for Mac and I have refreshed my simulator various times and no connection.

This is my very first time even learning about this tool which sounds great.

This is the codebase where I saw Reactotron setup as the guys at InfiniteRed have suggested:

import Reactotron, {
  trackGlobalErrors,
  openInEditor,
  networking,
} from 'reactotron-react-native';
import {reactotronRedux} from 'reactotron-redux';

Reactotron.configure({
  name: 'AppName - Mobile',
})
  .useReactNative()
  .use(reactotronRedux())
  .use(trackGlobalErrors())
  .use(openInEditor())
  .use(networking());

//eslint-disable-next-line
if (__DEV__) {
  Reactotron.connect();
  Reactotron.clear();
  //eslint-disable-next-line
  debug = (title, data={}) =>
    Reactotron.display({
      name: title,
      value: data,
      preview: JSON.stringify(data).substr(0, 50),
    });
}

Is there anything missing in this code that can explain my lack of connection?

And there is nothing in the package.json file that provides a script to make a connection:

{
  "name": "AppName",
  "version": "3.0",
  "private": true,
  "scripts": {
    "start": "nps",
    "test": "nps setup",
    "build": "nps build",
    "setup": "nps setup && nps appcenter",
    "postinstall": "rm -f ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json"
  },
  "dependencies": {
    "appcenter": "1.2.0",
    "appcenter-analytics": "1.2.0",
    "appcenter-crashes": "1.2.0",
    "axios": "0.16.2",
    "date-fns": "1.29.0",
    "lodash": "4.17.4",
    "moment": "2.20.1",
    "payment": "2.3.0",
    "prop-types": "15.6.0",
    "react": "16.2.0",
    "react-native": "0.53.3",
    "react-native-autoheight-webview": "0.6.1",
    "react-native-calendar-events": "1.6.1",
    "react-native-device-info": "0.21.5",
    "react-native-exception-handler": "2.8.9",
    "react-native-image-progress": "1.0.1",
    "react-native-immediate-phone-call": "1.0.0",
    "react-native-input-scroll-view": "1.6.7",
    "react-native-keyboard-aware-scroll-view": "0.4.4",
    "react-native-keyboard-manager": "4.0.13-12",
    "react-native-material-buttons": "0.5.0",
    "react-native-material-dropdown": "0.5.2",
    "react-native-material-tabs": "3.5.0",
    "react-native-material-textfield": "0.10.0",
    "react-native-onesignal": "3.2.12",
    "react-native-popup-menu": "0.8.3",
    "react-native-sentry": "0.32.0",
    "react-native-size-matters": "0.1.0",
    "react-native-spinkit": "1.1.1",
    "react-native-splash-screen": "3.0.6",
    "react-native-svg": "6.3.1",
    "react-native-swipe-view": "https://github.com/jjd314/react-native-swipe-view",
    "react-native-vector-icons": "^6.4.2",
    "react-native-xcode-packager": "0.1.0",
    "react-navigation": "1.5.11",
    "react-redux": "5.0.6",
    "recompose": "0.26.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "replace-in-file": "3.1.1"
  },
  "devDependencies": {
    "async": "2.6.0",
    "babel-cli": "6.24.1",
    "babel-eslint": "8.0.2",
    "babel-jest": "23.0.0",
    "babel-plugin-module-resolver": "3.0.0",
    "babel-preset-env": "1.4.0",
    "babel-preset-flow": "6.23.0",
    "babel-preset-react-native": "4.0.0",
    "babel-preset-stage-2": "6.24.1",
    "babel-watch": "2.0.6",
    "chalk": "1.1.3",
    "detox": "8.2.3",
    "eslint": "4.12.0",
    "eslint-import-resolver-babel-module": "4.0.0-beta.3",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-prettier": "2.3.1",
    "eslint-plugin-react": "7.5.1",
    "flow-bin": "0.46.0",
    "fs-extra": "5.0.0",
    "jest": "23.6.0",
    "nps": "5.7.1",
    "nps-utils": "1.5.0",
    "patch-package": "5.1.1",
    "postinstall-prepare": "1.0.1",
    "prettier": "1.8.2",
    "prettier-eslint": "8.2.2",
    "react-test-renderer": "16.2.0",
    "reactotron-react-native": "1.14.0",
    "reactotron-redux": "1.13.0",
    "redux-mock-store": "1.3.0",
    "yargs": "8.0.1"
  },
  "jest": {
    "preset": "react-native",
    "setupTestFrameworkScriptFile": "./jest-setup.js",
    "transformIgnorePatterns": [
      "/node_modules/(?!parse)/"
    ],
    "unmockedModulePathPatterns": [
      "react",
      "react-navigation",
      "axios",
      "redux",
      "redux-thunk",
      "lodash",
      "date-fns"
    ],
    "verbose": true
  },
  "detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/NFIBEngage.app",
        "build": "xcodebuild -workspace ios/NFIBEngage.xcworkspace -configuration Debug -scheme NFIBEngage -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 6"
      }
    },
    "test-runner": "jest"
  }
}

The Reactotron configuration file was imported into the App.js file like so:

//eslint-disable-next-line
console.ignoredYellowBox = ["Setting a timer"];
import './ReactotronConfig';
import React, {PureComponent} from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  Linking,
  Platform,
  Alert,
} from 'react-native';
import {applyMiddleware, compose, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import Reactotron from 'reactotron-react-native';
import logger from 'logger';
import OneSignal from 'react-native-onesignal';
import SplashScreen from 'react-native-splash-screen';
import {Sentry} from 'react-native-sentry';
import {
  setJSExceptionHandler,
  setNativeExceptionHandler,
} from 'react-native-exception-handler';
import {jsHandler, nativeHandler} from 'utils/error-handlers';

import RootNavigation from 'navigation/RootNavigation';
import LocalStorage from 'services/LocalStorage';
import reducers from 'reducers';
import {
  setCurrentUser,
  validateUserInformationForVoterVoice,
} from 'auth/loginActions';
import {handleEventsDeepLink} from 'events/actions';
import {handleBallotsDeepLink} from 'surveys-ballots/actions';
import {setResetPasswordKey} from 'auth/registrationActions';
import {setNotificationData, deepLinkReceived} from 'navigation/actions';
import {view} from 'utils/view';
import {v2Colors} from 'theme';
import env from 'env';
import base from 'base-endpoint';
import * as appcenter from 'utils/appcenterLogger';
import * as cache from 'utils/cache';
import * as regex from 'utils/helpers/regex';

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));

Charlie · Accepted Answer · 2019-05-16T22:31:03.337

1

You need to import your reactotron configuration file in: - App.js (if your project was created using Create React Native App) or - index.js on line 1:

import 'pathtofile/ReactotronConfig.js';

you can also take a look at this link for start guide. https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md

i created a project from scratch and it did work for me it seems that the problem is the version of this two packages, try updating them from:

"reactotron-react-native": "1.14.0",

"reactotron-redux": "1.13.0"

to:

"reactotron-react-native": "^3.5.0",

"reactotron-redux": "^3.1.0"

edited May 16 '19 at 22:31

answered May 16 '19 at 16:48

Charlie

992
8
19

Carlos, that part is done, I will show you in the OP. – Daniel May 16 '19 at 16:52
you are using android or ios simulator? – Charlie May 16 '19 at 16:54
I am using iOS simulator. – Daniel May 16 '19 at 16:56
Hi again Daniel i made a new project from scratch and it worked perfectly then i switched to your dependencies version and it stopped connecting, "reactotron-react-native": "1.14.0", "reactotron-redux": "1.13.0", try to switch to "reactotron-react-native": "^3.5.0", "reactotron-redux": "^3.1.0", hope this works. – Charlie May 16 '19 at 17:17
thank you for your help, but like with most things React Native, whenever you update packages, its always breaking changes because now I am either going to have to refactor the code, or go back to the previous packages, annoying because updating those packages broke my application. The good news is, its now connected to Reactotron. So even though it broke my app in order for this to work, please post your suggestion as the answer. – Daniel May 16 '19 at 20:02
it seems like this is all wrong now for the updated versions: `const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));` – Daniel May 16 '19 at 20:28
you are right, i'm sorry to hear that it broke your app in this version you have to declare your config as a variable and export it, in order for use like its explained here, and use the createStore from - import { createStore } from 'redux'. https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md – Charlie May 16 '19 at 20:59
no worries, you were a big help, believe me, go ahead and post the suggestion to upgrade the packages as the answer. I was able to find documentation on the appropriate refactor for the versions you suggested. Thanks again! I look forward to choosing your answer as the correct one. – Daniel May 16 '19 at 21:09

React Native, cloned repo has Reactotron code and now I would like to use it but no connection

1 Answers1